/*
 * Primer 2026 design tokens for code components.
 *
 * Code components render inside a shadow root. CSS custom properties inherit
 * through it, so each token reads the matching Webflow variable from the
 * "Primer 2026" collection and falls back to the same literal value. That way
 * a component looks right both on the Webflow page and in the local playground.
 *
 * Fluid type and spacing are literal clamp() values: the Webflow API rejected
 * clamp() for size variables, so the p26-* classes in Webflow use these same
 * values directly. Keep both in sync.
 */
:host,
.p26-root {
  /* Color: aliases of existing brand variables */
  --p26-text-strong: var(--_primer-2026---color--text--strong, #20292c);
  --p26-text-default: var(--_primer-2026---color--text--default, #475a61);
  --p26-text-inverse: var(--_primer-2026---color--text--inverse, #ffffff);
  --p26-surface-base: var(--_primer-2026---color--surface--base, #ffffff);
  --p26-surface-subtle: var(--_primer-2026---color--surface--subtle, #f3f5f6);
  --p26-surface-hover: var(--_primer-2026---color--surface--hover, #f7f9fa);
  --p26-surface-inverse: var(--_primer-2026---color--surface--inverse, #262155);
  --p26-border: var(--_primer-2026---color--border--default, rgba(138, 159, 169, 0.32));
  --p26-accent: var(--_primer-2026---color--accent--primary, #6e37ff);
  --p26-accent-strong: var(--_primer-2026---color--accent--strong, #3c327b);
  --p26-accent-soft: var(--_primer-2026---color--accent--soft, #a8a6ff);
  --p26-accent-blue: var(--_primer-2026---color--accent--blue, #3366ff);
  --p26-highlight: var(--_primer-2026---color--highlight, #ffd966);
  --p26-focus: var(--_primer-2026---color--focus-ring, #0b89fd);

  /* Type */
  --p26-font-display: var(--_primer-2026---font--display, EightiesComeback), Georgia, serif;
  --p26-font-body: var(--_primer-2026---font--body, Rubik), Arial, sans-serif;
  --p26-type-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --p26-type-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --p26-type-body: var(--_primer-2026---type--body, 1rem);
  --p26-type-small: var(--_primer-2026---type--small, 0.875rem);

  /* Space and shape */
  --p26-space-2xs: var(--_primer-2026---space--2xs, 0.25rem);
  --p26-space-xs: var(--_primer-2026---space--xs, 0.5rem);
  --p26-space-sm: var(--_primer-2026---space--sm, 1rem);
  --p26-space-md: var(--_primer-2026---space--md, 1.5rem);
  --p26-space-lg: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --p26-radius-sm: var(--_primer-2026---radius--sm, 8px);
  --p26-radius-md: var(--_primer-2026---radius--md, 12px);
  --p26-radius-lg: var(--_primer-2026---radius--lg, 20px);

  /* Motion */
  --p26-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --p26-duration-fast: 160ms;
  --p26-duration-base: 320ms;
}

/*
 * Primer app UI for homepage demos. Values from the Figma app frames:
 * Rubik 14/20 body (1em here), UI/900 #20292C, UI/700 #475A61, UI/300 #8A9FA9,
 * borders rgba(138,159,169,.32), panel heads #FAFAFA, Blue/50 #F5F7FF,
 * Blue/300 #99B2FF, Blue/800 #3366FF, Blue/850 #2F55CD, Green/500 #1C8C67.
 * Everything is in em so the whole UI scales with the demo's base size.
 */
.p26-demo {
  --ui-900: #20292c;
  --ui-700: #475a61;
  --ui-300: #8a9fa9;
  --ui-line: rgba(138, 159, 169, 0.32);
  --ui-line-soft: rgba(138, 159, 169, 0.19);
  --ui-head: #fafafa;
  --ui-50: #f3f5f6;
  --blue-50: #f5f7ff;
  --blue-100: #ebefff;
  --blue-200: #d6e4ff;
  --blue-300: #99b2ff;
  --blue-800: #3366ff;
  --blue-850: #2f55cd;
  --green-100: #dcfaeb;
  --green-500: #1c8c67;
  --green-600: #219b78;
  --violet: #7a63e0;
  --orange: #ffaa45;
  --red-100: #fde8e8;
  --red-600: #c9372c;
  --ui-shadow: 0 1px 2px rgba(32, 41, 44, 0.06), 0 12px 32px -12px rgba(38, 33, 85, 0.22);

  container-type: inline-size;
  position: relative;
  width: 100%;
  font-family: var(--p26-font-body, Rubik), Arial, sans-serif;
  color: var(--ui-900);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* The stage crops its panels like a window into the product. */
.p26-demo__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  font-size: clamp(10px, 2.25cqw, 13px);
  line-height: 1.43;
}

.p26-demo__layer {
  position: absolute;
  will-change: transform, opacity;
}

.p26-demo p {
  margin: 0;
}

/* Panels (collapsible sections in the app) */
.ui-panel {
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
  background: #fff;
  box-shadow: var(--ui-shadow);
}

.ui-panel__head {
  display: flex;
  align-items: center;
  gap: 0.571em;
  height: 2.571em;
  padding: 0 0.571em 0 1.143em;
  border-bottom: 1px solid var(--ui-line);
  background: var(--ui-head);
  font-weight: 500;
}

.ui-panel__caret {
  color: var(--ui-700);
  font-size: 0.857em;
}

.ui-panel__body {
  padding: 1em 1.143em;
}

/* Chat */
.ui-chat {
  display: flex;
  flex-direction: column;
  gap: 0.857em;
  padding: 1em;
  border: 1px solid var(--ui-line);
  border-radius: 0.857em;
  background: var(--ui-head);
  box-shadow: var(--ui-shadow);
}

.ui-user {
  align-self: flex-end;
  max-width: 88%;
  padding: 0.857em;
  border-radius: 0.571em;
  background: var(--ui-line-soft);
  text-align: right;
}

.ui-assistant {
  padding-right: 2.286em;
}

.ui-steps {
  display: flex;
  flex-direction: column;
  gap: 0.286em;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ui-300);
}

.ui-step {
  display: flex;
  align-items: center;
  gap: 0.286em;
}

.ui-artifact {
  display: flex;
  align-items: center;
  gap: 0.571em;
  padding: 0.857em 1.143em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
  background: #fff;
}

.ui-artifact.is-highlighted {
  border-color: var(--blue-300);
  background: var(--blue-50);
}

.ui-artifact__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.429em;
  height: 3.429em;
  border-radius: 0.571em;
  background: var(--blue-100);
  color: var(--blue-850);
  font-size: 1em;
}

.ui-artifact__icon svg {
  font-size: 1.43em;
}

.ui-artifact__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ui-artifact__text strong {
  font-size: 1.143em;
  font-weight: 500;
}

.ui-artifact__text span {
  color: var(--ui-300);
}

.ui-button {
  flex: none;
  padding: 0.143em 1.143em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
  background: #fff;
  box-shadow: inset 0 -1px 2px rgba(32, 41, 44, 0.24);
  color: var(--ui-700);
}

/* Tags, badges, labels */
.ui-tag {
  display: inline-flex;
  padding: 0.286em;
  border: 1px solid var(--ui-line);
  border-radius: 0.286em;
  background: var(--ui-50);
  white-space: nowrap;
}

.ui-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.143em;
}

.ui-badge {
  display: inline-flex;
  padding: 0.143em 0.357em;
  border: 1px solid rgba(28, 140, 103, 0.3);
  border-radius: 0.286em;
  background: var(--green-100);
  color: var(--green-500);
  font-size: 0.857em;
  line-height: 1.33;
  white-space: nowrap;
}

.ui-label {
  display: flex;
  align-items: center;
  gap: 0.286em;
  font-size: 0.857em;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.33;
  text-transform: uppercase;
}

.ui-label svg {
  color: var(--ui-300);
  font-size: 1.33em;
}

/* Channel logos keep the Figma SVG proportions inside a 1.43em box. */
.ui-logo {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.43em;
  height: 1.43em;
}

.ui-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Destinations */
.ui-dests {
  display: flex;
  flex-direction: column;
  gap: 0.286em;
}

.ui-dest {
  display: flex;
  align-items: center;
  gap: 0.571em;
  padding: 0.429em 0.571em;
  border: 1px solid var(--ui-line-soft);
  border-radius: 0.286em;
  color: var(--ui-700);
}

.ui-dest.is-checked {
  border-color: var(--blue-300);
  background: var(--blue-50);
}

.ui-dest__name {
  flex: 1;
}

.ui-dest__tag {
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: #efedff;
  color: #5a3da9;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.5;
}

.ui-dest__box {
  position: relative;
  display: grid;
  width: 1.143em;
  height: 1.143em;
  font-size: 1.143em;
}

.ui-dest__box svg {
  grid-area: 1 / 1;
}

.ui-dest__on {
  color: var(--blue-800);
  opacity: 0;
}

.ui-dest.is-checked .ui-dest__on {
  opacity: 1;
}

.ui-dest.is-checked .ui-dest__off {
  opacity: 0;
}

/* Filter criteria */
.ui-criteria {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-criteria li {
  line-height: 1.43;
}

.ui-criteria b {
  font-weight: 500;
}

.ui-criteria .op {
  color: var(--ui-300);
}

.ui-criteria i {
  font-style: italic;
}

.ui-criteria .join {
  color: var(--ui-300);
  font-weight: 500;
}

.ui-criteria .nested {
  padding-left: 2.6em;
}

/* Distribution bars */
.ui-bars {
  display: flex;
  flex-direction: column;
  gap: 0.143em;
  padding: 0.286em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
}

.ui-bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 4em 2.6em 0.5em;
  align-items: center;
  gap: 0.286em;
  height: 2.286em;
  padding: 0 0.143em 0 0.43em;
  color: var(--ui-700);
}

.ui-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 0.286em 0 0 0.286em;
  background: rgba(51, 102, 255, 0.1);
  transform-origin: left center;
}

.ui-bar > span:not(.ui-bar__fill) {
  position: relative;
}

.ui-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-bar__share,
.ui-bar__rate {
  text-align: right;
}

.ui-conf {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.143em;
}

.ui-conf i {
  width: 0.214em;
  height: 0.214em;
  background: var(--ui-line);
}

.ui-conf.is-high i { background: #25ae80; }
.ui-conf.is-medium i:nth-child(-n + 2) { background: #4da6ff; }
.ui-conf.is-low i:first-child { background: var(--orange); }

/* Metrics */
.ui-metric {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.571em;
  min-width: 0;
  padding: 0.857em 1.143em;
  border: 1px solid var(--ui-line);
  border-radius: 0.571em;
  background: #fff;
  white-space: nowrap;
}

.ui-metric strong {
  display: block;
  font-size: 1.286em;
  font-weight: 500;
  line-height: 1.33;
}

.ui-metric__detail {
  display: flex;
  flex-direction: column;
  gap: 0.43em;
  padding: 0.2em 0;
  color: var(--ui-300);
  font-size: 0.714em;
  line-height: 1.2;
}

.ui-metric__detail b {
  color: var(--ui-900);
  font-size: 1.2em;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .p26-demo__layer {
    will-change: auto;
  }
}

/* Screen-reader-only text (descriptions). Each code component renders in its
   own shadow root, so this must live in every component's stylesheet. */
.p26-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Section 5 reports — Primer app UI at Figma sizes (Report / components,
 * 2020:107618). Real px type so text never shrinks; the layout adapts to the
 * viewer width instead (container queries on .p26-report-wrap):
 *   ≥ 720px  as designed: evidence beside the recommendation
 *   < 720px  rows stack; tables keep their columns
 *   < 520px  phone: tighter padding, tables become stacked rows
 */
:host {
  display: block;
}

.p26-report-wrap {
  container-type: inline-size;
  --r-900: #20292c;
  --r-700: #475a61;
  --r-300: #8a9fa9;
  --r-line: rgba(138, 159, 169, 0.32);
  --r-line-soft: rgba(138, 159, 169, 0.19);
  --r-head: #fafafa;
  --r-subtle: #f3f5f6;
  --r-blue-50: #f5f7ff;
  --r-blue-100: #ebefff;
  --r-blue-200: #d6e4ff;
  --r-blue-300: #99b2ff;
  --r-blue: #3366ff;
  --r-blue-850: #2f55cd;
  --r-green: #1c8c67;
  --r-green-100: #dcfaeb;
  --r-bar: #d5dde1;
  color: var(--r-900);
  font-family: Rubik, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

.p26-report-wrap *,
.p26-report-wrap *::before,
.p26-report-wrap *::after {
  box-sizing: border-box;
}

.p26-report-wrap :where(p, h4, h5, ul, ol, dl, dd, figure) {
  margin: 0;
}

.p26-report-wrap :where(ul, ol) {
  padding: 0;
  list-style: none;
}

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

.blue { color: var(--r-blue-850); }
.green { color: var(--r-green); }
.strong { font-weight: 500; }
.muted { color: var(--r-300); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- frame ---------- */
.rpt {
  overflow: hidden;
  border: 1px solid var(--r-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px -12px rgba(38, 33, 85, 0.16), 0 1px 2px rgba(32, 41, 44, 0.06);
}

.rpt-prompt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 24px 10px 40px;
  border-bottom: 1px solid var(--r-line);
  background: var(--r-head);
}

.rpt-prompt__question {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--r-line-soft);
  color: var(--r-900);
  font-size: 15px;
  line-height: 22px;
}

.rpt-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 40px;
}

.rpt-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  color: var(--r-700);
}

.rpt-context li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rpt-context__icon {
  flex: none;
  font-size: 13px;
}

.rpt-context__logos {
  display: inline-flex;
  gap: 4px;
}

.rpt-context__logos .ui-logo,
.rpt-table__platform .ui-logo {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.rpt-context__logos .ui-logo img,
.rpt-table__platform .ui-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.rpt-finding {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rpt-eyebrow {
  color: var(--r-blue-850);
  font-size: 13px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.78px;
  text-transform: uppercase;
}

.rpt-headline {
  color: var(--r-900);
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.48px;
  text-wrap: pretty;
}

.rpt-summary {
  color: var(--r-700);
  font-size: 17px;
  line-height: 26px;
}

.rpt-card {
  min-width: 0;
  border: 1px solid var(--r-line);
  border-radius: 12px;
  background: #fff;
  padding: 16px 20px;
}

.rpt-card--table {
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
}

.rpt-card__title {
  color: var(--r-900);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.rpt-row {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

.rpt-row--372 { grid-template-columns: minmax(0, 372fr) minmax(0, 452fr); }
.rpt-row--400 { grid-template-columns: minmax(0, 400fr) minmax(0, 424fr); }
.rpt-row--500 { grid-template-columns: minmax(0, 500fr) minmax(240px, 324fr); }
.rpt-row--proposal { grid-template-columns: minmax(0, 1fr) minmax(0, 372px); }

.rpt-note {
  color: var(--r-700);
  font-size: 13px;
  line-height: 19px;
}

.rpt-note strong {
  color: var(--r-900);
  font-weight: 500;
}

.rpt-note .blue { color: var(--r-blue-850); }

.rpt-fine {
  color: var(--r-300);
  font-size: 12px;
  line-height: 16px;
}

.rpt-tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

.rpt-tag--blue { border-color: var(--r-blue-200); background: var(--r-blue-100); color: var(--r-blue); }
.rpt-tag--neutral { border-color: rgba(138, 159, 169, 0.3); background: var(--r-subtle); color: var(--r-700); }
.rpt-tag--won { border-color: rgba(28, 140, 103, 0.3); background: var(--r-green-100); color: var(--r-green); }
.rpt-tag--open { border-color: rgba(214, 228, 255, 0.3); background: var(--r-blue-100); color: var(--r-blue-850); }

/* Recommendation */
.rpt-rec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px 22px;
  border: 1px solid var(--r-blue-200);
  border-radius: 12px;
  background: var(--r-blue-50);
}

.rpt-rec__label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--r-blue-850);
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0.78px;
  text-transform: uppercase;
}

.rpt-rec__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--r-blue-100);
  color: var(--r-700);
  font-size: 16px;
}

.rpt-rec__text {
  color: var(--r-900);
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
}

.rpt-rec__rationale {
  color: var(--r-700);
}

.rpt-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.rpt-signals li,
.rpt-criteria-list li {
  position: relative;
  padding-left: 13px;
  font-weight: 500;
}

.rpt-signals li::before,
.rpt-criteria-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r-blue);
}

.rpt-limits {
  padding-top: 12px;
  border-top: 1px solid var(--r-line);
  color: var(--r-700);
  font-size: 13px;
  line-height: 19px;
}

.rpt-limits strong {
  color: var(--r-900);
  font-weight: 500;
}

/* ---------- tables (report 1, 3) ---------- */
.rpt-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.rpt-table th,
.rpt-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--r-line);
  color: var(--r-700);
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  vertical-align: middle;
}

.rpt-table thead th {
  background: var(--r-head);
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
}

.rpt-table thead th.num,
.rpt-table td.num { text-align: right; }

.rpt-table tbody tr:last-child > * { border-bottom: 0; }

.rpt-table tbody th.rpt-table__name {
  color: var(--r-900);
  font-weight: 500;
}

.rpt-table__name {
  display: table-cell;
}

.rpt-table__name > span:first-child {
  display: block;
}

.rpt-table__name .rpt-tag { margin-top: 4px; }

.rpt-table td.strong { color: var(--r-900); font-weight: 500; }
.rpt-table td.blue { color: var(--r-blue-850); }
.rpt-table td.green { color: var(--r-green); }

.rpt-table__platform {
  white-space: nowrap;
}

.rpt-table__platform .ui-logo {
  margin-right: 8px;
  vertical-align: -3px;
}

.rpt-table tbody tr.is-highlight > * {
  background: var(--r-blue-50);
}

.rpt-table tbody tr.is-highlight > :first-child {
  box-shadow: inset 3px 0 0 var(--r-blue);
}

.rpt-table--campaigns tbody tr { height: 54px; }
.rpt-table--campaigns tbody tr.is-highlight { height: 60px; }
.rpt-table--campaigns thead th:nth-child(1) { width: 28%; }
.rpt-table--campaigns thead th:nth-child(2) { width: 17%; }
.rpt-table--campaigns thead th:nth-child(3) { width: 12%; }
.rpt-table--campaigns thead th:nth-child(4),
.rpt-table--campaigns thead th:nth-child(5),
.rpt-table--campaigns thead th:nth-child(6) { width: 14.33%; }

.rpt-table--accounts th,
.rpt-table--accounts td {
  padding: 8px 10px;
  font-size: 14px;
  line-height: 20px;
}

.rpt-table--accounts thead th { font-size: 12px; line-height: 16px; }
.rpt-table--accounts tbody tr { height: 48px; }
.rpt-table--accounts thead th:nth-child(1) { width: 29%; }
.rpt-table--accounts thead th:nth-child(2) { width: 12%; }
.rpt-table--accounts thead th:nth-child(3) { width: 11%; }
.rpt-table--accounts thead th:nth-child(4) { width: 28%; }
.rpt-table--accounts thead th:nth-child(5) { width: 20%; }
.rpt-table--accounts td:last-child { white-space: nowrap; }

.rpt-table__sub {
  display: block;
  color: var(--r-blue);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

/* ---------- report 1 chart ---------- */
.rpt-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rpt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--r-700);
  font-size: 12px;
  line-height: 16px;
}

.rpt-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rpt-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.sw-spend { background: var(--r-bar); }
.sw-conv { background: var(--r-blue); }
.sw-conv-soft { background: var(--r-blue-300); }

.rpt-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rpt-bars__group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rpt-bars__group dt {
  flex: none;
  width: 150px;
  color: var(--r-700);
  font-size: 13px;
  line-height: 17px;
}

.rpt-bars__group.is-highlight dt {
  color: var(--r-900);
  font-weight: 500;
}

.rpt-bars__group dd {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rpt-bars__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--r-700);
  font-size: 12px;
  line-height: 12px;
}

.rpt-bars__bar i {
  flex: none;
  max-width: calc(100% - 34px);
  height: 8px;
  border-radius: 2px;
  transform-origin: left center;
}

/* ---------- report 2 ---------- */
.rpt-split {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 24px;
}

.rpt-stat {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.rpt-stat__label {
  color: var(--r-700);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.rpt-stat--blue .rpt-stat__label { color: var(--r-blue-850); }

.rpt-stat__value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rpt-stat__value b {
  color: var(--r-900);
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
}

.rpt-stat--blue .rpt-stat__value b { color: var(--r-blue); }

.rpt-stat__value span {
  color: var(--r-700);
  font-size: 15px;
  line-height: 20px;
}

.rpt-stat__note {
  color: var(--r-700);
  font-size: 13px;
  line-height: 18px;
}

.rpt-split__divider {
  flex: none;
  align-self: center;
  width: 1px;
  height: 88px;
  background: var(--r-line);
}

.rpt-grid-chart {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.rpt-grid-chart figcaption {
  color: var(--r-700);
  font-size: 12px;
  line-height: 16px;
}

.rpt-squares {
  display: grid;
  grid-template-columns: repeat(16, minmax(8px, 14px));
  gap: 4px;
}

.rpt-squares i {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--r-bar);
}

.rpt-squares i.is-outside { background: var(--r-blue); }

.rpt-dist__heads {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px;
  gap: 4px;
  padding: 0 13px 0 12px;
  color: var(--r-700);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.rpt-dist__heads span:not(:first-child) { text-align: right; }

.rpt-dist__box {
  padding: 4px;
  border: 1px solid var(--r-line);
  border-radius: 8px;
}

.rpt-dist {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
  margin: -2px 0;
  table-layout: fixed;
}

.rpt-dist tbody tr { height: 32px; }

.rpt-dist tbody th,
.rpt-dist tbody td {
  position: relative;
  padding: 0 8px;
  color: var(--r-700);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

.rpt-dist__col { width: 76px; }
.rpt-dist tbody td.num { text-align: right; }
.rpt-dist tbody td.muted { color: var(--r-300); }

/* Outside-share bar behind the row, from the left edge (Figma: 161px = 46%). */
.rpt-dist tbody th { isolation: isolate; }

.rpt-dist tbody th::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: calc(var(--share) * 350px);
  border-radius: 4px;
  background: rgba(51, 102, 255, 0.1);
  transform-origin: left center;
}

.rpt-dist tbody tr.is-highlight th { color: var(--r-900); font-weight: 500; }
.rpt-dist tbody tr.is-highlight th::before { background: rgba(51, 102, 255, 0.2); }
.rpt-dist tbody tr.is-highlight td:not(.muted) { color: var(--r-blue-850); font-weight: 500; }

.rpt--2 .rpt-row--400 > .rpt-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- report 3 ---------- */
.rpt-journey {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 24px 20px;
}

.rpt-journey__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rpt-unit {
  padding: 2px 8px;
  border: 1px solid var(--r-line);
  border-radius: 4px;
  background: var(--r-subtle);
  color: var(--r-700);
  font-size: 12px;
  line-height: 16px;
}

.rpt-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1fr);
  gap: 16px;
}

.rpt-stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rpt-stage--revenue {
  padding-left: 16px;
  border-left: 1px solid var(--r-line);
}

.rpt-stage__label {
  min-height: 32px;
  color: var(--r-700);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.rpt-stage__value {
  color: var(--r-900);
  font-size: 32px;
  font-weight: 500;
  line-height: 38px;
}

.rpt-stage__value.blue { color: var(--r-blue-850); }

.rpt-stage--revenue .rpt-stage__label,
.rpt-stage--revenue .rpt-stage__value { color: var(--r-green); }

.rpt-stage__track {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--r-subtle);
}

.rpt-stage__track i {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 5px;
  border-radius: 4px;
  transform-origin: left center;
}

.tone-soft { background: var(--r-blue-300); }
.tone-blue { background: var(--r-blue); }

.rpt-stage__note {
  color: var(--r-700);
  font-size: 12px;
  line-height: 16px;
}

.rpt-stage__note strong {
  color: var(--r-900);
  font-weight: 500;
}

/* ---------- report 4 ---------- */
.rpt-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.rpt-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 18px;
}

.rpt-block--grow { flex: 1; }

.rpt-block__label {
  color: var(--r-blue-850);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.rpt-hypothesis {
  color: var(--r-900);
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}

.rpt-block .rpt-note strong { color: var(--r-700); }

.rpt-settings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rpt-settings > div {
  display: flex;
  gap: 12px;
}

.rpt-settings dt {
  flex: none;
  width: 96px;
  color: var(--r-700);
}

.rpt-settings dd {
  color: var(--r-900);
  font-weight: 500;
}

.rpt-audience {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.rpt-criteria {
  overflow: hidden;
  border: 1px solid var(--r-line);
  border-radius: 8px;
}

.rpt-criteria__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 16px;
  border-bottom: 1px solid var(--r-line);
  background: var(--r-head);
  font-weight: 500;
}

.rpt-criteria__caret { font-size: 12px; color: var(--r-700); }

.rpt-criteria__head > span:nth-child(2) { flex: 1; }

.rpt-criteria__edit {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--r-line-soft);
  border-radius: 8px;
  color: var(--r-700);
  font-size: 12px;
}

.rpt-criteria__list {
  padding: 16px;
  line-height: 21px;
}

.rpt-criteria__list b { font-weight: 500; }
.rpt-criteria__list .op { color: var(--r-300); }
.rpt-criteria__list i { font-style: italic; }

.rpt-criteria__join {
  display: block;
  color: var(--r-300);
  font-weight: 500;
}

.rpt-criteria-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--r-700);
  font-size: 13px;
  line-height: 19px;
}

.rpt-criteria-list li { font-weight: 400; }
.rpt-criteria-list li::before { top: 6px; }
.rpt-criteria-list strong { color: var(--r-900); font-weight: 500; }

/* ---------- motion: report emphasis sequence ---------- */
/* Defaults are the finished report; these only run under .is-playing. */
@keyframes rpt-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes rpt-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes rpt-glow {
  0% { background-color: var(--r-blue-100); }
  100% { background-color: var(--r-blue-50); }
}

@keyframes rpt-accent {
  from { box-shadow: inset 0 0 0 var(--r-blue); }
  to { box-shadow: inset 3px 0 0 var(--r-blue); }
}

@keyframes rpt-pop {
  0% { opacity: 0.25; transform: scale(0.6); }
  100% { opacity: 1; transform: none; }
}

@keyframes rpt-rec {
  0% { opacity: 0; transform: translateY(10px); box-shadow: 0 0 0 0 rgba(51, 102, 255, 0); }
  60% { opacity: 1; transform: none; box-shadow: 0 0 0 4px rgba(51, 102, 255, 0.12); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(51, 102, 255, 0); }
}

.rpt.is-playing .rpt-anim {
  animation: rpt-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}

.rpt.is-playing .rpt-anim--rec {
  animation: rpt-rec 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 520ms;
}

/* Report 1: highlighted campaign + bars */
.rpt.is-playing .rpt-table tr.is-highlight > * {
  animation: rpt-glow 0.9s ease-out 0.45s both;
}

.rpt.is-playing .rpt-table tr.is-highlight > :first-child {
  animation: rpt-glow 0.9s ease-out 0.45s both, rpt-accent 0.35s ease-out 0.45s both;
}

.rpt.is-playing .rpt-bars__bar i {
  animation: rpt-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

/* Report 2: outside converters, Marketing Operations bar */
.rpt.is-playing .rpt-squares i.is-outside {
  animation: rpt-pop 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms + 330ms);
}

.rpt.is-playing .rpt-dist tbody th::before {
  animation: rpt-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

/* Report 3: stages in sequence, bars fill, Cobalt row */
.rpt.is-playing .rpt-stage {
  animation: rpt-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms + 240ms);
}

.rpt.is-playing .rpt-stage__track i {
  animation: rpt-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms + 300ms);
}

