@charset "UTF-8";

/* POAS statistics — Profit Tracking › POAS statistics (RUN-1368).
   Scoped to `.px-ps`. Prefix `ps-`, verified free before use: no stylesheet under
   resources/scss/** and no .vue selector owns `.px-ps`.

   ⚠️ The theme owns `.ps-customizer`. It is never nested inside `.px-ps`, so the two cannot meet
      — but the collision is recorded rather than left for someone to rediscover.

   🔑 DERIVED FROM `price-monitor-stats.scss`, ON PURPOSE. The design says this screen is the
      sibling of Price monitor statistics — *"same filter card, same tabs, same ranking cards, same
      hover breakdown, same drill-down … keep the two in step"* — so the shared chrome is the same
      rules under a different scope rather than a second interpretation of them. What follows the
      SHARED CHROME marker is this screen's own: the reconciliation line, the setup gate's steps,
      the columns picker and the drill-down's product rows. */

.px-ps {
  --px-white: #ffffff;
  --px-navy-700: #28374F;
  --shadow-overlay: 0 12px 32px rgba(16, 24, 40, 0.24);
  --type-mono: var(--weight-regular) var(--text-sm) / 1.5 var(--font-mono);
  --px-grey-25: #fafafc;
  --px-grey-50: #f8f8f8;
  --px-grey-75: #f5f5f7;
  --px-grey-100: #f3f4f7;
  --px-grey-150: #edeef1;
  --px-grey-200: #ebe9f1;
  --px-grey-250: #e8e8ec;
  --px-grey-300: #d8d6de;
  --px-grey-400: #bbc1ca;
  --px-grey-450: #b9b9c3;
  --px-grey-500: #737a87;
  --px-grey-600: #6e6b7b;
  --px-grey-700: #5e5873;
  --px-grey-800: #4b465c;
  --px-grey-900: #2f2b3d;
  --px-ink: #151b22;
  --px-green-50: #e9f9ee;
  --px-green-100: #dcfce8;
  --px-green-150: #ecfdef;
  --px-green-200: #b6f0cc;
  --px-green-500: #28c76f;
  --px-green-550: #2bb669;
  --px-green-600: #22A44E;
  --px-green-700: #16a34a;
  --px-green-800: #127c3a;
  --px-green-900: #17a851;
  --px-blue-50: #e8eefc;
  --px-blue-100: #c5d0f6;
  --px-blue-400: #60a5fa;
  --px-blue-500: #1e4ed8;
  --px-blue-600: #0b57a6;
  --px-blue-700: var(--px-blue-600);
  --px-violet-50: #eeedfd;
  --px-violet-100: #e2e1f5;
  --px-violet-500: #7367f0;
  --px-violet-600: #5b54e8;
  --px-cyan-500: #00cfe8;
  --px-orange-400: #f28058;
  --px-rust-600: #b4451e;
  --px-navy-800: #1f2e47;
  --px-red-50: #fff6f4;
  --px-red-100: #fcd7d6;
  --px-red-500: #ea5455;
  --px-red-600: #cb4744;
  --px-amber-50: #fffbf0;
  --px-amber-200: #f1dfbd;
  --px-amber-500: #ff9f43;
  --px-amber-600: #d49838;
  --px-amber-700: #b45309;
  --price-cheapest: var(--px-green-900);
  --price-below: var(--px-green-500);
  --price-parity: var(--px-amber-600);
  --price-above: var(--px-orange-400);
  --price-expensive: var(--px-red-600);
  --text-heading: var(--px-grey-700);
  --text-body: var(--px-grey-600);
  --text-muted: var(--px-grey-500);
  --text-faint: var(--px-grey-450);
  --text-link: var(--px-blue-500);
  --text-code: var(--px-violet-600);
  --text-strong: var(--px-ink);
  --px-navy-900: #16233a;
  --surface-page: var(--px-grey-75);
  --surface-card: var(--px-white);
  --surface-subtle: var(--px-grey-100);
  --surface-sunken: var(--px-grey-50);
  --surface-inverse: var(--px-ink);
  --surface-overlay: rgba(21, 27, 34, 0.45);
  --border-subtle: var(--px-grey-150);
  --border-default: var(--px-grey-250);
  --border-strong: var(--px-grey-300);
  --action-primary: var(--px-green-600);
  --action-primary-strong: var(--px-green-700);
  --action-quiet-bg: var(--px-white);
  --action-quiet-border: var(--px-grey-300);
  --action-accent: var(--px-violet-500);
  --action-accent-hover: var(--px-violet-600);
  --action-danger: var(--px-red-500);
  --action-danger-hover: var(--px-red-600);
  --border-focus: var(--px-violet-500);
  --status-success-fg: var(--px-green-700);
  --status-success-bg: var(--px-green-50);
  --status-danger-fg: var(--px-red-600);
  --status-danger-bg: var(--px-red-50);
  --status-warning-fg: var(--px-amber-600);
  --status-warning-bg: var(--px-amber-50);
  --status-warning-border: var(--px-amber-200);
  --status-info-fg: var(--px-blue-500);
  --status-info-bg: var(--px-blue-50);
  --status-neutral-fg: var(--px-grey-500);
  --status-neutral-bg: var(--px-grey-100);
  --status-live: var(--px-green-900);
  --status-paused: var(--px-grey-400);
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-14: 40px;
  --space-16: 48px;
  --card-padding: var(--space-10);
  --table-cell-x: var(--space-10);
  --table-cell-y: var(--space-9);
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 46px;
  --control-padding-x: 18px;
  --stack-loose: var(--space-10);
  --font-core: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 28px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.45;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-caps: 0.08em;
  --tracking-normal: 0;
  --type-page-title: var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-core);
  --type-section-title: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-core);
  --type-card-title: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-core);
  --type-body: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-core);
  --type-body-md: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-core);
  --type-label: var(--weight-medium) var(--text-base)/var(--leading-snug) var(--font-core);
  --type-table-head: var(--weight-semibold) var(--text-sm)/1.2 var(--font-core);
  --type-caption: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-core);
  --type-eyebrow: var(--weight-semibold) var(--text-xs)/1.2 var(--font-core);
  --type-code: var(--weight-regular) var(--text-sm)/1.5 var(--font-mono);
  --type-metric: var(--weight-semibold) var(--text-4xl)/1.05 var(--font-core);
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 14px;
  --radius-pill: 999px;
  --shadow-hairline: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-raised: 0 4px 12px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-dropdown: 0 8px 24px rgba(16, 24, 40, 0.14);
  --shadow-modal: 0 24px 64px rgba(16, 24, 40, 0.22), 0 2px 8px rgba(16, 24, 40, 0.1);
  --ring-focus: 0 0 0 3px rgba(115, 103, 240, 0.22);
  --ring-focus-green: 0 0 0 3px rgba(34, 164, 78, 0.22);
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-control: background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  --transition-surface: background-color var(--duration-base) var(--ease-standard);
  /* 🔴 The pricing-position ramp. The design system defines these in tokens/colors.css under
     "Pricing-position scale (Competitor Tracking)"; the platform's token file did not carry them,
     and every chart, legend, tooltip and table tone on this screen reads them. */
  --price-cheapest: var(--px-green-900);
  --price-below: var(--px-green-500);
  --price-parity: var(--px-amber-600);
  --price-above: var(--px-orange-400);
  --price-expensive: var(--px-red-600);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space-10);
  color: var(--text-body);
  /* ── page header ──────────────────────────────────────────────────────── */
  /* ── card ─────────────────────────────────────────────────────────────── */
  /* ── filter bar ───────────────────────────────────────────────────────── */
  /* the period control, a segmented box */
  /* RUN-1399: a window no ad report covers — still pickable (orders, revenue, profit), marked so
     the missing POAS is expected rather than a surprise. A dotted underline, not a disabled look. */
  /* the KPI strip, pushed right */
  /* ── tabs ─────────────────────────────────────────────────────────────── */
  /* 🔴 NOT scoped to `.ps-tabs`. The design's page header carries TWO of these — the active
     period and "Last click" — as `<Badge tone="neutral">`, and the section headers carry a
     count badge. Scoped to the tab strip they rendered as bare text everywhere else, which is
     how the header read "POAS statistics 30d Last click" as one run-on sentence. */
  /* the attribution badge is a statement of fact, not a count — it reads better in caps */
  /* ── section card ─────────────────────────────────────────────────────── */
  /* ── ranking cards ────────────────────────────────────────────────────── */
  /* ── the legend ───────────────────────────────────────────────────────── */
  /**
   * 🔴 RUN-1374 — THE BASE RULE IS UNSCOPED, AND THAT IS THE FIX.
   *
   * `.ps-swatch` is rendered in TWO places with byte-identical markup and the same `tone`
   * values — the legend under the section head, and every band row in the hover breakdown. The
   * sizing rule lived under `.ps-legend`, so the tooltip's swatches had **no width and no
   * height**: the colour was being set inline on a 0×0 box and painted nothing, which is why
   * the breakdown read as four unlabelled grey lines.
   *
   * ⚠️ Same shape as `.ps-tabcount` two commits ago (`RUN-1371`), which was scoped to
   *    `.ps-tabs` while the page header used it too. I fixed that one and did not census the
   *    other classes in this file for it — `sibling-inconsistency.md`'s exact lesson, and the
   *    census question is *"which OTHER classes are used in more than one block?"*
   *
   * 🔑 9×9 is the design's tooltip size (`PoasStatsScreen.jsx:611`); the legend keeps its own
   *    12×12 below, because the two are deliberately different and the legend is unchanged.
   */
  /* ── the table ────────────────────────────────────────────────────────── */
  /* the sort control inside a sortable header — the header's own look; its click bubbles to the th */
  /* a cell that drills down */
  /* the bar behind whichever column is sorted */
  /* ── the stacked position mix ─────────────────────────────────────────── */
  /* focusable: the breakdown opens on keyboard focus too */
  /* ── the hover tooltip ────────────────────────────────────────────────── */
  /* RUN-1387 (owner): "write products as i do not know what the number means or make it a table
     with intuitive header". ⚠️ The breakdown's three other parts had NO rule at all, measured:
     `__head` and `__sub` are spans and ran together on one line, and `__foot`'s three figures
     ran on as "Blended POAS1.23× Profit after ads+€123". The same table as Price monitor
     statistics' Position-mix breakdown, and the footer as label/value rows. */
  /* RUN-1399: the per-channel table under the band table */
  /* ── skeletons: the design's own shimmer ──────────────────────────────── */
  /* ── the two gates: blurred, never hidden ─────────────────────────────── */
  /* ── the drill-down panel ─────────────────────────────────────────────── */
  /* ⚠️ Deliberately NOT a modal with its own scroller: the design requires the PAGE to scroll,
     so this is an in-document panel over a fixed backdrop and the document grows to its height. */
  /* ── buttons, in the design's vocabulary ──────────────────────────────── */
  /* RUN-1399: used by the drill's "Open link" and the error alert — it had no rule at all */
  /* RUN-1399 (review): amber text on the amber ground measured 2.43:1 — the ink is body text now and
     the amber stays on the icon, where it carries the meaning */
  /* RUN-1456 (sweeps/poas-screens #11): the drill's READ FAILURE, in the empty state's place — it must not
     read as the quiet grey "nothing here", because it says the opposite: nothing was read. */
  /* ══ THIS SCREEN'S OWN ══════════════════════════════════════════════════ */
  /* ── 3. the spend reconciliation line ─────────────────────────────────── */
  /* Mandatory (design §3). It always reads under 100% and that is the point. */
  /* ── 3b. where each channel's spend comes from (RUN-1399) ─────────────── */
  /* One card per channel with a spend report for the window. The untracked one is tinted with
     the warning tone and says why its POAS is refused — the coverage line is the reason. */
  /* ⚠️ body ink, not amber: amber text on the amber ground measured 2.43:1 (review) */
  /* RUN-1400: an incomplete report's warning — body ink, the amber on the icon only (contrast) */
  /* ── the KPI strip's secondary figure (untracked spend) ─────────────────── */
  /* ── the "Spend by channel" cell (RUN-1399): one line per channel, a bar for its share ── */
  /* ── 10. the gates: blur, never hide ──────────────────────────────────── */
  /* ── 12. the columns picker ───────────────────────────────────────────── */
  /* FIXED, not absolute: the section header wraps on phones and an absolutely positioned panel
     would hang off the edge. Clamped on both axes by toggleCols(), dismissed on scroll/resize. */
  /* a group under 1% of total spend — too small to carry a verdict */
  /* RUN-1399: the spend-source cards' state — in POAS, or untracked */
  /* ── 9. the drill-down ────────────────────────────────────────────────── */
  /* Full-width in-document panel; THE PAGE scrolls, not the panel (design §9). */
  /**
   * 🔴 RUN-1374 (owner) — the drill-down is a POPUP, like Export → Labels → View products.
   *
   * ⚠️ z-index 1050 is BootstrapVue's `$zindex-modal`, the same value `export-editor.scss` uses:
   *    above Vuexy's sidebar (1031) and below the toasts (9999). Anything lower renders BEHIND
   *    the sidebar on a wide screen.
   */
  /* The product row IS export labels' `px-ee__prod`, by the owner's instruction (2026-09-09).
     Only the right-hand column differs: POAS money instead of price and availability. */
  /* The design's hover affordance on a drillable count cell: a small bordered tile with a
     list icon, drawn BEFORE the value, plus a tinted cell. Without it nothing says the number
     is clickable until the cursor changes, and the drill-down is the screen's main action. */
  /* ── 12. responsive: nothing may overlap or clip at 360px ─────────────── */
  /* ── §12 — the design's own two breakpoints ──────────────────────────────
     "Filters stack full-width under 900px; the KPI strip drops its auto margin and becomes a
     grid (2 columns under 560px)." Neither came across when this file was derived from
     price-monitor-stats.scss, so at 360px the KPI strip stayed a single squeezed row. */
  /* the sticky group label stops at 140px on a phone and ellipsises; the cell's title has the full text */
}

