/*
 * 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;
}

/*
 * Section 6 stage. The composition is laid out in Figma's 1920 × 1080
 * coordinates: .cv-stage sets 1em = 1 Figma px from its own width, so every
 * left/top/width/height below (and in data.ts) is a Figma value.
 */
:host {
  display: block;
}

.p26-connect-view {
  --cv-900: #20292c;
  --cv-700: #475a61;
  --cv-300: #8a9fa9;
  --cv-line: rgba(138, 159, 169, 0.32);
  --cv-blue: #3366ff;
  --cv-blue-850: #2f55cd;
  --cv-blue-50: #f5f7ff;
  --cv-blue-100: #ebefff;
  --cv-blue-200: #d6e4ff;
  color: var(--cv-900);
  font-family: Rubik, Arial, sans-serif;
  text-align: left;
}

.p26-connect-view *,
.p26-connect-view *::before,
.p26-connect-view *::after {
  box-sizing: border-box;
}

.p26-connect-view :where(p, ul, ol, li) {
  margin: 0;
  padding: 0;
}

.p26-connect-view :where(ul, ol) {
  list-style: none;
}

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

/* ---------- stage ---------- */
.cv-motion,
.cv-frame {
  container-type: inline-size;
}

.cv-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  font-size: calc(100cqw / 1920);
}

.cv-art-wrap {
  position: absolute;
  will-change: transform, opacity;
}

.cv-art {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10em;
  transform-origin: 0 0;
  will-change: transform, opacity;
  user-select: none;
}

/* Depth tiers (Figma shadow values, in Figma px). */
.cv-art--primary { box-shadow: 0 20em 40em -5em rgba(32, 41, 44, 0.14), 0 1.7em 5em rgba(32, 41, 44, 0.07); }
.cv-art--secondary { box-shadow: 0 11.4em 26em -3.2em rgba(32, 41, 44, 0.1), 0 0.8em 2.4em rgba(32, 41, 44, 0.06); }
.cv-art--background { box-shadow: 0 6.8em 17em -1.7em rgba(32, 41, 44, 0.07); }
.cv-art--accent { box-shadow: 0 12.6em 28.8em -3.6em rgba(32, 41, 44, 0.1), 0 0.9em 2.7em rgba(32, 41, 44, 0.06); }
[data-art="csv"] .cv-art { box-shadow: none; border-radius: 0; }
[data-art="slack"] .cv-art { box-shadow: 0 22em 44em -5.5em rgba(32, 41, 44, 0.14), 0 1.8em 5.5em rgba(32, 41, 44, 0.07); }

/* Primer windows: images include their own shadow. */
.cv-window {
  position: absolute;
  display: block;
  will-change: transform, opacity;
  user-select: none;
}

.cv-tam { z-index: 20; }
.cv-account { z-index: 22; }

.cv-ring {
  position: absolute;
  z-index: 21;
  border: 2.5em solid var(--cv-blue);
  border-radius: 50%;
  box-shadow: 0 0 0 5em rgba(51, 102, 255, 0.18);
}

.cv-connector {
  position: absolute;
  z-index: 21;
  width: 0;
  border-left: 2em dashed var(--cv-blue);
  transform-origin: 50% 0;
}

/* ---------- Frame C finding card (stage units) ---------- */
.cv-card {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 18em;
  padding: 28em 32em 26em;
  border: 1em solid var(--cv-line);
  border-radius: 16em;
  background: #fff;
  box-shadow: 0 16em 40em -12em rgba(38, 33, 85, 0.16), 0 1em 2em rgba(32, 41, 44, 0.06);
  font-size: 1em;
}

.cv-motion .cv-card { opacity: 0; }

.cv-eyebrow {
  color: var(--cv-blue-850);
  font-size: 13em;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
  margin-bottom: -0.77em !important;
}