.rpt.is-playing .rpt-stage:nth-child(1) .rpt-stage__track i { --i: 0; }
.rpt.is-playing .rpt-stage:nth-child(2) .rpt-stage__track i { --i: 1; }
.rpt.is-playing .rpt-stage:nth-child(3) .rpt-stage__track i { --i: 2; }
.rpt.is-playing .rpt-stage:nth-child(4) .rpt-stage__track i { --i: 3; }

@media (prefers-reduced-motion: reduce) {
  .rpt.is-playing *,
  .rpt.is-playing *::before {
    animation: none !important;
  }
}

/* ---------- < 720px: stack rows ---------- */
@container (max-width: 719px) {
  .rpt-row--372,
  .rpt-row--400,
  .rpt-row--500,
  .rpt-row--proposal {
    grid-template-columns: minmax(0, 1fr);
  }

  .rpt-split { flex-wrap: wrap; gap: 20px 32px; }
  .rpt-split__divider { display: none; }
  .rpt-grid-chart { flex-basis: 100%; }

  .rpt-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpt-stage--revenue { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid var(--r-line); border-left: 0; }
  .rpt-stage__label { min-height: 0; }
}

/* ---------- < 520px: phone ---------- */
@container (max-width: 519px) {
  .rpt-prompt {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
  }

  .rpt-prompt__question { font-size: 14px; line-height: 20px; }
  .rpt-body { gap: 16px; padding: 18px 16px 20px; }
  .rpt-context { gap: 4px 16px; font-size: 13px; }
  .rpt-headline { font-size: 24px; line-height: 30px; letter-spacing: -0.3px; }
  .rpt-summary { font-size: 15px; line-height: 23px; }
  .rpt-card, .rpt-rec { padding: 14px 16px; }
  .rpt-split { padding: 16px; }
  .rpt-stat__value b { font-size: 34px; line-height: 40px; }
  .rpt-squares { grid-template-columns: repeat(12, minmax(8px, 14px)); }
  .rpt-bars__group dt { width: 120px; }

  /* Tables become stacked rows: name on top, values as label/value pairs. */
  .rpt-table,
  .rpt-table tbody,
  .rpt-table tr,
  .rpt-table th,
  .rpt-table td {
    display: block;
    width: auto !important;
  }

  .rpt-table thead { display: none; }

  .rpt-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    height: auto !important;
    padding: 12px 14px;
    border-bottom: 1px solid var(--r-line);
  }

  .rpt-table tbody tr:last-child { border-bottom: 0; }

  .rpt-table tbody tr > * {
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: left !important;
  }

  .rpt-table tbody th.rpt-table__name {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    font-size: 15px;
  }

  .rpt-table tbody td::before {
    content: attr(data-label);
    display: block;
    color: var(--r-300);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
  }

  .rpt-table tbody tr.is-highlight { background: var(--r-blue-50); box-shadow: inset 3px 0 0 var(--r-blue); }
  .rpt-table tbody tr.is-highlight > * { background: transparent; box-shadow: none !important; }
  .rpt-table__platform .ui-logo { vertical-align: -4px; }

  .rpt-dist__heads { grid-template-columns: minmax(0, 1fr) 64px 64px; }
  .rpt-dist__col { width: 72px; }
  .rpt-settings dt { width: 88px; }
}