.px-ps .ps-head__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-6);
  font: var(--type-page-title);
  color: var(--text-strong);
}

[dir] .px-ps .ps-head__title {
  margin: 0 0 var(--space-4);
}

.px-ps .ps-head__lede {
  max-width: 78ch;
  font: var(--type-body-md);
  color: var(--text-muted);
  text-wrap: pretty;
}

[dir] .px-ps .ps-head__lede {
  margin: 0;
}

.px-ps .ps-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space-9);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.px-ps .ps-head__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-6);
}

[dir=ltr] .px-ps .ps-head__actions {
  margin-left: auto;
}

[dir=rtl] .px-ps .ps-head__actions {
  margin-right: auto;
}

.px-ps .ps-card {
  -webkit-box-shadow: var(--shadow-card);
}

[dir] .px-ps .ps-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
          -webkit-box-shadow: var(--shadow-card);
                  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
}

.px-ps .ps-card--flush {
  overflow: visible;
}

[dir] .px-ps .ps-card--flush {
  padding: 0;
}

.px-ps .ps-filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: var(--space-10);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.px-ps .ps-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space-2);
}

.px-ps .ps-field__label,
.px-ps .ps-stat__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps, 0.06em);
  text-transform: uppercase;
  color: var(--text-faint);
}

.px-ps .ps-field select {
  height: var(--control-height-sm);
  min-width: 160px;
  font: var(--type-body-md);
  color: var(--text-body);
}

[dir] .px-ps .ps-field select {
  padding: 0 var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm, 6px);
}

.px-ps .ps-field select:focus {
  outline: none;
  -webkit-box-shadow: var(--ring-focus);
}

[dir] .px-ps .ps-field select:focus {
          -webkit-box-shadow: var(--ring-focus);
                  box-shadow: var(--ring-focus);
}

.px-ps .ps-seg {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

[dir] .px-ps .ps-seg {
  padding: 3px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
}

.px-ps .ps-seg button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 26px;
  font: var(--type-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

[dir] .px-ps .ps-seg button {
  border: 0;
  background: transparent;
  padding: 0 var(--space-6);
  border-radius: 4px;
  cursor: pointer;
}

.px-ps .ps-seg button.is-on {
  color: var(--text-strong);
  -webkit-box-shadow: var(--shadow-hairline);
}

[dir] .px-ps .ps-seg button.is-on {
  background: var(--surface-card);
          -webkit-box-shadow: var(--shadow-hairline);
                  box-shadow: var(--shadow-hairline);
}

.px-ps .ps-seg button.is-nospend {
  -webkit-text-decoration: underline dotted var(--text-faint);
          text-decoration: underline dotted var(--text-faint);
  text-underline-offset: 3px;
}

.px-ps .ps-kpis {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /* RUN-1399: a tile with a second line no longer lifts above the others */
  gap: var(--space-10);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-transition: opacity 140ms ease;
  transition: opacity 140ms ease;
}

[dir] .px-ps .ps-kpis {
  padding-bottom: 6px;
  -webkit-transition: opacity 140ms ease;
}

[dir=ltr] .px-ps .ps-kpis {
  margin-left: auto;
}

[dir=rtl] .px-ps .ps-kpis {
  margin-right: auto;
}

.px-ps .ps-kpis.is-loading {
  opacity: 0.5;
}

.px-ps .ps-stat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}

.px-ps .ps-stat__value {
  font: var(--type-section-title);
  color: var(--text-strong);
}

.px-ps .ps-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-2);
  /* ⚠️ SCROLL, never wrap — the design says so in §12, and with eight tabs "Margin tier"
     dropped onto a second line on its own, which reads as a separate control rather than
     the last tab of the strip. */
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