.cv-headline {
  color: var(--cv-900);
  font-size: 32em;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.cv-summary {
  color: var(--cv-700);
  font-size: 17em;
  line-height: 1.53;
}

.cv-evidence {
  display: flex;
  align-items: flex-start;
  gap: 32em;
  padding: 16em 20em;
  border: 1em solid var(--cv-line);
  border-radius: 12em;
}

.cv-stat {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4em;
}

.cv-stat__label {
  color: var(--cv-700);
  font-size: 12em;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.33;
  text-transform: uppercase;
}

.cv-stat__value {
  color: var(--cv-900);
  font-size: 32em;
  font-weight: 500;
  line-height: 1.19;
}

.cv-stat.is-accent .cv-stat__label { color: var(--cv-blue-850); }
.cv-stat.is-accent .cv-stat__value { color: var(--cv-blue); }

.cv-evidence__note {
  flex: 1;
  color: var(--cv-700);
  font-size: 13em;
  line-height: 1.46;
}

.cv-evidence__note { padding-top: 1.7em !important; }

.cv-rec {
  display: flex;
  flex-direction: column;
  gap: 10em;
  padding: 18em 22em;
  border: 1em solid var(--cv-blue-200);
  border-radius: 12em;
  background: var(--cv-blue-50);
}

.cv-rec__label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--cv-blue-850);
  font-size: 13em;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.46;
  text-transform: uppercase;
}

.cv-rec__icon {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.46em;
  background: var(--cv-blue-100);
  color: var(--cv-700);
  font-size: 1em;
}

.cv-rec__icon svg { font-size: 1.15em; }

.cv-rec__text {
  color: var(--cv-900);
  font-size: 17em;
  font-weight: 500;
  line-height: 1.41;
}

.cv-rec__rationale {
  color: var(--cv-700);
  font-size: 14em;
  line-height: 1.43;
}

.cv-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6em 16em;
}

.cv-signals li {
  position: relative;
  padding-left: 0.93em;
  color: var(--cv-900);
  font-size: 14em;
  font-weight: 500;
  line-height: 1.43;
}

.cv-signals li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.43em;
  height: 0.43em;
  border-radius: 50%;
  background: var(--cv-blue);
}

.cv-limits {
  padding-top: 0.92em !important;
  border-top: 0.077em solid var(--cv-line);
  color: var(--cv-700);
  font-size: 13em;
  line-height: 1.46;
}

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

/* Card in normal flow (phones): real px sizes. */
.cv-card--flow {
  position: relative;
  font-size: 1px;
  gap: 16px;
  padding: 20px 18px;
  border-width: 1px;
  border-radius: 16px;
  box-shadow: 0 16px 40px -12px rgba(38, 33, 85, 0.16), 0 1px 2px rgba(32, 41, 44, 0.06);
}

.cv-card--flow .cv-headline { font-size: 24px; }
.cv-card--flow .cv-summary { font-size: 15px; }
.cv-card--flow .cv-evidence { gap: 20px; padding: 14px 16px; border-width: 1px; border-radius: 12px; flex-wrap: wrap; }
.cv-card--flow .cv-stat__value { font-size: 28px; }
.cv-card--flow .cv-evidence__note { flex-basis: 100%; padding-top: 0 !important; }
.cv-card--flow .cv-rec { gap: 8px; padding: 14px 16px; border-width: 1px; border-radius: 12px; }
.cv-card--flow .cv-rec__text { font-size: 16px; }

/* ---------- which presentation ---------- */
.cv-sequence { display: none; }

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .cv-motion { display: none; }

  .cv-sequence {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .cv-step {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .cv-frame { overflow: clip; }

  .cv-caption {
    color: var(--cv-700);
    font-size: 15px;
    line-height: 1.55;
  }
}

/* Reduced motion on wider screens: the three full compositions. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .cv-phone-account,
  .cv-card--flow { display: none; }
  .cv-caption { max-width: 46rem; margin: 0 auto !important; text-align: center; }
}

/* Phones: simpler crops instead of the full collage. */
@media (max-width: 767px) {
  .cv-frame--a {
    overflow: hidden;
    border-radius: 16px;
    background: #f7f7f5;
  }

  /* Crop to the four primary artifacts (Figma x 120–1360, y 20–780). */
  .cv-frame--a .cv-stage {
    width: calc(100% * 1920 / 1240);
    margin: calc(-20 / 1240 * 100%) 0 calc(-300 / 1240 * 100%) calc(-120 / 1240 * 100%);
    font-size: calc(100cqw / 1240);
  }

  .cv-frame--b,
  .cv-frame--c { display: none; }

  .cv-phone-account {
    display: block;
    width: calc(100% + 12px);
    margin: -6px -6px 0;
  }
}