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

/* Connections directory: calm white cards with brand logos (the logos carry
   the colour), filter pills and search above. */
:host { display: block; }
.p26-connections { --cn-900: #20292c; --cn-700: #475a61; --cn-line: rgba(138, 159, 169, 0.32); color: var(--cn-900); font-family: Rubik, Arial, sans-serif; text-align: left; }
.p26-connections *, .p26-connections *::before, .p26-connections *::after { box-sizing: border-box; }
.p26-connections :where(p, h3) { margin: 0; }
.p26-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cn-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.75rem; }
.cn-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cn-pill { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0 1rem; border: 1px solid var(--cn-line); border-radius: 999px; background: #fff; color: var(--cn-900); font: inherit; font-size: 0.9375rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.cn-pill:hover { border-color: #262155; }
.cn-pill[aria-pressed="true"] { background: #262155; border-color: #262155; color: #fff; }
.cn-pill:focus-visible { outline: 3px solid #0b89fd; outline-offset: 2px; }
.cn-count { font-size: 0.8125rem; opacity: 0.6; }
.cn-search { display: flex; align-items: center; gap: 0.5rem; width: min(100%, 280px); min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--cn-line); border-radius: 12px; background: #fff; color: var(--cn-700); }
.cn-search:focus-within { border-color: #6e37ff; box-shadow: 0 0 0 3px rgba(110, 55, 255, 0.18); }
.cn-search input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--cn-900); font: inherit; font-size: 16px; }

.cn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cn-card { display: flex; flex-direction: column; gap: 0.6rem; min-height: 100%; padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--cn-line); border-radius: 18px; background: #fff; color: inherit; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.cn-card.is-link:hover { border-color: #c9bdfc; box-shadow: 0 18px 40px -30px rgba(38, 33, 85, 0.45); transform: translateY(-2px); }
.cn-card.is-link:focus-visible { outline: 3px solid #0b89fd; outline-offset: 3px; }
.cn-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
.cn-logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--cn-line); border-radius: 12px; background: #fff; color: #262155; }
.cn-logo img { width: 26px; height: 26px; object-fit: contain; }
.cn-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
.cn-label, .cn-status { display: inline-flex; align-items: center; height: 24px; padding: 0 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.cn-label { background: #f3f5f6; color: var(--cn-700); }
.cn-status.is-beta { background: #eef3ff; color: #2f55cd; }
.cn-status.is-soon { background: #fff4de; color: #66361f; }
.cn-name { font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.cn-match { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; font-size: 0.9375rem; color: var(--cn-700); }
.cn-match__before { text-decoration: line-through; text-decoration-color: rgba(71, 90, 97, 0.5); }
.cn-match b { color: #2f55cd; font-weight: 600; }
.cn-match__label { flex-basis: 100%; font-size: 0.8125rem; color: #6b7b82; }
.cn-via { font-size: 0.875rem; font-weight: 500; color: #3c327b; }
.cn-desc { font-size: 0.9375rem; line-height: 1.5; color: var(--cn-700); }
.cn-more { margin-top: auto; padding-top: 0.4rem; font-size: 0.9375rem; font-weight: 600; color: #3c327b; }
.cn-empty { padding: 2.5rem 1rem; text-align: center; color: var(--cn-700); }
.cn-reset { margin-left: 0.25rem; padding: 0; border: 0; background: none; color: #3c327b; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

@media (max-width: 991px) { .cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cn-search { width: 100%; } }
@media (max-width: 599px) {
  .cn-grid { grid-template-columns: minmax(0, 1fr); }
  .cn-filters { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .cn-pill { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .cn-card { transition: none; } .cn-card.is-link:hover { transform: none; } }