[dir] .px-ps .ps-tabs {
  border-bottom: 1px solid var(--border-subtle);
}

.px-ps .ps-tabs::-webkit-scrollbar {
  height: 4px;
}

[dir] .px-ps .ps-tabs::-webkit-scrollbar-thumb {
  background: var(--px-grey-100);
  border-radius: 99px;
}

.px-ps .ps-tabs button {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.px-ps .ps-tabs button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: var(--type-label);
  color: var(--text-muted);
  white-space: nowrap;
}

[dir] .px-ps .ps-tabs button {
  border: 0;
  background: transparent;
  padding: var(--space-6) var(--space-7);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.px-ps .ps-tabs button:hover {
  color: var(--text-body);
}

.px-ps .ps-tabs button.is-on {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}

[dir] .px-ps .ps-tabs button.is-on {
  border-bottom-color: var(--action-accent);
}

.px-ps .ps-tabcount {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font: var(--type-caption);
  font-weight: var(--weight-medium, 500);
  color: var(--status-neutral-fg);
  white-space: nowrap;
}

[dir] .px-ps .ps-tabcount {
  padding: 1px var(--space-4);
  background: var(--status-neutral-bg);
  border-radius: var(--radius-pill, 999px);
}

[dir=ltr] .px-ps .ps-tabcount {
  margin-left: var(--space-3);
}

[dir=rtl] .px-ps .ps-tabcount {
  margin-right: var(--space-3);
}

.px-ps .ps-tabcount--caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.px-ps .ps-section__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space-7);
}

[dir] .px-ps .ps-section__head {
  padding: var(--space-9);
  border-bottom: 1px solid var(--border-subtle);
}

.px-ps .ps-section__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-5);
  font: var(--type-section-title);
  color: var(--text-strong);
}

.px-ps .ps-section__hint {
  font: var(--type-caption);
  color: var(--text-faint);
  text-wrap: pretty;
}

.px-ps .ps-section__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space-8);
}

[dir] .px-ps .ps-section__body {
  padding: var(--space-9);
}

.px-ps .ps-section__action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-7);
}

[dir=ltr] .px-ps .ps-section__action {
  margin-left: auto;
}

[dir=rtl] .px-ps .ps-section__action {
  margin-right: auto;
}

.px-ps .ps-ranks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-9);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.px-ps .ps-rank__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-7);
}

[dir] .px-ps .ps-rank__row {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-subtle);
}

[dir] .px-ps .ps-rank__row:last-child {
  border-bottom: 0;
}

.px-ps .ps-rank__label {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  font: var(--type-body-md);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-ps .ps-rank__bar {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 96px;
          flex: 0 0 96px;
  height: 6px;
  overflow: hidden;
}

[dir] .px-ps .ps-rank__bar {
  border-radius: var(--radius-pill, 999px);
  background: var(--px-grey-100);
}

.px-ps .ps-rank__bar span {
  display: block;
  height: 100%;
}

[dir] .px-ps .ps-rank__bar span {
  border-radius: inherit;
}

.px-ps .ps-rank__value {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font: var(--type-body-md);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.px-ps .ps-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-8);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.px-ps .ps-legend > span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-5);
}

.px-ps i.ps-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

[dir] .px-ps i.ps-swatch {
  border-radius: 2px;
}

.px-ps .ps-legend i.ps-swatch {
  width: 12px;
  height: 12px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

[dir] .px-ps .ps-legend i.ps-swatch {
  border-radius: 3px;
}

.px-ps .ps-legend em {
  font: var(--type-caption);
  font-style: normal;
  color: var(--text-muted);
}

.px-ps .ps-legend em strong {
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}

.px-ps .ps-tablewrap {
  overflow-x: auto;
}

[dir] .px-ps .ps-tablewrap {
  margin: 0 calc(-1 * var(--space-9));
  border-top: 1px solid var(--border-subtle);
}

.px-ps table.ps-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body-md);
}

[dir] .px-ps .ps-table thead tr {
  background: var(--px-grey-75);
}

.px-ps .ps-table th {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps, 0.06em);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

[dir] .px-ps .ps-table th {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}

[dir=ltr] .px-ps .ps-table th {
  text-align: right;
}

[dir=rtl] .px-ps .ps-table th {
  text-align: left;
}

[dir=ltr] .px-ps .ps-table th:first-child, [dir=ltr] .px-ps .ps-table th.ps-th--left {
  text-align: left;
}

[dir=rtl] .px-ps .ps-table th:first-child, [dir=rtl] .px-ps .ps-table th.ps-th--left {
  text-align: right;
}

.px-ps .ps-table th:first-child {
  position: sticky;
  z-index: 1;
}

[dir] .px-ps .ps-table th:first-child {
  background: var(--px-grey-75);
}

[dir=ltr] .px-ps .ps-table th:first-child {
  left: 0;
}

[dir=rtl] .px-ps .ps-table th:first-child {
  right: 0;
}

.px-ps .ps-table th .ps-sorted {
  color: var(--text-strong);
}

.px-ps .ps-table th .ps-th__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

[dir] .px-ps .ps-table th .ps-th__btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.px-ps .ps-table th .ps-th__btn:focus-visible {
  outline: none;
  -webkit-box-shadow: var(--ring-focus);
}

[dir] .px-ps .ps-table th .ps-th__btn:focus-visible {
          -webkit-box-shadow: var(--ring-focus);
                  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

.px-ps .ps-table td {
  color: var(--text-body);
  white-space: nowrap;
  position: relative;
}

[dir] .px-ps .ps-table td {
  padding: var(--space-7) var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
}

[dir=ltr] .px-ps .ps-table td {
  text-align: right;
}

[dir=rtl] .px-ps .ps-table td {
  text-align: left;
}

[dir=ltr] .px-ps .ps-table td:first-child, [dir=ltr] .px-ps .ps-table td.ps-td--left {
  text-align: left;
}

[dir=rtl] .px-ps .ps-table td:first-child, [dir=rtl] .px-ps .ps-table td.ps-td--left {
  text-align: right;
}

.px-ps .ps-table td:first-child {
  position: sticky;
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  /* RUN-1456 (sweeps/poas-screens #15): the header cell has carried `z-index: 1` since RUN-1368 and the
     body cell had none. EVERY `td` on this table is `position: relative` (the sorted-column bar is absolute
     inside one), so positioned siblings with `z-index: auto` paint in DOM order — the 16 scrolling columns
     painted OVER the sticky group label at 375px, which is the "label scrolls away" this was reported as. */
  z-index: 1;
}

[dir] .px-ps .ps-table td:first-child {
  background: var(--surface-card);
}

[dir=ltr] .px-ps .ps-table td:first-child {
  left: 0;
}

[dir=rtl] .px-ps .ps-table td:first-child {
  right: 0;
}

[dir] .px-ps .ps-table td.is-drillable {
  cursor: pointer;
}

[dir] .px-ps .ps-table td.is-drillable:hover, [dir] .px-ps .ps-table td.is-hot {
  background: var(--px-grey-50);
}

.px-ps .ps-table td.is-drillable:focus-visible {
  outline: none;
  -webkit-box-shadow: var(--ring-focus);
}

[dir] .px-ps .ps-table td.is-drillable:focus-visible {
          -webkit-box-shadow: var(--ring-focus);
                  box-shadow: var(--ring-focus);
}

.px-ps .ps-bar {
  position: absolute;
  inset: 6px 8px 6px auto;
  opacity: 0.12;
  pointer-events: none;
}

[dir] .px-ps .ps-bar {
  border-radius: var(--radius-xs);
}

[dir=ltr] .px-ps .ps-bar {
  right: 8px;
}

[dir=rtl] .px-ps .ps-bar {
  left: 8px;
}

.px-ps .ps-table tr.ps-totals td {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

[dir] .px-ps .ps-table tr.ps-totals td {
  background: var(--px-grey-75);
  border-top: 2px solid var(--border-default);
}

.px-ps .ps-mix {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 140px;
  height: 10px;
  overflow: hidden;
}

[dir] .px-ps .ps-mix {
  border-radius: var(--radius-pill, 999px);
  background: var(--px-grey-100);
  cursor: default;
}

.px-ps .ps-mix span {
  display: block;
  height: 100%;
}

.px-ps .ps-mix:focus-visible {
  outline: none;
  -webkit-box-shadow: var(--ring-focus);
}

[dir] .px-ps .ps-mix:focus-visible {
          -webkit-box-shadow: var(--ring-focus);
                  box-shadow: var(--ring-focus);
}

.px-ps .ps-tip {
  position: fixed;
  z-index: 80;
  min-width: 250px;
  max-width: 320px;
  color: var(--px-white);
  -webkit-box-shadow: var(--shadow-dropdown);
  font: var(--type-caption);
  pointer-events: none;
}

[dir] .px-ps .ps-tip {
  padding: var(--space-7) var(--space-8);
  background: var(--surface-inverse);
  border-radius: var(--radius-lg, 10px);
          -webkit-box-shadow: var(--shadow-dropdown);
                  box-shadow: var(--shadow-dropdown);
}

.px-ps .ps-tip strong {
  color: var(--px-white);
  font-weight: var(--weight-semibold);
}

.px-ps .ps-tip__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-5);
}

[dir] .px-ps .ps-tip__row {
  padding: 3px 0;
}

.px-ps .ps-tip__row b {
  font-weight: var(--weight-semibold);
}

[dir=ltr] .px-ps .ps-tip__row b {
  margin-left: auto;
}

[dir=rtl] .px-ps .ps-tip__row b {
  margin-right: auto;
}

.px-ps .ps-tip__sub {
  color: rgba(255, 255, 255, 0.62);
}

.px-ps .ps-tip__head {
  display: block;
  color: var(--px-white);
  font-weight: var(--weight-semibold);
}

.px-ps .ps-tip .ps-tip__sub {
  display: block;
}

[dir] .px-ps .ps-tip .ps-tip__sub {
  padding-bottom: 4px;
}

.px-ps .ps-tip__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.px-ps .ps-tip__table th {
  color: rgba(255, 255, 255, 0.62);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

[dir] .px-ps .ps-tip__table th {
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

[dir=ltr] .px-ps .ps-tip__table th {
  text-align: right;
}

[dir=rtl] .px-ps .ps-tip__table th {
  text-align: left;
}

.px-ps .ps-tip__table td {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

[dir] .px-ps .ps-tip__table td {
  padding: var(--space-2) 0;
}

[dir=ltr] .px-ps .ps-tip__table td {
  text-align: right;
}

[dir=rtl] .px-ps .ps-tip__table td {
  text-align: left;
}

[dir] .px-ps .ps-tip__table tbody tr:first-child td {
  padding-top: var(--space-4);
}

[dir=ltr] .px-ps .ps-tip__table th + th, [dir=ltr] .px-ps .ps-tip__table td + td {
  padding-left: var(--space-7);
}

[dir=rtl] .px-ps .ps-tip__table th + th, [dir=rtl] .px-ps .ps-tip__table td + td {
  padding-right: var(--space-7);
}

[dir=ltr] .px-ps .ps-tip__table th:first-child, [dir=ltr] .px-ps .ps-tip__table td:first-child {
  text-align: left;
}

[dir=rtl] .px-ps .ps-tip__table th:first-child, [dir=rtl] .px-ps .ps-tip__table td:first-child {
  text-align: right;
}

.px-ps .ps-tip__table td:first-child {
  font-weight: var(--weight-regular);
  white-space: normal;
}

.px-ps .ps-tip__band {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-4);
}

[dir] .px-ps .ps-tip__table + .ps-tip__table {
  margin-top: var(--space-5);
}

.px-ps .ps-tip__foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space-2);
}

[dir] .px-ps .ps-tip__foot {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.px-ps .ps-tip__foot > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--space-7);
  color: rgba(255, 255, 255, 0.62);
}

.px-ps .ps-tip__foot strong {
  font-variant-numeric: tabular-nums;
}

[dir] .px-ps .ps-skel {
  border-radius: 3px;
  background-size: 180px 100%;
}

[dir=ltr] .px-ps .ps-skel {
  background: linear-gradient(90deg, var(--px-grey-100) 0%, var(--px-grey-75) 50%, var(--px-grey-100) 100%);
  -webkit-animation: ps-shimmer 1s linear infinite;
  animation: ps-shimmer 1s linear infinite;
}

[dir=rtl] .px-ps .ps-skel {
  background: linear-gradient(-90deg, var(--px-grey-100) 0%, var(--px-grey-75) 50%, var(--px-grey-100) 100%);
  -webkit-animation: ps-shimmer 1s linear infinite;
          animation: ps-shimmer 1s linear infinite;
}

@-webkit-keyframes ps-shimmer {
  0% {
    background-position: -180px 0;
  }

  100% {
    background-position: 180px 0;
  }
}

@keyframes ps-shimmer {
  0% {
    background-position: -180px 0;
  }

  100% {
    background-position: 180px 0;
  }
}

.px-ps .ps-gated {
  position: relative;
}

.px-ps .ps-gated__content {
  transition: -webkit-filter 160ms ease;
  -webkit-transition: -webkit-filter 160ms ease;
  transition: filter 160ms ease;
  transition: filter 160ms ease, -webkit-filter 160ms ease;
}

[dir] .px-ps .ps-gated__content {
  -webkit-transition: -webkit-filter 160ms ease;
}

.px-ps .ps-gated.is-blocked .ps-gated__content {
  -webkit-filter: blur(6px);
          filter: blur(6px);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.55;
}

.px-ps .ps-gate {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 5;
}

[dir] .px-ps .ps-gate {
  padding: var(--space-14) var(--space-9);
}

.px-ps .ps-gate__card {
  max-width: 560px;
  -webkit-box-shadow: var(--shadow-modal);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space-7);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

[dir] .px-ps .ps-gate__card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
          -webkit-box-shadow: var(--shadow-modal);
                  box-shadow: var(--shadow-modal);
  padding: var(--card-padding);
}

.px-ps .ps-gate__icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--status-warning-fg);
  font-size: 22px;
}

[dir] .px-ps .ps-gate__icon {
  border-radius: var(--radius-pill, 999px);
  background: var(--status-warning-bg);
}

.px-ps .ps-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space-6);
}

.px-ps .ps-step__n {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--status-neutral-fg);
  font: var(--type-caption);
  font-weight: var(--weight-semibold);
}

[dir] .px-ps .ps-step__n {
  border-radius: var(--radius-pill, 999px);
  background: var(--status-neutral-bg);
}

.px-ps .ps-step.is-done .ps-step__n {
  color: var(--status-success-fg);
}

[dir] .px-ps .ps-step.is-done .ps-step__n {
  background: var(--status-success-bg);
}

.px-ps .ps-drill__backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
}

[dir] .px-ps .ps-drill__backdrop {
  background: var(--surface-overlay);
}

.px-ps .ps-drill {
  position: absolute;
  top: var(--space-10);
  z-index: 91;
  width: min(1180px, calc(100% - 2 * var(--space-10)));
  -webkit-box-shadow: var(--shadow-modal);
}

[dir] .px-ps .ps-drill {
  margin-bottom: var(--space-14);
  border-radius: var(--radius-2xl);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
          -webkit-box-shadow: var(--shadow-modal);
                  box-shadow: var(--shadow-modal);
}

[dir=ltr] .px-ps .ps-drill {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

[dir=rtl] .px-ps .ps-drill {
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}

.px-ps .ps-drill__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space-7);
}

[dir] .px-ps .ps-drill__head {
  padding: var(--space-9);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.px-ps .ps-drill__body {
  overflow-y: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

[dir] .px-ps .ps-drill__body {
  padding: var(--space-9);
}

.px-ps .ps-drill__more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

[dir] .px-ps .ps-drill__more {
  padding-top: var(--space-8);
}

.px-ps .ps-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-4);
  height: var(--control-height-sm);
  font: var(--type-label);
  color: var(--text-body);
  white-space: nowrap;
}

[dir] .px-ps .ps-btn {
  padding: 0 var(--space-7);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--action-quiet-border);
  background: var(--action-quiet-bg);
  cursor: pointer;
}

[dir] .px-ps .ps-btn:hover {
  background: var(--px-grey-50);
}

.px-ps .ps-btn--primary {
  color: var(--px-white);
}

[dir] .px-ps .ps-btn--primary {
  background: var(--action-primary-strong);
  border-color: var(--action-primary-strong);
}

[dir] .px-ps .ps-btn--ghost {
  border-color: transparent;
  background: transparent;
}

.px-ps .ps-btn--sm {
  height: 26px;
  font: var(--type-caption);
  font-weight: var(--weight-semibold);
}

[dir] .px-ps .ps-btn--sm {
  padding: 0 var(--space-5);
}

.px-ps .ps-alert {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-6);
  font: var(--type-body-md);
  text-wrap: pretty;
}

[dir] .px-ps .ps-alert {
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-sm, 6px);
}

.px-ps .ps-alert--info {
  color: var(--status-info-fg);
}

[dir] .px-ps .ps-alert--info {
  background: var(--status-info-bg);
}

.px-ps .ps-alert--warning {
  color: var(--text-body);
}

[dir] .px-ps .ps-alert--warning {
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
}

.px-ps .ps-alert--warning svg {
  color: var(--status-warning-fg);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.px-ps .ps-empty {
  font: var(--type-body-md);
  color: var(--text-faint);
}

[dir] .px-ps .ps-empty {
  margin: 0;
  padding: var(--space-12);
  text-align: center;
}

.px-ps .ps-empty--error {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--space-6);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: var(--status-danger-fg);
}

.px-ps .ps-recon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  font: var(--type-body-md);
  color: var(--text-body);
}

[dir] .px-ps .ps-recon {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}

.px-ps .ps-recon strong {
  color: var(--text-strong);
}

.px-ps .ps-recon .ps-hint {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 260px;
          flex: 1 1 260px;
}

.px-ps .ps-recon svg {
  color: var(--text-muted);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.px-ps .ps-sources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--space-6);
}

[dir] .px-ps .ps-sources {
  margin-top: var(--space-7);
}

.px-ps .ps-source {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

[dir] .px-ps .ps-source {
  padding: var(--space-6) var(--space-7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-card);
}

[dir] .px-ps .ps-source.is-untracked {
  background: var(--status-warning-bg);
  border-color: var(--status-warning-border);
}

.px-ps .ps-source__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--space-4);
  font: var(--type-label);
  color: var(--text-strong);
}

.px-ps .ps-source__fig {
  font: var(--type-body-md);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.px-ps .ps-source__fig em {
  font-style: normal;
  font-weight: normal;
  color: var(--text-muted);
}

.px-ps .ps-source__meta,
.px-ps .ps-source__cov {
  font: var(--type-caption);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.px-ps .ps-source.is-untracked .ps-source__cov {
  color: var(--text-body);
}

.px-ps .ps-source__warn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: var(--space-3);
  font: var(--type-caption);
  color: var(--text-body);
}

.px-ps .ps-source__warn svg {
  color: var(--status-warning-fg);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

[dir] .px-ps .ps-source__warn svg {
  margin-top: 2px;
}

.px-ps .ps-stat__hint {
  display: block;
  font: var(--type-caption);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.px-ps .ps-split {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 150px;
}

.px-ps .ps-split__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: var(--space-4);
  font: var(--type-caption);
  color: var(--text-body);
}

[dir] .px-ps .ps-split__item {
  padding: 1px var(--space-2);
}

.px-ps .ps-split__bar {
  position: absolute;
  inset: 0 auto 0 0;
  opacity: 0.12;
  pointer-events: none;
}

[dir] .px-ps .ps-split__bar {
  background: var(--px-blue-500);
  border-radius: 3px;
}

.px-ps .ps-split__label {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.px-ps .ps-split .ps-num {
  position: relative;
  white-space: nowrap;
}

.px-ps .ps-gate__steps {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space-4);
}

[dir] .px-ps .ps-gate__steps {
  margin: var(--space-6) 0 0;
  padding: 0;
}

[dir=ltr] .px-ps .ps-gate__steps {
  text-align: left;
}

[dir=rtl] .px-ps .ps-gate__steps {
  text-align: right;
}

.px-ps .ps-gate__steps li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-5);
  font: var(--type-body-md);
  /* RUN-1400 (review): body ink — --text-muted measured 4.32:1 on the white card */
  color: var(--text-body);
  /* the gate doubles as a progress read-out, so a done step must LOOK done — the colour on the
     icon only (--price-cheapest is 3.11:1 as text), the file's own rule at .ps-alert--warning */
}

.px-ps .ps-gate__steps li.is-done {
  color: var(--text-strong);
}

.px-ps .ps-gate__steps li.is-done svg {
  color: var(--price-cheapest);
}

.px-ps .ps-gate__lede {
  font: var(--type-body-md);
  color: var(--text-body);
}

[dir] .px-ps .ps-gate__lede {
  margin: 0;
}

.px-ps .ps-cols {
  position: fixed;
  z-index: 1080;
  width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-box-shadow: var(--shadow-dropdown);
}

[dir] .px-ps .ps-cols {
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
          -webkit-box-shadow: var(--shadow-dropdown);
                  box-shadow: var(--shadow-dropdown);
}

.px-ps .ps-cols__head {
  display: block;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

[dir] .px-ps .ps-cols__head {
  padding: var(--space-4) var(--space-5);
}

.px-ps .ps-cols__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-5);
  font: var(--type-body-md);
  color: var(--text-body);
}

[dir] .px-ps .ps-cols__row {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  cursor: pointer;
}

[dir] .px-ps .ps-cols__row:hover {
  background: var(--px-grey-25, #fcfcfd);
}

[dir] .px-ps .ps-cols__row input:disabled {
  cursor: not-allowed;
}

.px-ps .ps-cols__row input:disabled + span {
  color: var(--text-muted);
}

.px-ps .ps-cols__row > span {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.px-ps .ps-chip {
  display: inline-block;
  color: var(--text-muted);
  font: var(--type-caption);
  white-space: nowrap;
}

[dir] .px-ps .ps-chip {
  padding: 1px var(--space-4);
  border-radius: 99px;
  background: var(--px-grey-50);
}

[dir=ltr] .px-ps .ps-chip {
  margin-left: var(--space-4);
}

[dir=rtl] .px-ps .ps-chip {
  margin-right: var(--space-4);
}

.px-ps .ps-chip--ok {
  color: var(--text-strong);
}

[dir] .px-ps .ps-chip--ok {
  background: var(--status-success-bg);
}

.px-ps .ps-chip--warn {
  color: var(--text-strong);
}

[dir] .px-ps .ps-chip--warn {
  background: var(--px-white);
  border: 1px solid var(--status-warning-border);
}

.px-ps .ps-check {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-3);
}

[dir] .px-ps .ps-check {
  cursor: pointer;
}

.px-ps .ps-num {
  font-variant-numeric: tabular-nums;
}

.px-ps .ps-drill__overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
}

[dir] .px-ps .ps-drill__overlay {
  background: var(--surface-overlay);
  padding: 2vh 2%;
}

.px-ps .ps-drill {
  /**
   * 🔴 RESETS THE INHERITED OVERLAY. A `.ps-drill` block further up this file — carried over
   * from `price-monitor-stats.scss`, where the drill IS a floating card — sets `position:
   * absolute`, `top`, `left`, `transform` and `z-index`. This block never reset them, so the
   * panel floated over the ranking cards instead of sitting in the document.
   *
   * ⚠️ The design is explicit (§9): *"Full-width in-document panel; THE PAGE scrolls, not
   *    the panel."* Overriding the properties rather than deleting the earlier block keeps
   *    the derivation from the sibling intact and makes the divergence deliberate and
   *    readable, which is the point of deriving it in the first place.
   */
  position: relative;
  top: auto;
  -webkit-transform: none;
  z-index: auto;
  width: 100%;
  max-width: 1320px;
  max-height: 96vh;
  /* owner's popup rule: at least 400px tall — or the viewport's 90% on a short screen */
  min-height: min(400px, 90vh);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: var(--shadow-modal);
  overflow: hidden;
}

[dir] .px-ps .ps-drill {
          -webkit-transform: none;
                  transform: none;
          -webkit-box-shadow: var(--shadow-modal);
                  box-shadow: var(--shadow-modal);
  margin-top: var(--space-10);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

[dir=ltr] .px-ps .ps-drill {
  left: auto;
}

[dir=rtl] .px-ps .ps-drill {
  right: auto;
}

.px-ps .ps-drill__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-7);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /* room for the X, which sits absolutely top-right so the wrapping figures cannot push it down (375px) */
}

[dir] .px-ps .ps-drill__head {
  padding: var(--space-7) var(--space-9);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--px-grey-25, #fcfcfd);
}

[dir=ltr] .px-ps .ps-drill__head {
  padding-right: calc(var(--space-9) + 36px);
}

[dir=rtl] .px-ps .ps-drill__head {
  padding-left: calc(var(--space-9) + 36px);
}

.px-ps .ps-drill__close {
  position: absolute;
  top: var(--space-6);
}

[dir=ltr] .px-ps .ps-drill__close {
  right: var(--space-6);
}

[dir=rtl] .px-ps .ps-drill__close {
  left: var(--space-6);
}

.px-ps .ps-drill__ident {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-6);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 220px;
          flex: 1 1 220px;
  min-width: 0;
}

.px-ps .ps-drill__bucket {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 8px;
  height: 34px;
}

[dir] .px-ps .ps-drill__bucket {
  border-radius: 99px;
}

.px-ps .ps-drill__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.px-ps .ps-drill__title {
  font: var(--type-card-title);
  color: var(--text-strong);
}

.px-ps .ps-drill__sub {
  font: var(--type-caption);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-ps .ps-drill__figs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-9);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.px-ps .ps-drill__fig {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1px;
}

.px-ps .ps-drill__fig__label {
  font: var(--type-caption);
  color: var(--text-body);
}

.px-ps .ps-drill__fig__value {
  font: var(--type-card-title);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.px-ps .ps-drill__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.px-ps .ps-drill__more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--space-6);
}

[dir] .px-ps .ps-drill__more {
  padding: var(--space-8);
}

[dir] .px-ps .ps-prod {
  border-bottom: 1px solid var(--px-grey-50);
}

[dir] .px-ps .ps-prod.is-open {
  background: var(--px-grey-25, #fcfcfd);
}

.px-ps .ps-prod__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-7);
}

[dir] .px-ps .ps-prod__row {
  padding: var(--space-7) var(--space-9);
}

.px-ps .ps-prod__pic {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  color: var(--text-faint);
}

[dir] .px-ps .ps-prod__pic {
  border-radius: var(--radius-md);
  background: var(--px-grey-50);
  border: 1px solid var(--border-subtle);
}

.px-ps .ps-prod__pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.px-ps .ps-prod__text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1px;
}

.px-ps .ps-prod__title {
  font: var(--type-body-md);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-ps .ps-prod__sub {
  font: var(--type-caption);
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-ps .ps-prod__metrics {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-8);
}

.px-ps .ps-prod__metric {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1px;
}

[dir=ltr] .px-ps .ps-prod__metric {
  text-align: right;
}

[dir=rtl] .px-ps .ps-prod__metric {
  text-align: left;
}

.px-ps .ps-prod__metric > span:first-child {
  font: var(--type-caption);
  color: var(--text-body);
}

.px-ps .ps-prod__metric > span:last-child {
  font: var(--type-body-md);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.px-ps .ps-prod__details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space-7);
}

[dir=ltr] .px-ps .ps-prod__details {
  padding: 0 var(--space-9) var(--space-8) 68px;
}

[dir=rtl] .px-ps .ps-prod__details {
  padding: 0 68px var(--space-8) var(--space-9);
}

.px-ps .ps-prod__chan {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--space-4);
  /* RUN-1399: a GRID — Channel · bar · Revenue · Orders · Ad spend · POAS — so the figures line up
     from row to row under a header row that names them (two bare "… RON" per row said nothing). */
}

.px-ps .ps-prod__chan__head {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.px-ps .ps-prod__chan__row {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(40px, 1fr) repeat(4, minmax(64px, auto));
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-6);
  font: var(--type-body-md);
}

.px-ps .ps-prod__chan__row.is-head {
  font: var(--type-caption);
  color: var(--text-muted);
}

.px-ps .ps-prod__chan__row.is-head .ps-num {
  color: var(--text-muted);
}

.px-ps .ps-prod__chan__name {
  min-width: 0;
  color: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-ps .ps-prod__chan__bar {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 60px;
          flex: 1 1 60px;
  height: 6px;
  overflow: hidden;
}

[dir] .px-ps .ps-prod__chan__bar {
  border-radius: 99px;
  background: var(--px-grey-50);
}

.px-ps .ps-prod__chan__bar > span {
  display: block;
  height: 100%;
}

[dir] .px-ps .ps-prod__chan__bar > span {
  border-radius: 99px;
}

.px-ps .ps-prod__chan .ps-num {
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

[dir=ltr] .px-ps .ps-prod__chan .ps-num {
  text-align: right;
}

[dir=rtl] .px-ps .ps-prod__chan .ps-num {
  text-align: left;
}

.px-ps .ps-prod__chan .ps-num.ps-hint {
  color: var(--text-body);
}

.px-ps .ps-prod__grid {
  display: grid;
  gap: var(--space-5) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

.px-ps .ps-prod__grid > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.px-ps .ps-prod__grid > span > span:first-child {
  font: var(--type-caption);
  color: var(--text-body);
}

.px-ps .ps-prod__grid > span > span:last-child {
  font: var(--type-body-md);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-ps .ps-prod__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-6);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.px-ps .ps-prod__link .ps-hint {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 200px;
          flex: 1 1 200px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
}

[dir] .px-ps .ps-table td.is-drillable {
  cursor: pointer;
}

[dir] .px-ps .ps-table td.is-hot {
  background: var(--px-grey-50);
}

.px-ps .ps-drillmark {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 22px;
  height: 22px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  color: var(--px-blue-600);
  -webkit-box-shadow: var(--shadow-hairline);
  vertical-align: middle;
}

[dir] .px-ps .ps-drillmark {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: #fff;
          -webkit-box-shadow: var(--shadow-hairline);
                  box-shadow: var(--shadow-hairline);
}

[dir=ltr] .px-ps .ps-drillmark {
  margin-right: var(--space-5);
}

[dir=rtl] .px-ps .ps-drillmark {
  margin-left: var(--space-5);
}

.px-ps .ps-iconbtn {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text-muted);
}

[dir] .px-ps .ps-iconbtn {
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
}

.px-ps .ps-iconbtn:hover {
  color: var(--text-strong);
}

[dir] .px-ps .ps-iconbtn:hover {
  background: var(--px-grey-50);
}

@media (max-width: 900px) {
  .px-ps {
    /* the strip is pushed right by `margin-left: auto` on wide screens; stacked, that would
       shove it off the edge */
  }

  .px-ps .ps-filters {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }

  .px-ps .ps-field {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    width: 100%;
  }

  .px-ps .ps-kpis {
    width: 100%;
  }

  [dir=ltr] .px-ps .ps-kpis {
    margin-left: 0;
  }

  [dir=rtl] .px-ps .ps-kpis {
    margin-right: 0;
  }
}

@media (max-width: 560px) {
  .px-ps {
    /* the fifth stat would sit alone in a half-width cell and read as an afterthought */
    /* §12: the tooltip clamps to the viewport width */
  }

  .px-ps .ps-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-8);
  }

  .px-ps .ps-kpis .ps-stat:last-child {
    grid-column: 1/-1;
  }

  .px-ps .ps-head {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  .px-ps .ps-head__actions {
    width: 100%;
  }

  .px-ps .ps-head__actions .ps-btn {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .px-ps .ps-tip {
    max-width: calc(100vw - 16px);
  }

  .px-ps .ps-cols {
    max-width: calc(100vw - 16px);
  }
}

@media (max-width: 575.98px) {
  .px-ps .ps-table td .ps-td__label {
    display: inline-block;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}

@media (max-width: 720px) {
  .px-ps {
    /* Product-row metrics become a 2-column grid rather than a squeezed single line. */
    /* RUN-1399: the channel rows need ~430px as six columns — four fit a phone */
  }

  .px-ps .ps-prod__row {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .px-ps .ps-prod__metrics {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-7);
  }

  [dir=ltr] .px-ps .ps-prod__metrics {
    padding-left: 50px;
  }

  [dir=rtl] .px-ps .ps-prod__metrics {
    padding-right: 50px;
  }

  [dir=ltr] .px-ps .ps-prod__metrics .ps-prod__metric {
    text-align: left;
  }

  [dir=rtl] .px-ps .ps-prod__metrics .ps-prod__metric {
    text-align: right;
  }

  [dir=ltr] .px-ps .ps-prod__details {
    padding-left: var(--space-9);
  }

  [dir=rtl] .px-ps .ps-prod__details {
    padding-right: var(--space-9);
  }

  .px-ps .ps-prod__chan__row {
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  }

  .px-ps .ps-prod__chan__bar,
  .px-ps .ps-prod__chan .is-bar,
  .px-ps .ps-prod__chan .is-orders {
    display: none;
  }

  .px-ps .ps-drill__figs {
    gap: var(--space-7);
  }

  .px-ps .ps-drill__fig {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 40%;
            flex: 1 1 40%;
  }
}

.px-ps .ps-totals__note {
  font: var(--type-caption);
  color: var(--text-muted);
  font-weight: 400;
}

var map = {
	"./af": "./node_modules/moment/locale/af.js",
	"./af.js": "./node_modules/moment/locale/af.js",
	"./ar": "./node_modules/moment/locale/ar.js",
	"./ar-dz": "./node_modules/moment/locale/ar-dz.js",
	"./ar-dz.js": "./node_modules/moment/locale/ar-dz.js",
	"./ar-kw": "./node_modules/moment/locale/ar-kw.js",
	"./ar-kw.js": "./node_modules/moment/locale/ar-kw.js",
	"./ar-ly": "./node_modules/moment/locale/ar-ly.js",
	"./ar-ly.js": "./node_modules/moment/locale/ar-ly.js",
	"./ar-ma": "./node_modules/moment/locale/ar-ma.js",
	"./ar-ma.js": "./node_modules/moment/locale/ar-ma.js",
	"./ar-sa": "./node_modules/moment/locale/ar-sa.js",
	"./ar-sa.js": "./node_modules/moment/locale/ar-sa.js",
	"./ar-tn": "./node_modules/moment/locale/ar-tn.js",
	"./ar-tn.js": "./node_modules/moment/locale/ar-tn.js",
	"./ar.js": "./node_modules/moment/locale/ar.js",
	"./az": "./node_modules/moment/locale/az.js",
	"./az.js": "./node_modules/moment/locale/az.js",
	"./be": "./node_modules/moment/locale/be.js",
	"./be.js": "./node_modules/moment/locale/be.js",
	"./bg": "./node_modules/moment/locale/bg.js",
	"./bg.js": "./node_modules/moment/locale/bg.js",
	"./bm": "./node_modules/moment/locale/bm.js",
	"./bm.js": "./node_modules/moment/locale/bm.js",
	"./bn": "./node_modules/moment/locale/bn.js",
	"./bn-bd": "./node_modules/moment/locale/bn-bd.js",
	"./bn-bd.js": "./node_modules/moment/locale/bn-bd.js",
	"./bn.js": "./node_modules/moment/locale/bn.js",
	"./bo": "./node_modules/moment/locale/bo.js",
	"./bo.js": "./node_modules/moment/locale/bo.js",
	"./br": "./node_modules/moment/locale/br.js",
	"./br.js": "./node_modules/moment/locale/br.js",
	"./bs": "./node_modules/moment/locale/bs.js",
	"./bs.js": "./node_modules/moment/locale/bs.js",
	"./ca": "./node_modules/moment/locale/ca.js",
	"./ca.js": "./node_modules/moment/locale/ca.js",
	"./cs": "./node_modules/moment/locale/cs.js",
	"./cs.js": "./node_modules/moment/locale/cs.js",
	"./cv": "./node_modules/moment/locale/cv.js",
	"./cv.js": "./node_modules/moment/locale/cv.js",
	"./cy": "./node_modules/moment/locale/cy.js",
	"./cy.js": "./node_modules/moment/locale/cy.js",
	"./da": "./node_modules/moment/locale/da.js",
	"./da.js": "./node_modules/moment/locale/da.js",
	"./de": "./node_modules/moment/locale/de.js",
	"./de-at": "./node_modules/moment/locale/de-at.js",
	"./de-at.js": "./node_modules/moment/locale/de-at.js",
	"./de-ch": "./node_modules/moment/locale/de-ch.js",
	"./de-ch.js": "./node_modules/moment/locale/de-ch.js",
	"./de.js": "./node_modules/moment/locale/de.js",
	"./dv": "./node_modules/moment/locale/dv.js",
	"./dv.js": "./node_modules/moment/locale/dv.js",
	"./el": "./node_modules/moment/locale/el.js",
	"./el.js": "./node_modules/moment/locale/el.js",
	"./en-au": "./node_modules/moment/locale/en-au.js",
	"./en-au.js": "./node_modules/moment/locale/en-au.js",
	"./en-ca": "./node_modules/moment/locale/en-ca.js",
	"./en-ca.js": "./node_modules/moment/locale/en-ca.js",
	"./en-gb": "./node_modules/moment/locale/en-gb.js",
	"./en-gb.js": "./node_modules/moment/locale/en-gb.js",
	"./en-ie": "./node_modules/moment/locale/en-ie.js",
	"./en-ie.js": "./node_modules/moment/locale/en-ie.js",
	"./en-il": "./node_modules/moment/locale/en-il.js",
	"./en-il.js": "./node_modules/moment/locale/en-il.js",
	"./en-in": "./node_modules/moment/locale/en-in.js",
	"./en-in.js": "./node_modules/moment/locale/en-in.js",
	"./en-nz": "./node_modules/moment/locale/en-nz.js",
	"./en-nz.js": "./node_modules/moment/locale/en-nz.js",
	"./en-sg": "./node_modules/moment/locale/en-sg.js",
	"./en-sg.js": "./node_modules/moment/locale/en-sg.js",
	"./eo": "./node_modules/moment/locale/eo.js",
	"./eo.js": "./node_modules/moment/locale/eo.js",
	"./es": "./node_modules/moment/locale/es.js",
	"./es-do": "./node_modules/moment/locale/es-do.js",
	"./es-do.js": "./node_modules/moment/locale/es-do.js",
	"./es-mx": "./node_modules/moment/locale/es-mx.js",
	"./es-mx.js": "./node_modules/moment/locale/es-mx.js",
	"./es-us": "./node_modules/moment/locale/es-us.js",
	"./es-us.js": "./node_modules/moment/locale/es-us.js",
	"./es.js": "./node_modules/moment/locale/es.js",
	"./et": "./node_modules/moment/locale/et.js",
	"./et.js": "./node_modules/moment/locale/et.js",
	"./eu": "./node_modules/moment/locale/eu.js",
	"./eu.js": "./node_modules/moment/locale/eu.js",
	"./fa": "./node_modules/moment/locale/fa.js",
	"./fa.js": "./node_modules/moment/locale/fa.js",
	"./fi": "./node_modules/moment/locale/fi.js",
	"./fi.js": "./node_modules/moment/locale/fi.js",
	"./fil": "./node_modules/moment/locale/fil.js",
	"./fil.js": "./node_modules/moment/locale/fil.js",
	"./fo": "./node_modules/moment/locale/fo.js",
	"./fo.js": "./node_modules/moment/locale/fo.js",
	"./fr": "./node_modules/moment/locale/fr.js",
	"./fr-ca": "./node_modules/moment/locale/fr-ca.js",
	"./fr-ca.js": "./node_modules/moment/locale/fr-ca.js",
	"./fr-ch": "./node_modules/moment/locale/fr-ch.js",
	"./fr-ch.js": "./node_modules/moment/locale/fr-ch.js",
	"./fr.js": "./node_modules/moment/locale/fr.js",
	"./fy": "./node_modules/moment/locale/fy.js",
	"./fy.js": "./node_modules/moment/locale/fy.js",
	"./ga": "./node_modules/moment/locale/ga.js",
	"./ga.js": "./node_modules/moment/locale/ga.js",
	"./gd": "./node_modules/moment/locale/gd.js",
	"./gd.js": "./node_modules/moment/locale/gd.js",
	"./gl": "./node_modules/moment/locale/gl.js",
	"./gl.js": "./node_modules/moment/locale/gl.js",
	"./gom-deva": "./node_modules/moment/locale/gom-deva.js",
	"./gom-deva.js": "./node_modules/moment/locale/gom-deva.js",
	"./gom-latn": "./node_modules/moment/locale/gom-latn.js",
	"./gom-latn.js": "./node_modules/moment/locale/gom-latn.js",
	"./gu": "./node_modules/moment/locale/gu.js",
	"./gu.js": "./node_modules/moment/locale/gu.js",
	"./he": "./node_modules/moment/locale/he.js",
	"./he.js": "./node_modules/moment/locale/he.js",
	"./hi": "./node_modules/moment/locale/hi.js",
	"./hi.js": "./node_modules/moment/locale/hi.js",
	"./hr": "./node_modules/moment/locale/hr.js",
	"./hr.js": "./node_modules/moment/locale/hr.js",
	"./hu": "./node_modules/moment/locale/hu.js",
	"./hu.js": "./node_modules/moment/locale/hu.js",
	"./hy-am": "./node_modules/moment/locale/hy-am.js",
	"./hy-am.js": "./node_modules/moment/locale/hy-am.js",
	"./id": "./node_modules/moment/locale/id.js",
	"./id.js": "./node_modules/moment/locale/id.js",
	"./is": "./node_modules/moment/locale/is.js",
	"./is.js": "./node_modules/moment/locale/is.js",
	"./it": "./node_modules/moment/locale/it.js",
	"./it-ch": "./node_modules/moment/locale/it-ch.js",
	"./it-ch.js": "./node_modules/moment/locale/it-ch.js",
	"./it.js": "./node_modules/moment/locale/it.js",
	"./ja": "./node_modules/moment/locale/ja.js",
	"./ja.js": "./node_modules/moment/locale/ja.js",
	"./jv": "./node_modules/moment/locale/jv.js",
	"./jv.js": "./node_modules/moment/locale/jv.js",
	"./ka": "./node_modules/moment/locale/ka.js",
	"./ka.js": "./node_modules/moment/locale/ka.js",
	"./kk": "./node_modules/moment/locale/kk.js",
	"./kk.js": "./node_modules/moment/locale/kk.js",
	"./km": "./node_modules/moment/locale/km.js",
	"./km.js": "./node_modules/moment/locale/km.js",
	"./kn": "./node_modules/moment/locale/kn.js",
	"./kn.js": "./node_modules/moment/locale/kn.js",
	"./ko": "./node_modules/moment/locale/ko.js",
	"./ko.js": "./node_modules/moment/locale/ko.js",
	"./ku": "./node_modules/moment/locale/ku.js",
	"./ku.js": "./node_modules/moment/locale/ku.js",
	"./ky": "./node_modules/moment/locale/ky.js",
	"./ky.js": "./node_modules/moment/locale/ky.js",
	"./lb": "./node_modules/moment/locale/lb.js",
	"./lb.js": "./node_modules/moment/locale/lb.js",
	"./lo": "./node_modules/moment/locale/lo.js",
	"./lo.js": "./node_modules/moment/locale/lo.js",
	"./lt": "./node_modules/moment/locale/lt.js",
	"./lt.js": "./node_modules/moment/locale/lt.js",
	"./lv": "./node_modules/moment/locale/lv.js",
	"./lv.js": "./node_modules/moment/locale/lv.js",
	"./me": "./node_modules/moment/locale/me.js",
	"./me.js": "./node_modules/moment/locale/me.js",
	"./mi": "./node_modules/moment/locale/mi.js",
	"./mi.js": "./node_modules/moment/locale/mi.js",
	"./mk": "./node_modules/moment/locale/mk.js",
	"./mk.js": "./node_modules/moment/locale/mk.js",
	"./ml": "./node_modules/moment/locale/ml.js",
	"./ml.js": "./node_modules/moment/locale/ml.js",
	"./mn": "./node_modules/moment/locale/mn.js",
	"./mn.js": "./node_modules/moment/locale/mn.js",
	"./mr": "./node_modules/moment/locale/mr.js",
	"./mr.js": "./node_modules/moment/locale/mr.js",
	"./ms": "./node_modules/moment/locale/ms.js",
	"./ms-my": "./node_modules/moment/locale/ms-my.js",
	"./ms-my.js": "./node_modules/moment/locale/ms-my.js",
	"./ms.js": "./node_modules/moment/locale/ms.js",
	"./mt": "./node_modules/moment/locale/mt.js",
	"./mt.js": "./node_modules/moment/locale/mt.js",
	"./my": "./node_modules/moment/locale/my.js",
	"./my.js": "./node_modules/moment/locale/my.js",
	"./nb": "./node_modules/moment/locale/nb.js",
	"./nb.js": "./node_modules/moment/locale/nb.js",
	"./ne": "./node_modules/moment/locale/ne.js",
	"./ne.js": "./node_modules/moment/locale/ne.js",
	"./nl": "./node_modules/moment/locale/nl.js",
	"./nl-be": "./node_modules/moment/locale/nl-be.js",
	"./nl-be.js": "./node_modules/moment/locale/nl-be.js",
	"./nl.js": "./node_modules/moment/locale/nl.js",
	"./nn": "./node_modules/moment/locale/nn.js",
	"./nn.js": "./node_modules/moment/locale/nn.js",
	"./oc-lnc": "./node_modules/moment/locale/oc-lnc.js",
	"./oc-lnc.js": "./node_modules/moment/locale/oc-lnc.js",
	"./pa-in": "./node_modules/moment/locale/pa-in.js",
	"./pa-in.js": "./node_modules/moment/locale/pa-in.js",
	"./pl": "./node_modules/moment/locale/pl.js",
	"./pl.js": "./node_modules/moment/locale/pl.js",
	"./pt": "./node_modules/moment/locale/pt.js",
	"./pt-br": "./node_modules/moment/locale/pt-br.js",
	"./pt-br.js": "./node_modules/moment/locale/pt-br.js",
	"./pt.js": "./node_modules/moment/locale/pt.js",
	"./ro": "./node_modules/moment/locale/ro.js",
	"./ro.js": "./node_modules/moment/locale/ro.js",
	"./ru": "./node_modules/moment/locale/ru.js",
	"./ru.js": "./node_modules/moment/locale/ru.js",
	"./sd": "./node_modules/moment/locale/sd.js",
	"./sd.js": "./node_modules/moment/locale/sd.js",
	"./se": "./node_modules/moment/locale/se.js",
	"./se.js": "./node_modules/moment/locale/se.js",
	"./si": "./node_modules/moment/locale/si.js",
	"./si.js": "./node_modules/moment/locale/si.js",
	"./sk": "./node_modules/moment/locale/sk.js",
	"./sk.js": "./node_modules/moment/locale/sk.js",
	"./sl": "./node_modules/moment/locale/sl.js",
	"./sl.js": "./node_modules/moment/locale/sl.js",
	"./sq": "./node_modules/moment/locale/sq.js",
	"./sq.js": "./node_modules/moment/locale/sq.js",
	"./sr": "./node_modules/moment/locale/sr.js",
	"./sr-cyrl": "./node_modules/moment/locale/sr-cyrl.js",
	"./sr-cyrl.js": "./node_modules/moment/locale/sr-cyrl.js",
	"./sr.js": "./node_modules/moment/locale/sr.js",
	"./ss": "./node_modules/moment/locale/ss.js",
	"./ss.js": "./node_modules/moment/locale/ss.js",
	"./sv": "./node_modules/moment/locale/sv.js",
	"./sv.js": "./node_modules/moment/locale/sv.js",
	"./sw": "./node_modules/moment/locale/sw.js",
	"./sw.js": "./node_modules/moment/locale/sw.js",
	"./ta": "./node_modules/moment/locale/ta.js",
	"./ta.js": "./node_modules/moment/locale/ta.js",
	"./te": "./node_modules/moment/locale/te.js",
	"./te.js": "./node_modules/moment/locale/te.js",
	"./tet": "./node_modules/moment/locale/tet.js",
	"./tet.js": "./node_modules/moment/locale/tet.js",
	"./tg": "./node_modules/moment/locale/tg.js",
	"./tg.js": "./node_modules/moment/locale/tg.js",
	"./th": "./node_modules/moment/locale/th.js",
	"./th.js": "./node_modules/moment/locale/th.js",
	"./tk": "./node_modules/moment/locale/tk.js",
	"./tk.js": "./node_modules/moment/locale/tk.js",
	"./tl-ph": "./node_modules/moment/locale/tl-ph.js",
	"./tl-ph.js": "./node_modules/moment/locale/tl-ph.js",
	"./tlh": "./node_modules/moment/locale/tlh.js",
	"./tlh.js": "./node_modules/moment/locale/tlh.js",
	"./tr": "./node_modules/moment/locale/tr.js",
	"./tr.js": "./node_modules/moment/locale/tr.js",
	"./tzl": "./node_modules/moment/locale/tzl.js",
	"./tzl.js": "./node_modules/moment/locale/tzl.js",
	"./tzm": "./node_modules/moment/locale/tzm.js",
	"./tzm-latn": "./node_modules/moment/locale/tzm-latn.js",
	"./tzm-latn.js": "./node_modules/moment/locale/tzm-latn.js",
	"./tzm.js": "./node_modules/moment/locale/tzm.js",
	"./ug-cn": "./node_modules/moment/locale/ug-cn.js",
	"./ug-cn.js": "./node_modules/moment/locale/ug-cn.js",
	"./uk": "./node_modules/moment/locale/uk.js",
	"./uk.js": "./node_modules/moment/locale/uk.js",
	"./ur": "./node_modules/moment/locale/ur.js",
	"./ur.js": "./node_modules/moment/locale/ur.js",
	"./uz": "./node_modules/moment/locale/uz.js",
	"./uz-latn": "./node_modules/moment/locale/uz-latn.js",
	"./uz-latn.js": "./node_modules/moment/locale/uz-latn.js",
	"./uz.js": "./node_modules/moment/locale/uz.js",
	"./vi": "./node_modules/moment/locale/vi.js",
	"./vi.js": "./node_modules/moment/locale/vi.js",
	"./x-pseudo": "./node_modules/moment/locale/x-pseudo.js",
	"./x-pseudo.js": "./node_modules/moment/locale/x-pseudo.js",
	"./yo": "./node_modules/moment/locale/yo.js",
	"./yo.js": "./node_modules/moment/locale/yo.js",
	"./zh-cn": "./node_modules/moment/locale/zh-cn.js",
	"./zh-cn.js": "./node_modules/moment/locale/zh-cn.js",
	"./zh-hk": "./node_modules/moment/locale/zh-hk.js",
	"./zh-hk.js": "./node_modules/moment/locale/zh-hk.js",
	"./zh-mo": "./node_modules/moment/locale/zh-mo.js",
	"./zh-mo.js": "./node_modules/moment/locale/zh-mo.js",
	"./zh-tw": "./node_modules/moment/locale/zh-tw.js",
	"./zh-tw.js": "./node_modules/moment/locale/zh-tw.js"
};


function webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}
function webpackContextResolve(req) {
	if(!__webpack_require__.o(map, req)) {
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return map[req];
}
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./node_modules/moment/locale sync recursive ^\\.\\/.*$";