@layer properties, theme, base, components, utilities;
@layer pn-reset, pn-tokens, pn-base, pn-layout, pn-components;
/* Portal visual refresh ("neutre premium").

   Everything in this bundle lives in cascade layers: customer custom CSS
   is injected unlayered by public_docs/_styles.html.erb and therefore
   always wins over these rules, whatever its specificity.

   Tailwind's canonical layers are pre-declared before ours: custom
   headers can embed whole Tailwind-built pages (the demo hub embeds
   the marketing site chrome), and whichever sheet declares a layer
   first fixes its rank — without this line their later declaration
   would rank Tailwind's preflight and theme above the entire portal. */

/* Inter & JetBrains Mono, self-hosted. SIL OFL 1.1 — licenses in
   app/javascript/fonts/OFL-*.txt */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://bump.sh/packs/static/InterVariable-c504db5c06caaf7cdfba.woff2) format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://bump.sh/packs/static/InterVariable-Italic-01dcbad1bac635f9c9cd.woff2) format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://bump.sh/packs/static/JetBrainsMono-Regular-1d9e47ce7f6576ce7bae.woff2) format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://bump.sh/packs/static/JetBrainsMono-SemiBold-e25ac98086382ececc5d.woff2) format("woff2");
}

/* Internal design tokens (--pn-*). Raw values live here and nowhere else:
   every other file styles through these or the semantic tokens. */

@layer pn-tokens {
  :root {
    /* Neutral scale (zinc) */
    --pn-zinc-50: #fafafa;
    --pn-zinc-100: #f4f4f5;
    --pn-zinc-200: #e4e4e7;
    --pn-zinc-300: #d4d4d8;
    --pn-zinc-400: #a1a1aa;
    --pn-zinc-500: #71717a;
    --pn-zinc-600: #52525b;
    --pn-zinc-700: #3f3f46;
    --pn-zinc-800: #27272a;
    --pn-zinc-900: #18181b;
    --pn-zinc-950: #09090b;
    --pn-white: #ffffff;

    /* Status */
    --pn-success: #059669;
    --pn-success-soft: #ecfdf5;
    --pn-error: #dc2626;
    --pn-error-soft: #fef2f2;
    --pn-warning: #d97706;
    --pn-warning-soft: #fffbeb;
    --pn-info-soft: #eff6ff;

    /* Shape */
    --pn-radius-sm: 6px;
    --pn-radius-md: 8px;
    --pn-radius-lg: 12px;
    --pn-radius-xl: 16px;
    --pn-radius-round: 9999px;

    /* Elevation (near-zero by design) */
    --pn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --pn-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
    --pn-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Typography */
    --pn-font-sans: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    --pn-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
}
/* Semantic tokens: what components consume. The customer accent arrives
   through --doc-base-color, injected by public_docs/_styles.html.erb —
   that variable name is a public contract, do not rename it. */

@layer pn-tokens {
  /* Also declared on .doc-theme-default and .hub-theme-default:
     --doc-base-color lives there (injected by the docs and hubs
     _styles.html.erb), and var() substitution happens where the token
     is declared — :root alone would freeze the accent to its fallback. */
  :root,
  .doc-theme-default,
  .hub-theme-default {
    --pn-bg: var(--pn-zinc-50);
    --pn-surface: var(--pn-white);
    --pn-surface-muted: var(--pn-zinc-100);

    --pn-text: var(--pn-zinc-800);
    --pn-text-secondary: var(--pn-zinc-500);
    --pn-title: var(--pn-zinc-950);

    --pn-border: var(--pn-zinc-200);
    --pn-hairline: 1px solid var(--pn-border);

    --pn-accent: var(--doc-base-color, #025fd7);
    --pn-accent-soft: color-mix(in srgb, var(--pn-accent), white 92%);
    --pn-accent-strong: color-mix(in srgb, var(--pn-accent), black 25%);
    /* Accent readable on the dark code panel. 55% white clears WCAG
       AAA there for the darkest real accents and stays AA even for a
       near-black customer color. */
    --pn-accent-on-dark: color-mix(in srgb, var(--pn-accent), white 55%);
    /* Accent used as foreground text: raw on light surfaces, the
       readable derivative once dark mode flips it (dark.css) */
    --pn-accent-text: var(--pn-accent);

    /* Status colors as foreground text. Raw they sit at 3-4.4:1 on
       their soft tints: darkened 25% (like --pn-accent-strong) they
       clear AA on light; dark.css flips them to lightened mixes. */
    --pn-success-text: color-mix(in srgb, var(--pn-success), black 25%);
    --pn-warning-text: color-mix(in srgb, var(--pn-warning), black 25%);
    --pn-error-text: color-mix(in srgb, var(--pn-error), black 25%);

    /* Code panel (dark even in light mode) */
    --pn-code-bg: var(--pn-zinc-900);
    --pn-code-text: var(--pn-zinc-300);
    --pn-code-border: var(--pn-zinc-800);
  }
}
/* Legacy public CSS API. Customers upload custom CSS targeting these
   variable names (and _styles.html.erb injects --doc-base-color), so
   every :root token of the old portal bundle keeps working here.
   Neutrals are remapped onto the new zinc palette so legacy references
   stay visually coherent; chromatic scales keep their old values.

   Add to this file, never remove: an alias costs one line, a broken
   customer costs a support ticket. */

@layer pn-tokens {
  /* .doc-theme-default included for the same reason as semantic.css:
     accent-derived values must resolve where --doc-base-color lives. */
  :root,
  .doc-theme-default {
    /* --- Spacing scale (old global/spacings.css, verbatim) --- */
    --spacing-unit: 4px;

    --spacing-px: calc(var(--spacing-unit) * 0.25);
    --spacing-05: calc(var(--spacing-unit) * 0.5);
    --spacing-1: var(--spacing-unit);
    --spacing-1-5: calc(var(--spacing-unit) * 1.5);
    --spacing-2: calc(var(--spacing-unit) * 2);
    --spacing-2-5: calc(var(--spacing-unit) * 2.5);
    --spacing-3: calc(var(--spacing-unit) * 3);
    --spacing-3-5: calc(var(--spacing-unit) * 3.5);
    --spacing-4: calc(var(--spacing-unit) * 4);
    --spacing-4-5: calc(var(--spacing-unit) * 4.5);
    --spacing-5: calc(var(--spacing-unit) * 5);
    --spacing-6: calc(var(--spacing-unit) * 6);
    --spacing-7: calc(var(--spacing-unit) * 7);
    --spacing-8: calc(var(--spacing-unit) * 8);
    --spacing-9: calc(var(--spacing-unit) * 9);
    --spacing-10: calc(var(--spacing-unit) * 10);
    --spacing-11: calc(var(--spacing-unit) * 11);
    --spacing-12: calc(var(--spacing-unit) * 12);
    --spacing-14: calc(var(--spacing-unit) * 14);
    --spacing-15: calc(var(--spacing-unit) * 15);
    --spacing-16: calc(var(--spacing-unit) * 16);
    --spacing-17: calc(var(--spacing-unit) * 17);
    --spacing-18: calc(var(--spacing-unit) * 18);
    --spacing-20: calc(var(--spacing-unit) * 20);
    --spacing-24: calc(var(--spacing-unit) * 24);
    --spacing-30: calc(var(--spacing-unit) * 30);
    --spacing-32: calc(var(--spacing-unit) * 32);
    --spacing-34: calc(var(--spacing-unit) * 34);
    --spacing-35: calc(var(--spacing-unit) * 35);
    --spacing-38: calc(var(--spacing-unit) * 38);
    --spacing-40: calc(var(--spacing-unit) * 40);
    --spacing-64: calc(var(--spacing-unit) * 64);
    --spacing-68: calc(var(--spacing-unit) * 68);
    --spacing-120: calc(var(--spacing-unit) * 68);

    --spacing-px-minus: calc(var(--spacing-unit) * -0.25);
    --spacing-05-minus: calc(var(--spacing-unit) * -0.5);
    --spacing-1-minus: calc(var(--spacing-unit) * -1);
    --spacing-2-minus: calc(var(--spacing-unit) * -2);
    --spacing-3-minus: calc(var(--spacing-unit) * -3);
    --spacing-4-minus: calc(var(--spacing-unit) * -4);
    --spacing-5-minus: calc(var(--spacing-unit) * -5);
    --spacing-6-minus: calc(var(--spacing-unit) * -6);
    --spacing-8-minus: calc(var(--spacing-unit) * -8);
    --spacing-9-minus: calc(var(--spacing-unit) * -9);
    --spacing-10-minus: calc(var(--spacing-unit) * -10);
    --spacing-11-minus: calc(var(--spacing-unit) * -11);
    --spacing-12-minus: calc(var(--spacing-unit) * -12);
    --spacing-13-minus: calc(var(--spacing-unit) * -13);
    --spacing-14-minus: calc(var(--spacing-unit) * -14);
    --spacing-16-minus: calc(var(--spacing-unit) * -16);
    --spacing-20-minus: calc(var(--spacing-unit) * -20);
    --spacing-24-minus: calc(var(--spacing-unit) * -24);
    --spacing-30-minus: calc(var(--spacing-unit) * -30);

    --gap-small: var(--spacing-2);
    --gap-medium: var(--spacing-3);
    --gap-large: var(--spacing-8);

    /* --- Neutrals (old global/colors.css names, zinc values) --- */
    --black: var(--pn-zinc-950);
    --black-rgb: 9, 9, 11;
    --gray-90: var(--pn-zinc-900);
    --gray-80: var(--pn-zinc-800);
    --gray-70: var(--pn-zinc-700);
    --gray-50: var(--pn-zinc-500);
    --gray-40: var(--pn-zinc-400);
    --gray-20: var(--pn-zinc-200);
    --gray-10: var(--pn-zinc-50);
    --white: var(--pn-white);
    --white-rgb: 255, 255, 255;

    --slate-90: var(--pn-zinc-900);
    --slate-80: var(--pn-zinc-800);
    --slate-70: var(--pn-zinc-600);
    --slate-50: var(--pn-zinc-500);
    --slate-40: var(--pn-zinc-300);
    --slate-20: var(--pn-zinc-200);
    --slate-10: var(--pn-zinc-100);

    /* --- Chromatic scales (old values, kept) --- */
    --blue-100: #111c28;
    --blue-90: #222c3a;
    --blue-70: #184e94;
    --blue-60: #025fd7;
    --blue-40: #9abfef;
    --blue-20: #e6f6fc;
    --blue-10: #f5fbff;
    --darkest-blue: var(--blue-100);
    --darker-blue: var(--blue-90);
    --dark-blue: var(--blue-70);
    --blue: var(--blue-60);
    --blue-rgb: 2, 95, 215;
    --light-blue: var(--blue-20);
    --lighter-blue: var(--blue-10);
    --gray-blue: #44546f;
    --azure-blue: #3262ab;
    --sky-blue: #19aeff;
    --gradient-blue: linear-gradient(90deg, var(--sky-blue) 0.3%, var(--blue) 42.72%);

    --green-100: #11201d;
    --green-90: #002e1f;
    --green-70: var(--pn-success);
    --green-60: #00bd7e;
    --green-10: var(--pn-success-soft);
    --darkest-green: var(--green-100);
    --dark-green: var(--green-90);
    --medium-green: var(--green-70);
    --green: var(--green-60);
    --green-rgb: 0, 189, 126;
    --light-green: var(--green-10);

    --red-100: #241314;
    --red-90: #3b1410;
    --red-70: #730703;
    --red-60: var(--pn-error);
    --red-10: var(--pn-error-soft);
    --darkest-red: var(--red-100);
    --darker-red: var(--red-90);
    --dark-red: var(--red-70);
    --red: var(--red-60);
    --red-rgb: 220, 38, 38;
    --light-red: var(--red-10);

    --orange-100: #272018;
    --orange-70: #563814;
    --orange-60: var(--pn-warning);
    --orange-50: #ffa500;
    --orange-50-rgb: 255, 165, 0;
    --orange-10: var(--pn-warning-soft);
    --orange-05: #fdf7f0;
    --darkest-orange: var(--orange-100);
    --dark-orange: var(--orange-70);
    --orange: var(--orange-60);
    --orange-rgb: 217, 119, 6;
    --light-orange: var(--orange-10);
    --xlight-orange: var(--orange-05);
    --bright-orange: #ee6237;

    --yellow-70: #735c0f;
    --yellow-60: #f6e9be;
    --yellow-10: #fffbdd;
    --darker-yellow: var(--yellow-70);
    --dark-yellow: var(--yellow-60);
    --yellow: var(--yellow-10);

    --purple-100: #2e1130;
    --purple-60: #800080;
    --purple-10: #f4f0f6;
    --darkest-purple: var(--purple-100);
    --purple: var(--purple-60);
    --light-purple: var(--purple-10);

    /* --- Typography (old global/variables.css names) --- */
    --font-size: 16px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-family: var(--pn-font-sans);
    --heading-font-family: var(--pn-font-sans);
    --code-font-family: var(--pn-font-mono);
    --text-line-height: 1.6;
    --title-line-height: 1.25;
    --text-xxs: 0.625rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-l: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-5xl: 3rem;

    /* --- Semantic colors, remapped to the new design --- */
    --base-color: var(--pn-accent);
    --base-color-rgb: var(--blue-rgb);
    --text-color: var(--pn-text);
    --text-color-disabled: var(--pn-zinc-400);
    --text-color-secondary: var(--pn-text-secondary);
    --text-color-inverted: var(--pn-white);
    --title-color: var(--pn-title);
    --title-color-secondary: var(--pn-text-secondary);
    --link-color-hover: var(--pn-title);
    --code-color: var(--pn-text);
    --accent-color: var(--pn-title);

    --bg-color: var(--pn-bg);
    --bg-color-rgb: 250, 250, 250;
    --bg-color-primary: var(--pn-accent);
    --bg-color-primary-light: var(--pn-accent-soft);
    --bg-color-secondary: var(--pn-zinc-200);
    --bg-color-light: var(--pn-surface-muted);
    --bg-color-transparent: hsla(0, 0%, 100%, 0.4);
    --bg-color-active: var(--pn-accent-soft);
    --bg-color-inverted: var(--pn-zinc-900);

    --border-color-default: var(--pn-border);
    --border-color-primary: var(--pn-accent-soft);
    --border-color-error: var(--pn-error);
    --border-color-hover: var(--pn-zinc-400);
    --border-default: var(--pn-hairline);
    --border-primary: 1px solid var(--border-color-primary);

    --input-border-color-hover: var(--pn-zinc-600);
    --input-border-color-focus: var(--pn-zinc-400);
    --input-bg-color-disabled: var(--panel-bg-color);
    --input-max-width: 720px;
    --input-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    --input-box-shadow-focus: 0 0 2px rgba(0, 0, 0, 0.2);

    --hint-text-color: var(--pn-text-secondary);

    --text-color-success: var(--pn-success);
    --text-color-warning: var(--pn-warning);
    --text-color-error: var(--pn-error);
    --text-color-neutral: var(--pn-accent);
    --text-color-extra: var(--purple);

    --skeleton-color: var(--pn-zinc-200);

    --bg-color-success: var(--pn-success-soft);
    --bg-color-warning: var(--pn-warning-soft);
    --bg-color-error: var(--pn-error-soft);
    --bg-color-neutral: var(--pn-accent-soft);
    --bg-color-extra: var(--light-purple);

    --action-color: var(--pn-zinc-800);
    --panel-bg-color: var(--pn-surface-muted);
    --pill-bg-color: var(--pn-surface-muted);
    --dropdown-bg-color-hover: var(--pn-zinc-100);

    --border-radius-small: var(--pn-radius-sm);
    --border-radius-medium: var(--pn-radius-md);
    --border-radius-large: var(--pn-radius-lg);
    --border-radius-xlarge: var(--pn-radius-xl);
    --border-radius-round: var(--pn-radius-round);

    --box-shadow-base: var(--pn-shadow-md);
    --box-shadow-medium: var(--pn-shadow-md);
    --box-shadow-large: var(--pn-shadow-lg);

    --screen-s: 500px;
    --screen-m: 850px;
    --screen-l: 1100px;
    --screen-xl: 1200px;
    --container-max-width: 1216px;
    --z-index-default: 0;

    --focus-outline-color: color-mix(in oklch, var(--action-color), transparent 40%);
    --focus-outline-width: 3px;
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    --focus-outline-offset: 2px;

    --base-duration: 150ms;
    --base-timing: ease;
    --theme-change-transition: background-color ease-out 0.1s;
    --theme-filter: sepia(20%) grayscale(10%);

    --callout-background-info: var(--pn-info-soft);
    --callout-background-success: var(--pn-success-soft);
    --callout-background-warn: var(--pn-warning-soft);
    --callout-background-error: var(--pn-error-soft);
    --callout-border-color-info: var(--dark-blue);
    --callout-border-color-success: var(--pn-success);
    --callout-border-color-warn: var(--bright-orange);
    --callout-border-color-error: var(--pn-error);

    --alert-background-info: var(--pn-info-soft);
    --alert-background-success: var(--pn-success-soft);
    --alert-background-warn: var(--pn-warning-soft);
    --alert-background-error: var(--pn-error-soft);
    --alert-border-color-info: var(--blue-rgb);
    --alert-border-color-success: var(--green-rgb);
    --alert-border-color-warn: var(--orange-rgb);
    --alert-border-color-error: var(--red-rgb);

    --navigation-height: var(--spacing-16);
    --bg-code-title: var(--pn-code-bg);
    --transparent-bg-color: rgba(255, 255, 255, 0);
    --date-time-indicator-color: invert(0%) sepia(0%) saturate(0%) brightness(100%) contrast(100%);

    /* --- Doc tokens (old portal/css/variables.css) --- */
    /* Default accent; the per-customer value injected on
       .doc-theme-default by _styles.html.erb overrides it. Literal
       value: pointing it at --base-color would be circular now. */
    --doc-base-color: #025fd7;
    --doc-base-light-color: var(--pn-accent-soft);
    --doc-base-dark-color: var(--pn-accent-strong);
    --doc-success-color: var(--pn-success);
    --doc-error-color: var(--pn-error);
    --doc-warning-color: var(--pn-warning);
    --doc-warning-light-color: var(--pn-error-soft);
    --doc-nested-background-color: var(--pn-surface);

    --base-gap: var(--spacing-8);
    --doc-inline-spacing: var(--spacing-12);
    --doc-block-spacing: var(--spacing-16);

    @media (max-width: 850px) {
      --doc-inline-spacing: var(--spacing-6);
    }

    /* --- Doc layout tokens (old portal/css/base/variables.css) --- */
    --doc-base-box-shadow: var(--pn-shadow-md);
    --doc-base-banner-background-color: var(--pn-zinc-900);
    --doc-nav-height: 64px;
    --doc-icon-size: 32px;
    --code-font-size: var(--text-xs);
    --doc-font-size: var(--text-sm);
    --doc-font-weight: var(--font-weight-regular);
    --nav-font-size: var(--text-sm);
    --nav-font-weight: var(--font-weight-medium);
  }

  /* --- Dark theme legacy overrides --- */
  .dark-theme,
  .dark-theme .doc-theme-default {
    --text-color: var(--pn-text);
    --text-color-secondary: var(--pn-text-secondary);
    --text-color-inverted: var(--pn-zinc-950);
    --text-color-disabled: var(--pn-zinc-600);
    --title-color: var(--pn-title);
    --link-color-hover: var(--pn-zinc-300);
    --accent-color: var(--pn-white);

    --skeleton-color: var(--pn-zinc-800);

    --bg-color: var(--pn-bg);
    --bg-color-rgb: 9, 9, 11;
    --bg-color-secondary: var(--pn-zinc-800);
    --bg-color-light: var(--pn-surface-muted);
    --bg-color-transparent: rgba(9, 9, 11, 0.5);
    --bg-color-active: var(--pn-accent-soft);
    --bg-color-primary: var(--pn-white);
    --bg-color-primary-light: var(--pn-accent-soft);
    --bg-color-inverted: var(--pn-white);

    --border-color-default: var(--pn-border);
    --border-color-hover: var(--pn-zinc-500);
    --border-color-primary: var(--pn-accent);

    --hint-text-color: var(--pn-text-secondary);

    --bg-color-success: var(--dark-green);
    --bg-color-warning: var(--dark-orange);
    --bg-color-error: var(--darker-red);
    --bg-color-neutral: var(--darkest-blue);

    --action-color: var(--pn-white);
    --panel-bg-color: var(--pn-surface-muted);
    --pill-bg-color: var(--pn-zinc-800);
    --dropdown-bg-color-hover: var(--pn-zinc-800);

    --callout-background-info: var(--pn-zinc-900);
    --callout-background-success: var(--pn-zinc-900);
    --callout-background-warn: var(--pn-zinc-900);
    --callout-background-error: var(--pn-zinc-900);
    --alert-background-info: var(--pn-zinc-900);
    --alert-background-success: var(--pn-zinc-900);
    --alert-background-warn: var(--pn-zinc-900);
    --alert-background-error: var(--pn-zinc-900);

    --bg-code-title: var(--pn-zinc-900);
    --date-time-indicator-color: invert(100%) sepia(0%) saturate(0%) brightness(100%) contrast(100%);

    /* Old portal/css/themes/dark/variables.css */
    --doc-link-highlight: var(--pn-white);
    --doc-code-background-color: var(--pn-code-bg);
    --doc-nested-background-color: var(--pn-surface);
    --transparent-bg-color: rgba(9, 9, 11, 0);
  }
}
/* Dark mode: the dark-theme Stimulus controller toggles .dark-theme on
   <body>. Only semantic tokens flip here — components never test the
   class themselves. */

@layer pn-tokens {
  /* Also on .doc-theme-default and .hub-theme-default (inside
     <body.dark-theme>) so the accent-derived tints resolve against the
     customer color declared there — see semantic.css. */
  .dark-theme,
  .dark-theme .doc-theme-default,
  .dark-theme .hub-theme-default {
    --pn-bg: var(--pn-zinc-950);
    --pn-surface: var(--pn-zinc-900);
    --pn-surface-muted: var(--pn-zinc-800);

    --pn-text: var(--pn-zinc-300);
    --pn-text-secondary: var(--pn-zinc-400);
    --pn-title: var(--pn-white);

    --pn-border: var(--pn-zinc-800);

    /* --pn-accent stays var(--doc-base-color): customers can inject a
       dedicated dark color. Only the derived tints flip. */
    --pn-accent-soft: color-mix(in srgb, var(--pn-accent), black 75%);
    --pn-accent-strong: color-mix(in srgb, var(--pn-accent), white 40%);
    --pn-accent-text: var(--pn-accent-on-dark);

    /* Status softs: same flip as --pn-accent-soft, so status chips
       (deprecated pill, labels, breaking) become dark tints instead of
       near-white pastels. Info has no chromatic base: neutral surface. */
    --pn-success-soft: color-mix(in srgb, var(--pn-success), black 75%);
    --pn-warning-soft: color-mix(in srgb, var(--pn-warning), black 75%);
    --pn-error-soft: color-mix(in srgb, var(--pn-error), black 75%);
    --pn-info-soft: var(--pn-zinc-900);

    /* Raw status colors sit around 4:1 on their dark soft tints:
       lightened they clear AA as chip text */
    --pn-success-text: color-mix(in srgb, var(--pn-success), white 30%);
    --pn-warning-text: color-mix(in srgb, var(--pn-warning), white 30%);
    --pn-error-text: color-mix(in srgb, var(--pn-error), white 30%);

    --pn-code-border: var(--pn-zinc-800);
  }
}

@layer pn-reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    scrollbar-width: thin;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  a {
    color: inherit;
  }

  table {
    border-collapse: collapse;
  }
}
@layer pn-base {
  html {
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background-color: #fafafa;
    background-color: var(--pn-bg);
    color: #27272a;
    color: var(--pn-text);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    line-height: var(--text-line-height);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #09090b;
    color: var(--pn-title);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    line-height: var(--title-line-height);
    letter-spacing: -0.01em;
  }

  h1 {
    font-size: 2rem;
    font-size: var(--text-3xl);
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: 1.5rem;
    font-size: var(--text-2xl);
    letter-spacing: -0.02em;
  }

  h3 {
    font-size: 1.25rem;
    font-size: var(--text-xl);
  }

  h4,
  h5,
  h6 {
    font-size: 1rem;
    font-size: var(--text-base);
  }

  a {
    color: #025fd7;
    color: var(--pn-accent-text);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  pre,
  code,
  kbd,
  samp {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--code-font-size);
  }

  /* Inline code in prose: subtle surface, hairline, small radius */
  :not(pre) > code {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    padding: 1px 4px;
    padding: 1px var(--spacing-1);
  }

  ::-moz-selection {
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
  }

  ::selection {
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
  }

  strong {
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  hr {
    border: 0;
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
  }
}
/* Tailwind utility classes used directly in component templates.
   Kept unlayered so they keep winning over layered component rules,
   like they did in the old bundle. */

/* purgecss start ignore */
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){

  .\!container{
    max-width: 640px !important;
  }

  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){

  .\!container{
    max-width: 768px !important;
  }

  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){

  .\!container{
    max-width: 1024px !important;
  }

  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){

  .\!container{
    max-width: 1280px !important;
  }

  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1441px){

  .\!container{
    max-width: 1441px !important;
  }

  .container{
    max-width: 1441px;
  }
}
@media (min-width: 1536px){

  .\!container{
    max-width: 1536px !important;
  }

  .container{
    max-width: 1536px;
  }
}
/* purgecss end ignore */

.visible{
  visibility: visible;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.-bottom-\[26px\]{
  bottom: -26px;
}

.-top-64{
  top: -16rem;
}

.left-8{
  left: 2rem;
}

.top-30{
  top: 7.5rem;
}

.z-10{
  z-index: 10;
}

.row-start-1{
  grid-row-start: 1;
}

.mx-6{
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-10{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.my-16{
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.-mb-30{
  margin-bottom: -7.5rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.ml-4{
  margin-left: 1rem;
}

.mr-0{
  margin-right: 0px;
}

.mr-6{
  margin-right: 1.5rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-16{
  margin-top: 4rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-20{
  margin-top: 5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-8{
  margin-top: 2rem;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.inline-grid{
  display: inline-grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.h-10{
  height: 2.5rem;
}

.h-12{
  height: 3rem;
}

.h-18{
  height: 4.5rem;
}

.h-2{
  height: 0.5rem;
}

.h-9{
  height: 2.25rem;
}

.h-\[560px\]{
  height: 560px;
}

.h-auto{
  height: auto;
}

.h-full{
  height: 100%;
}

.w-10{
  width: 2.5rem;
}

.w-2\/3{
  width: 66.666667%;
}

.w-4{
  width: 1rem;
}

.w-60{
  width: 15rem;
}

.w-full{
  width: 100%;
}

.min-w-10{
  min-width: 2.5rem;
}

.max-w-lg-screen{
  max-width: 1440px;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-full{
  flex: 1 1 100%;
}

.shrink-0{
  flex-shrink: 0;
}

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

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer{
  cursor: pointer;
}

.resize{
  resize: both;
}

.list-disc{
  list-style-type: disc;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.flex-col{
  flex-direction: column;
}

.flex-wrap{
  flex-wrap: wrap;
}

.place-items-center{
  place-items: center;
}

.items-start{
  align-items: flex-start;
}

.items-center{
  align-items: center;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-10{
  gap: 2.5rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-8{
  gap: 2rem;
}

.self-start{
  align-self: flex-start;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-x-scroll{
  overflow-x: scroll;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.break-all{
  word-break: break-all;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-l-lg{
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-r-full{
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.border{
  border-width: 1px;
}

.border-t{
  border-top-width: 1px;
}

.border-solid{
  border-style: solid;
}

.border-gray{
  --tw-border-opacity: 1;
  border-color: rgb(238 238 238 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.border-gray{
    border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));
  }
}

.border-shark{
  --tw-border-opacity: 1;
  border-color: rgb(36 41 46 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.border-shark{
    border-color: rgb(36 41 46 / var(--tw-border-opacity, 1));
  }
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(19 20 21 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.bg-black{
    background-color: rgb(19 20 21 / var(--tw-bg-opacity, 1));
  }
}

.bg-blue-90{
  --tw-bg-opacity: 1;
  background-color: rgb(34 44 58 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.bg-blue-90{
    background-color: rgb(34 44 58 / var(--tw-bg-opacity, 1));
  }
}

.bg-gray{
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.bg-gray{
    background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
  }
}

.bg-lightblue{
  --tw-bg-opacity: 1;
  background-color: rgb(240 247 255 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.bg-lightblue{
    background-color: rgb(240 247 255 / var(--tw-bg-opacity, 1));
  }
}

.bg-lightgray{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.bg-lightgray{
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  }
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.bg-white{
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
}

.p-10{
  padding: 2.5rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-px{
  padding-top: 1px;
  padding-bottom: 1px;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pb-20{
  padding-bottom: 5rem;
}

.pb-6{
  padding-bottom: 1.5rem;
}

.pl-6{
  padding-left: 1.5rem;
}

.pl-8{
  padding-left: 2rem;
}

.pr-0{
  padding-right: 0px;
}

.pr-1{
  padding-right: 0.25rem;
}

.pt-16{
  padding-top: 4rem;
}

.pt-px{
  padding-top: 1px;
}

.text-center{
  text-align: center;
}

.text-4xl{
  font-size: 2.5rem;
  line-height: 2.875rem;
}

.text-\[22px\]{
  font-size: 22px;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.6875rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-semibold{
  font-weight: 600;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.leading-relaxed{
  line-height: 1.625;
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(19 20 21 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.text-black{
    color: rgb(19 20 21 / var(--tw-text-opacity, 1));
  }
}

.text-blue{
  --tw-text-opacity: 1;
  color: rgb(2 95 215 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.text-blue{
    color: rgb(2 95 215 / var(--tw-text-opacity, 1));
  }
}

.text-darkgray{
  --tw-text-opacity: 1;
  color: rgb(160 175 191 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.text-darkgray{
    color: rgb(160 175 191 / var(--tw-text-opacity, 1));
  }
}

.text-gray{
  --tw-text-opacity: 1;
  color: rgb(238 238 238 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.text-gray{
    color: rgb(238 238 238 / var(--tw-text-opacity, 1));
  }
}

.text-gray-40{
  --tw-text-opacity: 1;
  color: rgb(170 176 182 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.text-gray-40{
    color: rgb(170 176 182 / var(--tw-text-opacity, 1));
  }
}

.text-lightblack{
  --tw-text-opacity: 1;
  color: rgb(66 67 68 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.text-lightblack{
    color: rgb(66 67 68 / var(--tw-text-opacity, 1));
  }
}

.text-lighterblue{
  --tw-text-opacity: 1;
  color: rgb(186 224 251 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.text-lighterblue{
    color: rgb(186 224 251 / var(--tw-text-opacity, 1));
  }
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.text-white{
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.no-underline{
  text-decoration-line: none;
}

.shadow-medium{
  --tw-shadow: 0px 5px 24px rgba(19, 20, 21, 0.1);
  --tw-shadow-colored: 0px 5px 24px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0px 5px 24px rgba(19, 20, 21, 0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline{
  outline-style: solid;
}

.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) invert(100%) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200{
  transition-duration: 200ms;
}

/* Legacy contract (old global/abstracts/utilities.css): controllers
   toggle aria-hidden expecting the element to disappear — the search
   loader/magnifier swap, the explorer auth buttons, response panels.
   Unlayered with !important like the rest of this file. */
:is([aria-hidden="true"], [hidden]) {
  display: none !important;
}

/* Doc page shell: container, sticky headers, drawer chrome, mobile
   toggle. The navigation tree itself lives in doc/navigation.css.

   Stimulus contract (do not break):
   - mobile-nav toggles .open on [data-mobile-nav-target="drawer"]
     (.nav-drawer) and data-toggled-menu on <body>.
   - The 850px breakpoint is hardcoded in that behavior. */

@layer pn-layout {
  :root {
    /* Legacy public names: customers override these. */
    --sidebar-width: 280px;
    --logo-width: 200px;
    --logo-height: var(--doc-icon-size);
  }

  /* --- Page frame --- */

  .doc-container {
    display: flex;
    position: relative;
    z-index: 0;
    background-color: #fafafa;
    background-color: var(--pn-bg);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  .main-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  .doc-content {
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;
    scroll-padding-top: calc(64px - 2px);
    scroll-padding-top: calc(var(--doc-nav-height) - 2px);
  }

  /* --- Sidebar drawer (desktop: sticky full-height column) --- */

  .nav-drawer {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0px;
    top: var(--body-top, 0px);
    z-index: 2;
    width: 280px;
    width: var(--sidebar-width);
    height: calc(100dvh - 0px);
    height: calc(100dvh - var(--body-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-inline-end: 1px solid #e4e4e7;
    border-inline-end: var(--pn-hairline);
    padding: calc(4px * 5) calc(4px * 5) calc(4px * 7);
    padding: var(--spacing-5) var(--spacing-5) var(--spacing-7);
    font-size: 0.875rem;
    font-size: var(--nav-font-size);
    font-weight: 500;
    font-weight: var(--nav-font-weight);
  }

  .drawer-header {
    display: none;
  }

  /* --- Sticky header bar (desktop) --- */

  .main-header {
    position: sticky;
    top: 0px;
    top: var(--body-top, 0px);
    z-index: 10;
    background-color: color-mix(in srgb, #fafafa, transparent 20%);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid #e4e4e7;
    border-block-end: var(--pn-hairline);
  }

@supports (color: color-mix(in lch, red, blue)){
.main-header {
    background-color: color-mix(in srgb, var(--pn-bg), transparent 20%);
  }
}

  portal-header {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    font-size: var(--nav-font-size);
    font-weight: 500;
    font-weight: var(--nav-font-weight);
  }

  portal-header .main-nav {
    display: flex;
    align-items: center;
    min-height: 64px;
    min-height: var(--doc-nav-height);
    padding-block: calc(4px * 2);
    padding-block: var(--spacing-2);
    padding-inline: calc(4px * 12);
    padding-inline: var(--doc-inline-spacing);
  }

  portal-header portal-resource-title {
    flex-shrink: 0;
    order: -1;
  }

  .doc-top-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: 4px calc(4px * 6);
    gap: var(--spacing-1) var(--spacing-6);
    width: 100%;
    /* One voice for every nav entry: naked-button links (external
       links) blend in through their color: inherit */
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .doc-top-nav > a {
    display: flex;
    align-items: center;
    gap: 4px;
    gap: var(--spacing-1);
    height: calc(4px * 8);
    height: var(--spacing-8);
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .doc-top-nav > a:hover {
    color: #27272a;
    color: var(--pn-text);
    text-decoration: none;
  }

  /* Search button (styled in a later phase) pushes links right;
     without it the title does. */
  .doc-top-nav > button:first-child {
    margin-inline-end: auto;
  }

  .doc-top-nav:not(:has(.search-button)) .doc-title {
    margin-inline-end: auto;
  }

  .doc-title {
    display: flex;
    align-items: center;
    gap: 4px calc(4px * 6);
    gap: var(--spacing-1) var(--spacing-6);
    order: -1;
    color: #09090b;
    color: var(--pn-title);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  /* --- Resource title (logo + name, sidebar and toggle bar) --- */

  portal-resource-title {
    display: flex;
    align-items: center;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
  }

  portal-resource-title a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: #09090b;
    color: var(--pn-title);
    font-size: 1.125rem;
    font-size: var(--text-l);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  portal-resource-title a:hover {
    text-decoration: none;
  }

  portal-resource-title img {
    max-width: 200px;
    max-width: var(--logo-width);
    max-height: 32px;
    max-height: var(--logo-height);
  }

  .logo-light {
    display: block;
  }

  .logo-dark {
    display: none;
  }

  .dark-theme .logo-light {
    display: none;
  }

  .dark-theme .logo-dark {
    display: block;
  }

  .dark-theme portal-resource-title img.logo-filter {
    filter: invert(0.92) hue-rotate(180deg);
  }

  /* --- Embed mode (old docs/base/embed.css): a customer top bar sits
     above the doc; the embed controller measures it into --body-top /
     --embed-body-top and swaps the logo visibility. --- */

  #embed-top-body nav {
    z-index: 999;
  }

  .embed-mode-sticky {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .embed-mode-slide {
    display: none;
  }

  /* Preview pages: the Intercom bubble overlaps the rendered doc */
  .public_previews .intercom-launcher {
    display: none;
  }

  /* --- Mobile toggle, hidden on desktop --- */

  .menu-toggle,
  .mobile-menu-toggle {
    display: none;
  }

  /* ================= Mobile (Stimulus breakpoint) ================= */

  @media (max-width: 850px) {
    .doc-container {
      flex-direction: column;
      z-index: auto;
    }

    .main-header {
      display: none;
    }

    .doc-content {
      position: relative;
      flex: 1;
      height: calc(100vh - 64px);
      height: calc(100vh - var(--doc-nav-height));
    }

    /* Toggle bar replaces the header */
    .mobile-menu-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0px;
      top: var(--body-top, 0px);
      z-index: 16;
      height: 64px;
      height: var(--doc-nav-height);
      padding: calc(4px * 2) calc(4px * 12);
      padding: var(--spacing-2) var(--doc-inline-spacing);
      background-color: color-mix(in srgb, #fafafa, transparent 20%);
      backdrop-filter: blur(8px);
      border-block-end: 1px solid #e4e4e7;
      border-block-end: var(--pn-hairline);
    }

@supports (color: color-mix(in lch, red, blue)){
.mobile-menu-toggle {
      background-color: color-mix(in srgb, var(--pn-bg), transparent 20%);
    }
}

    /* Burger button: two bars, crossing into an X when toggled. The
       explicit height gives the empty button its box (the old bundle
       got it from a bare-button rule this bundle does not have). */
    .menu-toggle {
      display: block;
      position: relative;
      flex-shrink: 0;
      margin-inline-start: auto;
      width: calc(4px * 6);
      width: var(--spacing-6);
      height: calc(4px * 8);
      height: var(--spacing-8);
      padding: 0;
      text-indent: -200vw;
    }

    .menu-toggle::before,
    .menu-toggle::after {
      content: "";
      display: block;
      position: absolute;
      top: calc(4px * 2);
      top: var(--spacing-2);
      width: 100%;
      height: calc(4px * 0.5);
      height: var(--spacing-05);
      border-top: 2px solid #27272a;
      border-top: 2px solid var(--pn-text);
      border-radius: 2px;
    }

    .menu-toggle::after {
      top: auto;
      top: initial;
      bottom: calc(4px * 2);
      bottom: var(--spacing-2);
    }

    [data-toggled-menu="true"] .menu-toggle::before {
      transform: translateY(7px) rotate(45deg);
    }

    [data-toggled-menu="true"] .menu-toggle::after {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Drawer: off-canvas overlay panel, .open slides it in.
       visibility (not display) keeps the closed panel in the tree so
       the transform transition can actually run. */
    .nav-drawer {
      visibility: hidden;
      position: fixed;
      top: 0px;
      top: var(--body-top, 0px);
      left: 0;
      /* Some customers have a high nav z-index (999 for MongoDB) */
      z-index: 1000;
      max-width: calc(100vw - calc(4px * 18));
      max-width: calc(100vw - var(--spacing-18));
      background-color: #fafafa;
      background-color: var(--pn-bg);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      box-shadow: var(--pn-shadow-lg);
      padding-inline: calc(4px * 6);
      padding-inline: var(--spacing-6);
      transform: translateX(-100%);
    }

    .nav-drawer.open {
      visibility: visible;
      transform: translateX(0);
    }

    /* Scrim: dims the page behind the open drawer and swallows the
       tap that closes it (the mobile-nav controller closes on any
       click outside the drawer, and no underlying link fires).
       On body: hub and changelog pages have no .doc-container and
       share the same drawer. */
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      /* Right under the drawer, above everything else */
      z-index: 999;
      /* Same veil as dialog::backdrop (dialog.css) */
      background-color: rgb(0 0 0 / 0.4);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
    }

    body[data-toggled-menu="true"]::after {
      opacity: 1;
      pointer-events: auto;
    }

    /* The page behind the open drawer does not scroll */
    body[data-toggled-menu="true"] {
      overflow: hidden;
    }

    .drawer-header {
      display: flex;
      width: 100%;
    }

    /* Header content rearranged inside the drawer */
    portal-header .main-nav {
      min-height: 0;
      padding: 0;
    }

    portal-header portal-resource-title,
    portal-header .doc-title {
      display: none;
    }

    .doc-top-nav {
      justify-content: start;
      padding-block: calc(4px * 4);
      padding-block: var(--spacing-4);
      border-block-end: 1px solid #e4e4e7;
      border-block-end: var(--pn-hairline);
      margin-block-end: calc(4px * 5);
      margin-block-end: var(--spacing-5);
    }

    .doc-top-nav > a,
    .doc-top-nav > .dropdown {
      width: 100%;
    }

    /* 44px touch targets on the drawer links */
    .doc-top-nav > a {
      height: calc(4px * 11);
      height: var(--spacing-11);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .nav-drawer {
      /* visibility rides along so the panel stays shown (and
         focusable content hidden) for the whole slide-out */
      transition:
        transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0.35s;
    }

    body::after {
      transition: opacity 0.35s ease;
    }

    .menu-toggle::before,
    .menu-toggle::after {
      transition: transform 0.25s ease-out;
    }
  }
}
/* Sidebar navigation: drawer contents and the resources/operations
   tree. Active state is a soft accent pill (no border bars).

   Stimulus contract (doc-navigation controller):
   - .active / .open toggled on .navigation__resource-link and
     .navigation__operation-link.
   - .open on a resource link reveals the sibling .navigation__operations.
   - .navigation__caret is the collapse click target. */

@layer pn-layout {
  doc-navigation {
    display: contents;
  }

  @media (min-width: 850.02px) {
    doc-navigation {
      display: block;
    }
  }

  doc-navigation portal-resource-title {
    padding-block-end: calc(4px * 8);
    padding-block-end: var(--spacing-8);
  }

  /* Links are pills wider than the text column: bleed into the drawer
     padding so text stays aligned with the group titles. */
  doc-navigation .navigation__resources > li {
    margin-inline: calc(4px * -3);
    margin-inline: var(--spacing-3-minus);
  }

  /* --- Drawer body --- */

  .drawer-sidenav {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
  }

  /* Group titles: sentence case, small, quiet */
  .drawer-sidenav h2,
  .nav-drawer h2 {
    margin-block-end: calc(4px * 2);
    margin-block-end: var(--spacing-2);
    color: #27272a;
    color: var(--pn-text);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  /* Branch selector sits above the tree; long names truncate */
  .drawer-sidenav .dropdown.branches {
    margin-block-end: calc(4px * 8);
    margin-block-end: var(--base-gap);
  }

  .drawer-sidenav .dropdown.branches [data-dropdown-target="current"] {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .drawer-sidenav .dropdown.branches .menu-dropdown {
    width: 100%;
  }

  .drawer-sidenav .dropdown.branches .menu-item {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Resources tree --- */

  .navigation__resources {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 0.5);
    gap: var(--spacing-05);
    margin-block-end: calc(4px * 8);
    margin-block-end: var(--spacing-8);
  }

  .navigation__resource-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: calc(4px * 1.5) calc(4px * 3);
    padding: var(--spacing-1-5) var(--spacing-3);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .navigation__resource-link:hover {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    color: #27272a;
    color: var(--pn-text);
    text-decoration: none;
  }

  .navigation__resource-link.active {
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
    color: #025fd7;
    color: var(--pn-accent-text);
  }

  /* --- Collapse caret --- */

  .navigation__resource-link svg {
    transform: rotate(-90deg);
  }

  .navigation__caret {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(4px * 4);
    width: var(--spacing-4);
    height: calc(4px * 4);
    height: var(--spacing-4);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    cursor: pointer;
  }

  .navigation__caret svg {
    opacity: 0;
    transform: rotate(0deg);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .navigation__resource:hover .navigation__caret svg,
  .navigation__resource-link.active svg,
  .navigation__resource-link.open .navigation__caret svg {
    opacity: 1;
  }

  .navigation__resource-link.open .navigation__caret svg {
    transform: rotate(-180deg);
  }

  /* --- Operations (revealed when the resource is .open) --- */

  .navigation__operations {
    display: none;
    flex-direction: column;
    gap: calc(4px * 0.5);
    gap: var(--spacing-05);
    margin-block-start: 4px;
    margin-block-start: var(--spacing-1);
    padding-inline-start: calc(4px * 3);
    padding-inline-start: var(--spacing-3);
  }

  .navigation__resource-link.open + .navigation__operations {
    display: flex;
  }

  .navigation__operation-link {
    display: flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    width: 100%;
    min-height: calc(4px * 8);
    min-height: var(--spacing-8);
    padding: calc(4px * 1.5) calc(4px * 3);
    padding: var(--spacing-1-5) var(--spacing-3);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.875rem;
    font-size: var(--nav-font-size);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
  }

  .navigation__operation-link:hover {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    color: #27272a;
    color: var(--pn-text);
    text-decoration: none;
  }

  .navigation__operation-link.active {
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
    color: #025fd7;
    color: var(--pn-accent-text);
  }

  /* Verb tag pushed to the edge; the plain-text reset (no chip chrome)
     lives in doc/badges.css, whose layer wins over this one. */
  .navigation__operation .operation-verb {
    margin-inline-start: auto;
  }

  /* --- "Powered by Bump.sh" footer --- */

  .drawer-sidenav footer {
    margin-block-start: auto;
    padding-block-start: calc(4px * 6);
    padding-block-start: var(--spacing-6);
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  .drawer-sidenav footer a {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    width: 100%;
    padding: calc(4px * 3);
    padding: var(--spacing-3);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .drawer-sidenav footer a:hover {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    color: #27272a;
    color: var(--pn-text);
    text-decoration: none;
  }

  .drawer-sidenav footer svg {
    width: calc(4px * 4);
    width: var(--spacing-4);
    height: calc(4px * 4);
    height: var(--spacing-4);
  }

  @media (max-width: 850px) {
    /* On mobile the logo lives in the toggle bar, not the drawer */
    .drawer-sidenav portal-resource-title {
      display: none;
    }
  }
}
/* Doc sections: the copy/examples grid, operation layout and the
   turbo-frame loading behavior.

   Structural contracts (copied from the old bundle, do not "fix"):
   - --grid-ratio: 1 column on mobile, copy + examples columns >= 850px.
   - scroll-margin-top offsets depend on --body-top (embed mode) and
     --doc-block-spacing; the doc-navigation controller scrolls to them.
   - Lazy turbo-frames get symmetric negative/positive margins so they
     start loading one viewport early (rootMargin emulation): top and
     bottom must always cancel each other out.
   - aria-current is toggled by the doc-navigation controller; in
     .no-single-page-xp mode only the current section keeps its size. */

@layer pn-layout {
  .doc-section {
    --grid-ratio: 1fr;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: calc(4px * 16) calc(4px * 8);
    gap: var(--doc-block-spacing) var(--base-gap);
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
    padding: calc(4px * 16) calc(4px * 12);
    padding: var(--doc-block-spacing) var(--doc-inline-spacing);
  }

  .no-single-page-xp .doc-content .doc-section {
    border: 0;
  }

  .no-single-page-xp .doc-content .doc-section:not([aria-current="true"]) {
    gap: 0;
    padding-block: 0;
  }

  .no-single-page-xp .doc-content turbo-frame {
    display: none;
  }

  .doc-section--column {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 8) calc(4px * 12);
    gap: var(--base-gap) var(--doc-inline-spacing);
  }

  .doc-section--grid {
    display: grid;
    position: relative;
    grid-gap: calc(4px * 8) calc(4px * 12);
    grid-gap: var(--base-gap) var(--doc-inline-spacing);
    gap: calc(4px * 8) calc(4px * 12);
    gap: var(--base-gap) var(--doc-inline-spacing);
    grid-template-columns: var(--grid-ratio);
  }

  /* AsyncAPI messages wrap their title, description and property
     lists in a plain block: same column rhythm as the section copy
     around them, so Headers/Payload breathe like every other list. */
  .doc-section-copy > .doc-inner {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 8);
    gap: var(--base-gap);
  }

  .doc-section--grid > :last-child {
    margin-bottom: 0;
  }

  /* --- Scroll offsets for navigation targets --- */

  [data-doc-navigation-target="entry"].doc-topic:not(turbo-frame),
  [data-doc-navigation-target="entry"].doc-topic:is(turbo-frame:not(:empty)) {
    scroll-margin-top: calc(0px + calc(4px * 16));
    scroll-margin-top: calc(var(--body-top, 0px) + var(--doc-block-spacing));
  }

  [data-doc-navigation-target="entry"]:not(turbo-frame),
  [data-doc-navigation-target="entry"]:is(turbo-frame:not(:empty)) {
    scroll-margin-top: calc(0px + calc(4px * 16) * 2);
    scroll-margin-top: calc(var(--body-top, 0px) + var(--doc-block-spacing) * 2);
  }

  /* Initial margin block for the first load page before the JS is loaded */
  .no-single-page-xp
    [data-doc-navigation-target="entry"][aria-current="true"]:not(.doc-topic):not(turbo-frame),
  .no-single-page-xp
    [data-doc-navigation-target="entry"][aria-current="true"]:not(.doc-topic):is(turbo-frame:not(:empty)) {
    margin-block: calc(4px * 16);
    margin-block: var(--doc-block-spacing);
  }

  /* --- Introduction: examples float right inside the copy flow --- */

  #doc-introduction {
    border: 0;
    z-index: 1;
  }

  #doc-introduction:not(turbo-frame),
  #doc-introduction:is(turbo-frame[complete]) {
    display: block;
    /* Extra top scroll margin when there's an embed top body */
    scroll-margin-top: calc(0px + calc(4px * 16) * 2);
    scroll-margin-top: calc(var(--embed-body-top, 0px) + var(--doc-block-spacing) * 2);
  }

  #doc-introduction .doc-introduction-title {
    margin-bottom: calc(4px * 12);
    margin-bottom: var(--spacing-12);
  }

  #doc-introduction .doc-section-copy {
    display: block;
    min-height: 90px;
  }

  #doc-introduction .auto-definition {
    line-height: 2;
  }

  #doc-introduction .doc-section-examples {
    float: right;
    position: relative;
    top: 0;
    order: 0;
    z-index: 1;
    margin-inline-start: calc(4px * 8);
    margin-inline-start: var(--spacing-8);
    /* Same breathing room below as on the left for the wrapping copy */
    margin-block-end: calc(4px * 8);
    margin-block-end: var(--spacing-8);
    width: clamp(250px, 45%, 525px);
    max-width: 525px;
  }

  #doc-introduction + .doc-section {
    clear: both;
  }

  @media (max-width: 500px) {
    #doc-introduction {
      display: flex;
      flex-direction: column;
    }

    #doc-introduction .doc-section-copy {
      order: 0;
      min-height: auto;
    }

    #doc-introduction .doc-section-examples {
      order: 1;
      margin: 0 0 calc(4px * 8);
      margin: 0 0 var(--base-gap);
      width: 100%;
    }
  }

  body:not(.no-single-page-xp) .doc-content #doc-introduction {
    padding-bottom: calc(4px * 16);
    padding-bottom: var(--doc-block-spacing);
  }

  #doc-servers table {
    margin-top: 0;
  }

  /* --- Turbo-frame loading behavior --- */

  /* Reserve room so lazy frames don't collapse the scroll position */
  turbo-frame.doc-section:not([disabled]):not([complete]) {
    min-height: 50vh;
  }

  turbo-frame.operation:not([disabled]):not([complete]) {
    min-height: 100vh;
  }

  /* Lazy turbo frame offset à-la-rootMargin, cf
     https://github.com/hotwired/turbo/issues/322
     WARNING: top and bottom margins must always cancel out. */
  turbo-frame[loading="lazy"]:empty {
    margin-top: calc((0px + calc(4px * 16)) * -2);
    margin-top: calc((var(--body-top, 0px) + var(--doc-block-spacing)) * -2);
    margin-bottom: calc((0px + calc(4px * 16)) * 2);
    margin-bottom: calc((var(--body-top, 0px) + var(--doc-block-spacing)) * 2);
  }

  turbo-frame.missing-frame {
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
    color: #d97706;
    color: var(--pn-warning);
    grid-template-columns: 1fr;
  }

  /* --- Section title (group / introduction h1) --- */

  .doc-section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    margin: 0;
    color: #09090b;
    color: var(--pn-title);
  }

  /* Version chip next to the introduction title */
  .doc-section-title .label {
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    padding: calc(4px * 0.5) calc(4px * 2);
    padding: var(--spacing-05) var(--spacing-2);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
  }

  /* --- Examples column (sticky/scroll behavior arrives in phase E) --- */

  .doc-section-examples {
    overflow: hidden;
    width: 100%;
  }

  .doc-section-examples-content {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
  }

  .doc-section-examples-content::-webkit-scrollbar {
    display: none;
  }

  /* --- Operation layout --- */

  .operation-header {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 8);
    gap: var(--base-gap);
    container: operation-header / inline-size;
  }

  .operation-header .roles-requirements span {
    display: block;
    margin-bottom: calc(4px * 4);
    margin-bottom: var(--spacing-4);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .operation-header .roles-requirements ul {
    list-style: disc;
    list-style-position: outside;
    padding-inline-start: 1.25em;
  }

  .operation-header .roles-requirements li {
    margin-bottom: calc(4px * 2);
    margin-bottom: var(--spacing-2);
  }

  /* Header block: title + CTA on the first row, Ask AI + status chips
     grouped on the meta row below. The h2 dissolves (display: contents)
     so its pieces sit on the wrapper's grid; the title spans the 1fr
     track, which keeps it from inflating the two meta columns. */
  .operation-header > div:first-child {
    display: grid;
    grid-template-columns: max-content max-content 1fr auto;
    align-items: center;
    grid-column-gap: calc(4px * 3);
    grid-column-gap: var(--spacing-3);
    -moz-column-gap: calc(4px * 3);
         column-gap: calc(4px * 3);
    -moz-column-gap: var(--spacing-3);
         column-gap: var(--spacing-3);
    grid-row-gap: calc(4px * 2);
    grid-row-gap: var(--spacing-2);
    row-gap: calc(4px * 2);
    row-gap: var(--spacing-2);
  }

  h2.operation-title {
    display: contents;
  }

  h2.operation-title .anchor-link {
    grid-area: 1 / 1 / 2 / 4;
    align-self: start;
  }

  h2.operation-title .button {
    grid-area: 1 / 4;
    align-self: start;
  }

  /* Spanning to the last line: the CTA only occupies the title row,
     so long chip runs (Elastic) use the space under it instead of
     inflating the CTA column out of the grid. */
  h2.operation-title title-badges {
    grid-area: 2 / 2 / 3 / 5;
  }

  .operation-header > div:first-child > ask-ai {
    grid-area: 2 / 1;
  }

  @container operation-header (width < 500px) {
    .operation-header > div:first-child {
      grid-template-columns: 1fr;
    }

    h2.operation-title .anchor-link,
    h2.operation-title .button,
    h2.operation-title title-badges,
    .operation-header > div:first-child > ask-ai {
      grid-area: auto;
      justify-self: start;
    }
  }

  /* Group description sharing the grid with the operations quick access */
  .operation-group__description:has(.doc-operation-summary) {
    display: grid;
    grid-gap: calc(4px * 8) calc(4px * 12);
    grid-gap: var(--base-gap) var(--doc-inline-spacing);
    gap: calc(4px * 8) calc(4px * 12);
    gap: var(--base-gap) var(--doc-inline-spacing);
    grid-template-columns: var(--grid-ratio);
  }

  /* ================= Two-column layout ================= */

  @media (min-width: 850px) {
    .doc-section {
      --grid-ratio: minmax(50%, 2fr) minmax(250px, 525px);
    }

    .doc-operation-summary {
      grid-column: 2 / -1;
      grid-row: 1 / span 2;
    }

    .doc-section-copy {
      grid-column: 1;
    }

    #doc-introduction .doc-section-title {
      grid-column: span 2;
    }

    /* Last section fills the viewport so the scrollspy can reach it */
    .doc-section:last-child > .doc-section-content:last-child {
      min-height: calc(100vh - 64px - (calc(4px * 16) * 2));
      min-height: calc(100vh - var(--doc-nav-height) - (var(--doc-block-spacing) * 2));
    }
  }
}
/* Prose: markdown output, anchors, callouts and tables inside the doc
   content column. The markdown helper wraps output in
   .markdown-content.flow. */

@layer pn-components {
  /* Vertical rhythm composition (old global/compositions/flow.css) */
  .flow > *:not([hidden], [type="hidden"]) + * {
    margin-block-start: 1em;
    margin-block-start: var(--flow-space, 1em);
  }

  .doc-content hr {
    margin: 0;
  }

  .doc-content h1 {
    overflow-wrap: anywhere;
  }

  /* Authored highlight (markdown <mark>): accent-colored text, no
     filled box — legacy painted the text via background-clip. The UA
     yellow background must go. */
  mark {
    background: none;
    color: #025fd7;
    color: var(--pn-accent-text);
  }

  /* --- Markdown --- */

  .markdown-content {
    --flow-space: var(--spacing-4);
    position: relative;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .markdown-content [id] {
    scroll-margin-top: calc(0px + calc(4px * 16) * 2);
    scroll-margin-top: calc(var(--body-top, 0px) + var(--doc-block-spacing) * 2);
  }

  .markdown-content a:not(.button):not(.anchor-link) {
    color: #025fd7;
    color: var(--pn-accent-text);
  }

  .markdown-content a:not(.button):not(.anchor-link):hover,
  .markdown-content a:not(.button):not(.anchor-link):focus {
    text-decoration: underline;
  }

  .markdown-content p {
    line-height: 1.75;
  }

  .markdown-content p:last-child {
    margin-block-end: 0;
  }

  /* The callout preprocessing (RedCarpet::DocRenderer) injects a
     <br/> that ends up as an empty <p><br/></p> before each callout:
     collapse the stray line. A lone trailing br after text is
     invisible anyway, so this hides nothing real. */
  .markdown-content p > br:only-child {
    display: none;
  }

  /* Headings one step below the page hierarchy: prose stays quiet */
  .markdown-content h1 {
    font-size: 1.5rem;
    font-size: var(--text-2xl);
  }

  .markdown-content h2 {
    font-size: 1.25rem;
    font-size: var(--text-xl);
  }

  .markdown-content h3 {
    font-size: 1.125rem;
    font-size: var(--text-l);
  }

  .markdown-content h4 {
    font-size: 1rem;
    font-size: var(--text-base);
  }

  .markdown-content h5,
  .markdown-content h6 {
    font-size: 0.875rem;
    font-size: var(--text-sm);
  }

  .markdown-content h2,
  .markdown-content h3,
  .markdown-content h4,
  .markdown-content h5,
  .markdown-content h6 {
    --flow-space: var(--spacing-6);
  }

  .markdown-content ul,
  .markdown-content ol {
    list-style-position: outside;
    padding-left: calc(4px * 6);
    padding-left: var(--spacing-6);
  }

  .markdown-content ol {
    list-style-type: decimal;
  }

  .markdown-content ol ol {
    list-style-type: lower-alpha;
  }

  .markdown-content ul {
    list-style-type: disc;
  }

  .markdown-content ul ul {
    list-style-type: circle;
  }

  .markdown-content li {
    margin-block-start: calc(4px * 2);
    margin-block-start: var(--spacing-2);
  }

  .markdown-content li::marker {
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .markdown-content blockquote {
    border-left: 2px solid #e4e4e7;
    border-left: 2px solid var(--pn-border);
    padding-left: calc(4px * 4);
    padding-left: var(--spacing-4);
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .markdown-content img {
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
  }

  .markdown-content hr {
    margin: calc(4px * 3) 0;
    margin: var(--spacing-3) 0;
  }

  /* Unhighlighted fenced code: dark panel like the examples column */
  .markdown-content .code-block {
    display: block;
    margin-bottom: calc(4px * 6);
    margin-bottom: var(--spacing-6);
    background-color: #18181b;
    background-color: var(--pn-code-bg);
    border: 0;
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    color: #d4d4d8;
    color: var(--pn-code-text);
    line-height: 1.7;
    padding: calc(4px * 4) calc(4px * 5);
    padding: var(--spacing-4) var(--spacing-5);
    white-space: pre-wrap;
  }

  /* Collapsible blocks: accent chevron, no marker */
  .markdown-content summary {
    position: relative;
    cursor: pointer;
    list-style-type: none;
    padding-left: calc(4px * 4);
    padding-left: var(--spacing-4);
  }

  .markdown-content summary::-webkit-details-marker {
    display: none;
  }

  .markdown-content summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: calc(4px * 2);
    width: var(--spacing-2);
    height: calc(4px * 2);
    height: var(--spacing-2);
    border-right: 1.5px solid #025fd7;
    border-right: 1.5px solid var(--pn-accent);
    border-bottom: 1.5px solid #025fd7;
    border-bottom: 1.5px solid var(--pn-accent);
    transform: translateY(-70%) rotate(45deg);
    transition: transform ease-in 0.2s;
  }

  .markdown-content details[open] summary::before {
    transform: translateY(-30%) rotate(225deg);
  }

  .markdown-content details[open] summary {
    margin-bottom: calc(4px * 4);
    margin-bottom: var(--spacing-4);
  }

  /* --- Anchor links (hover to reveal, click copies the URL) --- */

  .anchor-link {
    position: relative;
  }

  /* The anchor icon and the dismiss button (injected next to it by
     the highlight controller) share every chip and geometry rule
     through one selector: same styles, same spot, they cannot drift.
     top: 0 keeps them off the inline baseline flow. */
  .anchor-link :is(svg, .dismiss-highlight) {
    position: absolute;
    top: 0;
    left: calc(4px * -8);
    left: var(--spacing-8-minus);
    z-index: 1;
    width: calc(4px * 5);
    width: var(--spacing-5);
    height: calc(4px * 5);
    height: var(--spacing-5);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    padding: calc(4px * 0.5);
    padding: var(--spacing-05);
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .anchor-link svg {
    opacity: 0;
  }

  .anchor-link:hover svg {
    opacity: 1;
  }

  .anchor-link a:hover svg {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
    color: #27272a;
    color: var(--pn-text);
  }

  .anchor-link:is(.doc-section-title > *) {
    display: flex;
    align-items: center;
  }

  .anchor-link:is(.doc-section-title > *) :is(svg, .dismiss-highlight) {
    top: calc(calc(4px * 1.5) + calc(4px * 0.25));
    top: calc(var(--spacing-1-5) + var(--spacing-px));
  }

  /* Dot rows: the dot advances the anchor by exactly one spacing-4
     (properties.css), so the icon shifts left by as much to stay in
     the shared gutter column. */
  .anchor-link:is(.dot-success > *) :is(svg, .dismiss-highlight),
  .anchor-link:is(.dot-error > *) :is(svg, .dismiss-highlight) {
    left: calc(4px * -12);
    left: var(--spacing-12-minus);
  }

  .anchor-link:is(.expandable-properties-list *) :is(svg, .dismiss-highlight) {
    left: calc(4px * -9);
    left: var(--spacing-9-minus);
  }

  @media (max-width: 850px) {
    .anchor-link :is(svg, .dismiss-highlight) {
      left: calc(4px * -5);
      left: var(--spacing-5-minus);
    }

    .anchor-link a {
      inset: 0;
    }

    .anchor-link:is(.dot-success > *) :is(svg, .dismiss-highlight),
    .anchor-link:is(.dot-error > *) :is(svg, .dismiss-highlight) {
      left: calc(4px * -9);
      left: var(--spacing-9-minus);
    }
  }

  /* --- Callouts / admonitions --- */

  .callout {
    --callout-bg-color: var(--pn-surface-muted);
    --callout-border-color: var(--pn-zinc-400);

    display: flex;
    flex-direction: column;
    align-items: start;
    position: relative;
    row-gap: calc(4px * 3);
    row-gap: var(--spacing-3);
    background-color: #f4f4f5;
    background-color: var(--callout-bg-color);
    border-left: 3px solid #a1a1aa;
    border-left: 3px solid var(--callout-border-color);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    padding: calc(4px * 4) calc(4px * 5);
    padding: var(--spacing-4) var(--spacing-5);
  }

  .callout p {
    margin: 0;
  }

  .callout a {
    color: #025fd7;
    color: var(--pn-accent-text);
  }

  .callout-info {
    --callout-bg-color: var(--callout-background-info);
    --callout-border-color: var(--callout-border-color-info);
  }

  .callout-success {
    --callout-bg-color: var(--callout-background-success);
    --callout-border-color: var(--callout-border-color-success);
  }

  .callout-warn {
    --callout-bg-color: var(--callout-background-warn);
    --callout-border-color: var(--callout-border-color-warn);
  }

  .callout-error {
    --callout-bg-color: var(--callout-background-error);
    --callout-border-color: var(--callout-border-color-error);
  }

  /* --- Tables: horizontal hairline dividers only --- */

  .doc-content table {
    width: 100%;
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    text-align: left;
    word-break: keep-all;
  }

  .doc-content th {
    border-bottom: 1px solid #e4e4e7;
    border-bottom: var(--pn-hairline);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    padding: calc(4px * 2) calc(4px * 4) calc(4px * 2) 0;
    padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) 0;
  }

  .doc-content td {
    border-bottom: 1px solid #e4e4e7;
    border-bottom: var(--pn-hairline);
    padding: calc(4px * 3) calc(4px * 4) calc(4px * 3) 0;
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) 0;
    vertical-align: top;
    word-break: break-word;
  }

  .doc-content tr:last-child td {
    border-bottom: 0;
  }

  .doc-content td ul {
    margin-top: 0;
  }
}
/* Schema properties: definition-list look. Property names in mono,
   hairline separators, boxed expandable nesting.

   JS contracts:
   - .expandable-properties-list gets .user-opened from the details
     controller (click-only, unlike .active which is also rendered on
     default-expanded lists) and .hidden from content switching.
   - The .show / .hide summary spans swap with the [open] state. */

@layer pn-components {
  .properties-list {
    display: flex;
    flex-direction: column;
    row-gap: calc(4px * 3);
    row-gap: var(--spacing-3);
    scroll-margin-top: calc(0px + calc(4px * 16) * 1.5);
    scroll-margin-top: calc(var(--body-top, 0px) + var(--doc-block-spacing) * 1.5);
  }

  /* The list ul is classless so the ul[class] reset skips it:
     drop the browser default indent and markers. */
  .properties-list > ul {
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .properties-list-title {
    margin: 0;
    font-size: 1.125rem;
    font-size: var(--text-l);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
  }

  .properties-list-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .schema-collection {
    width: 100%;
  }

  .schema-collection > .property-name {
    border-block-end: 1px solid #e4e4e7;
    border-block-end: var(--pn-hairline);
    font-size: 1.125rem;
    font-size: var(--text-l);
    padding-block-end: calc(4px * 3);
    padding-block-end: var(--spacing-3);
  }

  /* Scalar-only schema: quiet uppercase label, no type badge */
  .single-schema .properties-list-title a {
    font-size: 1.125rem;
    font-size: var(--text-l);
    text-transform: none;
    text-transform: initial;
  }

  .single-schema .property {
    border-top: 0;
    padding: 0;
  }

  .single-schema .property-name {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    text-transform: uppercase;
  }

  .single-schema .property-type {
    display: none;
  }

  .single-schema .markdown-content {
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
    padding-block-start: calc(4px * 4);
    padding-block-start: var(--spacing-4);
  }

  /* --- One property --- */

  .property {
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: calc(4px * 2);
    row-gap: var(--spacing-2);
    border-bottom: 1px solid #e4e4e7;
    border-bottom: var(--pn-hairline);
    padding-block: calc(4px * 4);
    padding-block: var(--spacing-4);
    scroll-margin-top: calc(0px + calc(4px * 16) * 1.5);
    scroll-margin-top: calc(var(--body-top, 0px) + var(--doc-block-spacing) * 1.5);
  }

  .property:last-child {
    border-bottom: 0;
  }

  .property-name {
    color: #09090b;
    color: var(--pn-title);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .property-name.dot-success {
    --dot-color: var(--pn-success);
  }

  .property-name.dot-error {
    --dot-color: var(--pn-error);
  }

  /* Fixed advance: the anchor icon offsets for dot rows (content.css)
     assume the dot shifts the title by exactly one spacing-4. The
     negative margin swallows the markup whitespace that follows
     (1ch of this same mono font). */
  .property-name.dot-success::before,
  .property-name.dot-error::before {
    display: inline-block;
    width: calc(4px * 4);
    width: var(--spacing-4);
    margin-inline-end: -1ch;
    color: var(--dot-color);
    content: "•";
    font-weight: 700;
    font-weight: var(--font-weight-bold);
  }

  .name-prefix {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
  }

  /* Name + type/required annotations row */
  .attributes {
    position: relative;
    align-items: baseline;
    gap: calc(4px * 2) calc(4px * 1.5);
    gap: var(--spacing-2) var(--spacing-1-5);
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .property .attributes > external-link > a {
    padding-block: calc(4px * 3);
    padding-block: var(--spacing-3);
  }

  /* --- Expandable nested schema (boxed) --- */

  .expandable-properties-list {
    --list-bg-color: var(--pn-bg);
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    background-color: #fafafa;
    background-color: var(--list-bg-color);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
  }

  .expandable-properties-list[aria-hidden="true"] {
    display: none;
  }

  .expandable-properties-list .properties-list > .markdown-content {
    border-block-start: 1px solid #e4e4e7;
    border-block-start: var(--pn-hairline);
    padding-block-start: calc(4px * 3);
    padding-block-start: var(--spacing-3);
    padding-inline: calc(4px * 3);
    padding-inline: var(--spacing-3);
  }

  .expandable-properties-list .properties-list > external-link {
    padding-inline: calc(4px * 3);
    padding-inline: var(--spacing-3);
  }

  .expandable-properties-list[open] {
    display: block;
    width: 100%;
  }

  /* The details controller marks the list the reader opened themselves
     with .user-opened (.active can also be server-rendered on lists
     expanded by default): that one gets the light surface, the rest
     stay page-colored — the white box tracks the user focus. */
  .expandable-properties-list.user-opened[open] {
    --list-bg-color: var(--doc-nested-background-color);
  }

  /* Toggled by JS when the content-type switches */
  .expandable-properties-list.hidden {
    display: none;
  }

  .expandable-properties-list summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    -moz-column-gap: 0.25em;
         column-gap: 0.25em;
    overflow: hidden;
    cursor: pointer;
    list-style-type: none;
    padding: calc(4px * 2) calc(4px * 3) calc(4px * 2) calc(4px * 7);
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-7);
  }

  .expandable-properties-list summary::-webkit-details-marker {
    display: none;
  }

  /* Expand toggle marker: mono +/× that picks up the accent on hover */
  .expandable-properties-list summary::before {
    content: "+";
    position: absolute;
    left: calc(4px * 3);
    left: var(--spacing-3);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .expandable-properties-list[open] > summary::before {
    content: "×";
  }

  .expandable-properties-list summary:hover {
    color: #025fd7;
    color: var(--pn-accent-text);
  }

  .expandable-properties-list summary:hover::before {
    color: #025fd7;
    color: var(--pn-accent-text);
  }

  .expandable-properties-list summary > .property-type {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.625rem;
    font-size: var(--text-xxs);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
  }

  .expandable-properties-list:not([open]) > summary .hide {
    display: none;
  }

  .expandable-properties-list[open] > summary > .show {
    display: none;
  }

  .expandable-properties-list .property {
    box-sizing: border-box;
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }
}
/* Verb pills, type/required badges, pills and security chips.

   Verb pills use a single --verb-color per verb; light mode mixes it
   with white for the soft background, dark mode flips the mix. */

@layer pn-components {
  /* --- Operation verb (GET / POST / publish / ...) --- */

  .operation-verb {
    --verb-color: var(--pn-zinc-600);
    background-color: color-mix(in srgb, #52525b, white 90%);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #52525b;
    color: var(--verb-color);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    padding: 2px calc(4px * 2);
    padding: 2px var(--spacing-2);
    text-transform: uppercase;
    white-space: nowrap;
  }

@supports (color: color-mix(in lch, red, blue)){
.operation-verb {
    background-color: color-mix(in srgb, var(--verb-color), white 90%);
  }
}

  .operation-verb.get,
  .operation-verb.head,
  .operation-verb.query {
    --verb-color: var(--blue);
  }

  .operation-verb.post {
    --verb-color: var(--pn-success);
  }

  .operation-verb.put,
  .operation-verb.patch,
  .operation-verb.publish {
    --verb-color: var(--pn-warning);
  }

  .operation-verb.delete {
    --verb-color: var(--pn-error);
  }

  .operation-verb.subscribe {
    --verb-color: var(--purple);
  }

  .dark-theme .operation-verb {
    background-color: color-mix(in srgb, var(--verb-color), black 75%);
    color: color-mix(in srgb, var(--verb-color), white 40%);
  }

  .anchor-link .operation-verb {
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  /* Sidebar tree shows the verb as plain colored text; re-assert the
     navigation.css (pn-layout) reset since this layer wins over it.
     Placed after the .dark-theme override on purpose: same specificity,
     later source wins. */
  .navigation__operation .operation-verb {
    background-color: transparent;
    border: 0;
    padding: 0;
  }

  /* --- Pills --- */

  .pill {
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    font-size: 0.625rem;
    font-size: var(--text-xxs);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    padding: 0.125em calc(4px * 2);
    padding: 0.125em var(--spacing-2);
    text-transform: uppercase;
    vertical-align: middle;
  }

  /* Same accent treatment as the active nav pills: the customer
     primary color, not a semantic warning tone. */
  .pill-deprecated {
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
    color: #025fd7;
    color: var(--pn-accent-text);
    height: -moz-fit-content;
    height: fit-content;
    white-space: nowrap;
  }

  /* --- Property badges (type, required, ...) --- */

  .badge {
    font-size: 0.625rem;
    font-size: var(--text-xxs);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  /* Hoverable object type: dotted underline + attr() tooltip */
  .badge.property-type[data-type-content] {
    position: relative;
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
    text-underline-offset: 3px;
  }

  .badge.property-type[data-type-content]:hover::before,
  .badge.property-type[data-type-content]:hover::after {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.2s ease-in;
    z-index: 1;
  }

  .badge.property-type[data-type-content]:hover::before {
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    bottom: calc(100% + calc(4px * 3));
    bottom: calc(100% + var(--spacing-3));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    box-shadow: var(--pn-shadow-md);
    content: attr(data-type-content);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
    text-transform: none;
    text-transform: initial;
    width: -moz-max-content;
    width: max-content;
  }

  .badge.property-type[data-type-content]:hover::after {
    border-style: solid;
    border-width: 7px;
    border-color: #ffffff transparent transparent transparent;
    border-color: var(--pn-surface) transparent transparent transparent;
    bottom: 100%;
    content: "";
    filter: drop-shadow(0 1.5px 0px #e4e4e7);
    filter: drop-shadow(0 1.5px 0px var(--pn-border));
    height: 7px;
    width: 14px;
  }

  .badge.required {
    color: #dc2626;
    color: var(--pn-error);
  }

  .badge.discriminator {
    color: #800080;
    color: var(--purple);
  }

  .badge.pill {
    position: relative;
  }

  .badge.deprecated {
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .badge.beta {
    color: #800080;
    color: var(--purple);
  }

  /* Customer-defined badge: colors arrive as inline --custom-state-* */
  .badge.custom-state {
    background-color: transparent;
    background-color: var(--custom-state-bg, transparent);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #800080;
    color: var(--custom-state-color, var(--purple));
    padding: calc(4px * 0.5) calc(4px * 1.5);
    padding: var(--spacing-05) var(--spacing-1-5);
  }

  /* --purple (#800080) is too dark to read on the dark background;
     lighten it the same way verb pills lighten their text. Customer
     inline --custom-state-color still wins over the fallback. */
  .dark-theme .badge.discriminator,
  .dark-theme .badge.beta {
    color: color-mix(in srgb, #800080, white 45%);
  }

@supports (color: color-mix(in lch, red, blue)){
.dark-theme .badge.discriminator,
  .dark-theme .badge.beta {
    color: color-mix(in srgb, var(--purple), white 45%);
  }
}

  .dark-theme .badge.custom-state {
    color: color-mix(in srgb, #800080, white 45%);
  }

@supports (color: color-mix(in lch, red, blue)){
.dark-theme .badge.custom-state {
    color: var(--custom-state-color, color-mix(in srgb, var(--purple), white 45%));
  }
}

  .attributes .badge.custom-state {
    background-color: transparent;
    padding: 0;
  }

  .badge.additional-property {
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: #71717a;
    color: var(--pn-text-secondary);
    float: right;
    padding: calc(4px * 0.5) calc(4px * 2);
    padding: var(--spacing-05) var(--spacing-2);
    text-transform: none;
  }

  /* --- Badges in operation / section titles ---
     (element selector: the async operation header renders the
     <title-badges> element without the .title-badges class) --- */

  .operation-title title-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  /* Same box metrics as the security chips below (inline-flex included:
     it keeps both heights identical); customer-defined badges keep
     their inline colors. */
  .operation-title title-badges .badge {
    display: inline-flex;
    align-items: center;
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    /* body line-height, not the h2's: keeps the same height as the
       security chips */
    line-height: 1.6;
    line-height: var(--text-line-height);
    padding: calc(4px * 0.5) calc(4px * 3);
    padding: var(--spacing-05) var(--spacing-3);
    text-transform: none;
    white-space: nowrap;
  }

  /* Deprecated keeps the accent voice inside the same chip box:
     derived from the customer color, it stays readable whatever the
     configuration. The webhook chip stays quiet like the security
     ones, its icon says the rest. */
  .operation-title title-badges .badge.pill-deprecated {
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
    border-color: color-mix(in srgb, #025fd7, transparent 70%);
    color: #025fd7;
    color: var(--pn-accent-text);
  }

@supports (color: color-mix(in lch, red, blue)){
.operation-title title-badges .badge.pill-deprecated {
    border-color: color-mix(in srgb, var(--pn-accent), transparent 70%);
  }
}

  .operation-title title-badges .badge.custom-state {
    background-color: #ffffff;
    background-color: var(--custom-state-bg, var(--pn-surface));
    color: #71717a;
    color: var(--custom-state-color, var(--pn-text-secondary));
  }

  .doc-section-title .attributes .beta,
  .operation-title .attributes .beta {
    background-color: #f4f0f6;
    background-color: var(--light-purple);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    height: -moz-fit-content;
    height: fit-content;
    padding: calc(4px * 0.5) calc(4px * 2);
    padding: var(--spacing-05) var(--spacing-2);
    text-transform: none;
    text-transform: initial;
  }

  /* --light-purple stays near-white: flip the chip like verb pills */
  .dark-theme .doc-section-title .attributes .beta,
  .dark-theme .operation-title .attributes .beta {
    background-color: color-mix(in srgb, #800080, black 70%);
  }

@supports (color: color-mix(in lch, red, blue)){
.dark-theme .doc-section-title .attributes .beta,
  .dark-theme .operation-title .attributes .beta {
    background-color: color-mix(in srgb, var(--purple), black 70%);
  }
}

  .operation-title title-badges .badge.webhook {
    gap: calc(4px * 1.5);
    gap: var(--spacing-1-5);
  }

  .operation-title title-badges .badge.webhook svg {
    display: block;
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
  }

  .operation-title title-badges .badge.webhook svg path {
    fill: currentColor;
  }

  /* --- Security requirement chips: quiet outline pills --- */

  .security-badges {
    display: flex;
    flex-wrap: wrap;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .security-badges .badge {
    display: inline-block;
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding: 0;
    text-transform: none;
    text-transform: initial;
    vertical-align: middle;
  }

  .security-badges .badge-security a {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * 1.5);
    gap: var(--spacing-1-5);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding: calc(4px * 0.5) calc(4px * 3);
    padding: var(--spacing-05) var(--spacing-3);
  }

  /* Shield mark (legacy chip icon as a currentColor silhouette: it
     follows the text through hover and dark mode) */
  .security-badges .badge-security a::before {
    content: "";
    flex-shrink: 0;
    width: calc(4px * 2);
    width: var(--spacing-2);
    height: calc(4px * 2.5);
    height: var(--spacing-2-5);
    background-color: currentColor;
    -webkit-mask: url(https://bump.sh/packs/static/check-security-ef97b67e4a3c2894112c.svg) no-repeat center / contain;
            mask: url(https://bump.sh/packs/static/check-security-ef97b67e4a3c2894112c.svg) no-repeat center / contain;
  }

  .security-badges .badge-security a:hover {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
    color: #27272a;
    color: var(--pn-text);
    text-decoration: none;
  }
}
/* Operation odds and ends: endpoint summary bar, back link, tooltips,
   content-type switching, alternative (oneOf/anyOf) tabs, loading
   skeletons, show-more fade and deep-link highlight states. */

/* Leading-edge twin of --pn-scroll-fade (example.css) for the oneOf
   tab strip: registered so it interpolates in the keyframes below. */
@property --pn-scroll-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@layer pn-components {
  /* --- Endpoint summary (verb + path): surface card --- */

  operation-summary {
    --verb-size: var(--text-xs);
    --path-line-height: 1.6;

    display: flex;
    align-items: baseline;
    -moz-column-gap: calc(4px * 2);
         column-gap: calc(4px * 2);
    -moz-column-gap: var(--spacing-2);
         column-gap: var(--spacing-2);
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    color: #09090b;
    color: var(--pn-title);
    overflow-wrap: anywhere;
    padding: calc(4px * 2) calc(4px * 3);
    padding: var(--spacing-2) var(--spacing-3);
  }

  operation-summary .operation-verb {
    font-size: var(--verb-size);
  }

  operation-summary .operation-path {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.875rem;
    font-size: var(--text-sm);
    line-height: var(--path-line-height);
  }

  /* Small variant (quick access list): plain row, no card chrome */
  operation-summary[data-summary-size="small"] {
    --verb-size: var(--text-xxs);
    --path-line-height: 1.5;

    background-color: transparent;
    border: 0;
    padding: 0;
  }

  operation-summary[data-summary-size="small"] .operation-path {
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  /* Operations quick access block (group header) */
  .doc-operation-summary operation-summary {
    width: 100%;
  }

  .doc-operation-summary .example-content {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    max-height: 170px;
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  /* --- Back link (model pages) --- */

  a.doc-back-link:not([href]) {
    display: none;
  }

  a.doc-back-link {
    position: absolute;
    right: 0;
    top: calc(4px * 0.5);
    top: var(--spacing-05);
    z-index: 3;
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  a.doc-back-link:hover {
    color: #27272a;
    color: var(--pn-text);
    text-decoration: none;
  }

  .doc-back-link-container {
    position: relative;
    z-index: 2;
  }

  /* --- Tooltips (aria-label bubbles) --- */

  .tooltipped {
    --tooltip-spacing: calc(100% + var(--spacing-1));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .tooltipped::after {
    -webkit-font-smoothing: subpixel-antialiased;
    position: absolute;
    background: #27272a;
    background: var(--pn-zinc-800);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #fafafa;
    color: var(--pn-zinc-50);
    content: attr(aria-label);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    letter-spacing: normal;
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
    pointer-events: none;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: pre;
    word-wrap: break-word;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  }

  .tooltipped:active::after {
    opacity: 0;
  }

  .tooltipped:hover::after {
    opacity: 1;
    visibility: visible;
  }

  .tooltipped[data-tooltip-x="e"]::after {
    right: var(--tooltip-spacing);
  }

  .tooltipped[data-tooltip-x="w"]::after {
    left: var(--tooltip-spacing);
  }

  .tooltipped[data-tooltip-y="n"]::after {
    bottom: var(--tooltip-spacing);
  }

  .tooltipped[data-tooltip-y="s"]::after {
    bottom: auto;
    bottom: initial;
    top: var(--tooltip-spacing);
  }

  .tooltipped[data-tooltip-y][data-tooltip-x="w"]::after {
    left: 0;
  }

  .tooltipped[data-tooltip-y][data-tooltip-x="e"]::after {
    right: calc(4px * -3);
    right: var(--spacing-3-minus);
  }

  /* Floating tooltip created by the branch-tooltip controller */
  .branch-tooltip {
    position: fixed;
    z-index: 9999;
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    box-shadow: var(--pn-shadow-md);
    color: #27272a;
    color: var(--pn-text);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    max-width: 300px;
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
  }

  .branch-tooltip.hidden {
    display: none;
  }

  /* --- Content-type switching (multiple-content controller) --- */

  .multiple-content {
    container: multiple-content / inline-size;
    position: relative;
    z-index: 2;
  }

  /* Quiet text trigger: strip the chip chrome the generic dropdown
     base (components/dropdown.css) puts on triggers. */
  .multiple-content .content-type .dropdown-title {
    background: transparent;
    border: 0;
    min-height: 0;
    padding: 0;
  }

  .multiple-content .content-type .dropdown-title span {
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  .multiple-content .content-type .menu-dropdown {
    right: 0;
  }

  .multiple-content .content-type .menu-dropdown a {
    padding-right: calc(4px * 8);
    padding-right: var(--spacing-8);
  }

  .multiple-content .content-type .menu-dropdown a:not([aria-selected="true"]) svg {
    display: none;
  }

  .multiple-content > [aria-hidden="true"],
  .multiple-content [data-multiple-content-target="content"][aria-hidden="true"] {
    display: none;
  }

  @container multiple-content (width < 300px) {
    .multiple-content .properties-list-title {
      display: flex;
      flex-direction: column;
      gap: calc(4px * 2);
      gap: var(--gap-small);
    }
  }

  .multiple-content .properties-list-title + .markdown-content {
    border-top: 0;
    padding-top: 0;
  }

  .multiple-content > .attributes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  request-bodies.multiple-content > .content-type {
    position: absolute;
    right: 0;
    top: calc(4px * 0.5);
    top: var(--spacing-05);
    z-index: 3;
  }

  @container multiple-content (width < 400px) {
    request-bodies.multiple-content > .content-type {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      left: 0;
      top: calc(4px * 6);
      top: var(--spacing-6);
      height: calc(4px * 10);
      height: var(--spacing-10);
      padding: 0;
      width: 100%;
    }

    request-bodies.multiple-content > .content-type .menu-dropdown {
      left: 0;
    }

    request-bodies.multiple-content .properties-list-title {
      margin-block-end: calc(4px * 10);
      margin-block-end: var(--spacing-10);
    }
  }

  /* --- Alternatives (oneOf/anyOf): underline tabs --- */

  .combinator {
    display: flex;
    flex-direction: column;
    row-gap: calc(4px * 3);
    row-gap: var(--spacing-3);
    max-width: calc(100vw - calc(4px * 12) * 2);
    max-width: calc(100vw - var(--doc-inline-spacing) * 2);
    scroll-margin-top: calc(4px * -8);
    scroll-margin-top: var(--spacing-8-minus);
  }

  .combinator__header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    gap: calc(4px * 4);
    gap: var(--spacing-4);
    color: #27272a;
    color: var(--pn-text);
  }

  .combinator__header::after {
    border-bottom: 1px solid #e4e4e7;
    border-bottom: var(--pn-hairline);
    bottom: -1px;
    content: "";
    left: 0;
    position: absolute;
    width: 100%;
  }

  .combinator__type {
    flex-shrink: 0;
    margin-block-end: 0;
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  /* Tab panels are focusable (tabindex=0) and fragment navigation
     focuses them on shared-link arrival: the UA ring would double the
     highlight ring. The tabs themselves keep their focus style. */
  .combinator [role="tabpanel"]:focus {
    outline: 0;
  }

  /* Scrollable tab strip. Edge fades hint at the off-screen tabs:
     same scroll-driven mask recipe as the examples column — the
     content itself fades to transparency, so it works over any
     background in both modes (the old scroll shadows glowed white on
     the dark page). The leading fade only appears once scrolled, the
     trailing one dies at the end of the strip; browsers without
     scroll-driven animations simply clip (0px initial values). */
  .combinator .tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 1;
    height: 100%;
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      calc(var(--pn-scroll-fade-start) / 4),
      black var(--pn-scroll-fade-start),
      black calc(100% - var(--pn-scroll-fade)),
      calc(100% - var(--pn-scroll-fade) / 4),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      calc(var(--pn-scroll-fade-start) / 4),
      black var(--pn-scroll-fade-start),
      black calc(100% - var(--pn-scroll-fade)),
      calc(100% - var(--pn-scroll-fade) / 4),
      transparent
    );
    animation: pn-tabs-unfade linear both;
    animation-timeline: scroll(self inline);
  }

  @keyframes pn-tabs-unfade {
    0% {
      --pn-scroll-fade-start: 0px;
      --pn-scroll-fade: 40px;
    }

    8%,
    92% {
      --pn-scroll-fade-start: 40px;
      --pn-scroll-fade: 40px;
    }

    100% {
      --pn-scroll-fade-start: 40px;
      --pn-scroll-fade: 0px;
    }
  }

  .combinator .tab {
    position: relative;
    flex-wrap: nowrap;
    flex-shrink: 0;
    color: #71717a;
    color: var(--pn-text-secondary);
    padding: calc(4px * 2);
    padding: var(--spacing-2);
  }

  .combinator .tab:hover {
    color: #27272a;
    color: var(--pn-text);
    text-decoration: none;
  }

  .combinator .tab > .property-type {
    background: 0;
    padding-inline-end: revert;
  }

  .combinator .tab > .property-type:hover::before,
  .combinator .tab > .property-type:hover::after {
    content: none;
  }

  .combinator .tab > .pill-deprecated {
    padding: 0.125em calc(4px * 2) 0;
    padding: 0.125em var(--spacing-2) 0;
    top: 0;
  }

  .combinator .tab[aria-selected="true"] {
    border-bottom: 2px solid #025fd7;
    border-bottom: 2px solid var(--pn-accent);
    color: #09090b;
    color: var(--pn-title);
  }

  .combinator > .properties-list {
    border: 0;
    margin-block-start: 0;
  }

  .combinator > .properties-list > ul > li:first-child {
    border-top: 0;
  }

  .combinator > [data-tabs-target="panel"] {
    display: flex;
    flex-direction: column;
    border: 0;
    padding: 0;
    row-gap: calc(4px * 3);
    row-gap: var(--spacing-3);
  }

  .combinator > [data-tabs-target="panel"] > .properties-list > ul:first-child {
    border-block-start: 0;
  }

  .combinator > [data-tabs-target="panel"][aria-hidden="true"] {
    display: none;
  }

  /* --- Skeleton lines --- */

  /* Soft opacity pulse instead of a shimmer sweep: quieter, and it
     works unchanged on any surface (light page, dark cards, dark
     theme). */
  .skeleton-line {
    display: block;
    background-color: #e4e4e7;
    background-color: var(--skeleton-color);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    height: calc(4px * 3);
    height: var(--spacing-3);
    max-width: 100%;
    animation: pn-skeleton-pulse 2s ease-in-out infinite;
  }

  .skeleton-line[data-length="xl"] {
    width: 90%;
  }

  .skeleton-line[data-length="l"] {
    width: 75%;
  }

  .skeleton-line[data-length="m"] {
    width: 60%;
  }

  .skeleton-line[data-length="s"] {
    width: 45%;
  }

  .skeleton-line[data-length="xs"] {
    width: 30%;
  }

  .skeleton-line[data-length="heading"] {
    margin-bottom: calc(4px * 8);
    margin-bottom: var(--spacing-8);
    width: 40%;
  }

  .skeleton-line[data-length="drawer-heading"] {
    margin-top: calc(4px * 4);
    margin-top: var(--spacing-4);
    margin-bottom: calc(4px * 8);
    margin-bottom: var(--spacing-8);
    width: 40%;
  }

  /* --- Full page loading state --- */

  .doc-loading-state h1 {
    font-size: 1.5rem;
    font-size: var(--text-2xl);
    text-align: center;
  }

  .doc-loading-state .loader {
    animation: loader-1 4.8s linear infinite;
    height: 48px;
    width: 48px;
  }

  .doc-loading-state .loader span {
    animation: loader-2 2.2s linear infinite;
    clip: rect(0, 48px, 48px, 24px);
    display: block;
    height: 48px;
    inset: 0;
    margin: auto;
    position: absolute;
    width: 48px;
  }

  .doc-loading-state .loader span::after {
    animation: loader-3 2.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    border: 4px solid #025fd7;
    border: 4px solid var(--pn-accent);
    border-radius: 50%;
    clip: rect(0, 48px, 48px, 24px);
    content: "";
    height: 48px;
    inset: 0;
    margin: auto;
    position: absolute;
    width: 48px;
  }

  .doc-loading-state .doc-navigation .skeleton-container {
    flex-grow: 1;
    padding: 0 calc(4px * 6);
    padding: 0 var(--spacing-6);
  }

  .doc-loading-state .doc-navigation .skeleton-container .skeleton-line:nth-child(odd) {
    margin-top: calc(4px * 8);
    margin-top: var(--spacing-8);
    margin-bottom: calc(4px * 6);
    margin-bottom: var(--spacing-6);
    width: calc(4px * 16);
    width: var(--spacing-16);
  }

  .doc-loading-state .doc-section {
    padding: calc(4px * 16) calc(4px * 12);
    padding: var(--doc-block-spacing) var(--doc-inline-spacing);
  }

  .doc-loading-state .doc-section-title .skeleton-line {
    width: calc(4px * 40);
    width: var(--spacing-40);
  }

  .doc-loading-state .doc-section-copy .skeleton-line:last-child {
    width: calc(4px * 20);
    width: var(--spacing-20);
  }

  .doc-loading-state portal-example header,
  .doc-loading-state portal-example .example-body {
    display: flex;
  }

  .doc-loading-state portal-example header .skeleton-line,
  .doc-loading-state portal-example .example-body .skeleton-line {
    animation: none;
  }

  .doc-loading-state portal-example header {
    min-height: 41px;
  }

  /* Colors come from the generic portal-example skeleton rules below */
  .doc-loading-state portal-example header .skeleton-line {
    width: calc(4px * 20);
    width: var(--spacing-20);
  }

  .doc-loading-state portal-example .example-body {
    min-height: 45px;
  }

  .doc-loading-state portal-example .example-body .skeleton-line {
    background-color: #3f3f46;
    background-color: var(--pn-zinc-700);
    width: calc(4px * 40);
    width: var(--spacing-40);
  }

  .doc-loading-state .loader-container {
    display: flex;
    flex-direction: column;
    place-items: center;
    padding: calc(4px * 12) calc(4px * 6);
    padding: var(--spacing-12) var(--spacing-6);
  }

  .doc-loading-state .loader-container .loader-text {
    margin-top: calc(4px * 10);
    margin-top: var(--spacing-10);
  }

  .doc-loading-state.rendering-error h1 {
    color: #dc2626;
    color: var(--pn-error);
  }

  .doc-loading-state.rendering-error .loader {
    visibility: hidden;
  }

  .doc-loading-state.rendering-error .skeleton-line {
    animation: none;
  }

  @media (min-width: 500px) {
    .doc-loading-state .loader-container {
      padding: calc(4px * 16) calc(4px * 8);
      padding: var(--spacing-16) var(--spacing-8);
    }
  }

  @media (min-width: 850px) {
    .doc-loading-state .loader-container {
      padding: calc(4px * 16);
      padding: var(--spacing-16);
    }
  }

  @media (max-width: 850px) {
    .doc-loading-state .doc-content .doc-section-examples {
      overflow: hidden;
    }
  }

  /* Vertical rhythm for loose lines in the copy column */
  .doc-section--column > .skeleton-line + .skeleton-line {
    margin-block-start: calc(4px * 3);
    margin-block-start: var(--spacing-3);
  }

  /* Boxed skeleton rows (properties list placeholder) */
  .doc-section--column .skeleton-block {
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
  }

  .doc-section--column .skeleton-row {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 4);
    gap: var(--spacing-4);
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  .doc-section--column .skeleton-row + .skeleton-row {
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
  }

  /* Skeleton example cards stack without the usual content wrapper */
  .doc-section-examples > portal-example + portal-example {
    margin-block-start: calc(4px * 6);
    margin-block-start: var(--spacing-6);
  }

  /* On the dark code panel the page skeleton color would glow:
     quiet white-alpha lines instead. */
  portal-example .skeleton-line {
    background-color: rgba(255, 255, 255, 0.08);
  }

  /* Endpoint sample header: a muted hint of the customer accent */
  portal-example[data-example-theme="custom"] header .skeleton-line {
    background-color: color-mix(in srgb, color-mix(in srgb, #025fd7, white 55%) 45%, transparent);
  }

@supports (color: color-mix(in lch, red, blue)){
portal-example[data-example-theme="custom"] header .skeleton-line {
    background-color: color-mix(in srgb, var(--pn-accent-on-dark) 45%, transparent);
  }
}

  /* --- Show more (long generated descriptions) --- */

  [data-controller*="show-more"] {
    position: relative;
  }

  [data-controller*="show-more"].collapsed {
    overflow: hidden;
  }

  [data-controller*="show-more"].collapsed::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fafafa 75%);
    background: linear-gradient(180deg, var(--transparent-bg-color) 0%, var(--bg-color) 75%);
    bottom: 0;
    content: "";
    height: calc(4px * 15);
    height: var(--spacing-15);
    left: 0;
    position: absolute;
    width: 100%;
  }

  .expandable-properties-list .collapsed::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--list-bg-color) 75%);
    background: linear-gradient(180deg, var(--transparent-bg-color) 0%, var(--list-bg-color) 75%);
  }

  /* Pill chrome shared with the search dialog's "show more" button */
  .show-more-button {
    height: auto;
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--pn-shadow-sm);
    color: #27272a;
    color: var(--pn-text);
    cursor: pointer;
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    padding: calc(4px * 1.5) calc(4px * 3);
    padding: var(--spacing-1-5) var(--spacing-3);
    transition: background-color ease-out 0.1s;
    transition: var(--theme-change-transition);
  }

  .show-more-button:hover {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
    color: #09090b;
    color: var(--pn-title);
  }

  /* Floating over the collapsed description */
  [data-controller*="show-more"] .show-more-button {
    position: absolute;
    bottom: calc(4px * 2);
    bottom: var(--spacing-2);
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
  }

  /* --- Deep-link highlight (highlight controller adds .shared) --- */

  /* The chip look and the position come from the shared
     .anchor-link :is(svg, .dismiss-highlight) rules (doc/content.css):
     the button only adds its glyph and stacking. font-size: 0 (not
     text-indent) hides the label text: a huge indent would get the
     pseudo bars culled from paint, like the dark-mode toggle knob was. */
  .dismiss-highlight {
    display: none;
    z-index: 2;
    font-size: 0;
  }

  /* × glyph drawn with pseudo bars */
  .dismiss-highlight::before,
  .dismiss-highlight::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(4px * 2.5);
    width: var(--spacing-2-5);
    height: 1.5px;
    background-color: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .dismiss-highlight::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .dismiss-highlight:hover {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
    color: #27272a;
    color: var(--pn-text);
  }

  .highlight-container {
    position: relative;
  }

  .highlight-container:is(.markdown-content *) {
    width: -moz-fit-content;
    width: fit-content;
  }

  .highlight-container.shared .dismiss-highlight {
    display: block;
  }

  /* Accent-soft ring around the shared element — same mechanics as the
     legacy theme: the ring stretches into the left gutter so its
     border runs under the middle of the dismiss button, and shrinks in
     nested rows where the gutter (and the button) sit closer. The
     stacking context plus the negative z-index paint the veil behind
     the text instead of over it, without letting it slip under
     ancestor backgrounds. */
  .highlight-container.shared {
    z-index: 0;
  }

  .highlight-container.shared::after {
    --padding-block: var(--spacing-4);
    /* Derived from the anchor-icon geometry (content.css): the icon
       sits at -spacing-8 and is spacing-5 wide, so this stretch puts
       the ring border under its center. */
    --padding-inline: calc(var(--spacing-8) - var(--spacing-5) / 2);

    content: "";
    position: absolute;
    z-index: -1;
    top: calc(calc(4px * 4) * -1);
    top: calc(var(--padding-block) * -1);
    bottom: calc(calc(4px * 4) * -1);
    bottom: calc(var(--padding-block) * -1);
    left: calc(calc(calc(4px * 8) - calc(4px * 5) / 2) * -1);
    left: calc(var(--padding-inline) * -1);
    width: 100%;
    box-sizing: content-box;
    background-color: color-mix(in srgb, #025fd7, transparent 95%);
    border: 1px solid color-mix(in srgb, #025fd7, transparent 60%);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    padding: calc(4px * 4) calc(calc(4px * 8) - calc(4px * 5) / 2);
    padding: var(--padding-block) var(--padding-inline);
    pointer-events: none;
  }

@supports (color: color-mix(in lch, red, blue)){
.highlight-container.shared::after {
    background-color: color-mix(in srgb, var(--pn-accent), transparent 95%);
    border: 1px solid color-mix(in srgb, var(--pn-accent), transparent 60%);
  }
}

  .highlight-container.shared.properties-list::after {
    padding-bottom: 0;
  }

  .highlight-container.shared.property::after {
    --padding-block: 0px;
    bottom: 0;
    top: -1px;
  }

  /* The row hairlines would poke past the ring's rounded corners:
     pause them while the row is highlighted. */
  .property.shared,
  .property:has(+ .property.shared) {
    border-bottom-color: transparent;
  }

  .highlight-container.shared.combinator::after {
    --padding-block: 0px;
    bottom: calc(4px * -6);
    bottom: var(--spacing-6-minus);
    top: 0;
  }

  .highlight-container.shared.combinator:is(details *)::after {
    bottom: calc(4px * -3);
    bottom: var(--spacing-3-minus);
    top: calc(4px * -1);
    top: var(--spacing-1-minus);
    left: calc(4px * -6);
    left: var(--spacing-6-minus);
    padding-inline: calc(4px * 6);
    padding-inline: var(--spacing-6);
  }

  /* Nested rows: the icon gutter is -36px there and the row has its
     own inline padding, which lands the button center 14px left of
     the row — the ring border follows it, overflowing as much on the
     right to stay balanced. */
  .highlight-container.shared:is(.expandable-properties-list *)::after {
    left: -15px;
    padding-inline: 14px;
  }

  @media (max-width: 850px) {
    .highlight-container.shared::after {
      /* Same derivation for the mobile icon spot (-spacing-5) */
      --padding-inline: calc(var(--spacing-5) / 2);
    }
  }
}

@keyframes pn-skeleton-pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes loader-1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(220deg);
  }
}

@keyframes loader-3 {
  0% {
    transform: rotate(-140deg);
  }

  50% {
    transform: rotate(-160deg);
  }

  100% {
    transform: rotate(140deg);
  }
}

/* Examples column and portal-example cards: the dark code panel, in
   light and dark page modes alike. Only the chrome (border) adjusts
   with the theme; code colors are identical in both.

   JS contracts (do not rename):
   - .sticky-scrollable set in templates on .doc-section-examples;
   - .example-content / [data-doc-examples-target="example"].active
     switched by the doc-examples controller;
   - .copy button: the doc-example controller swaps aria-label to
     "Copied" for two seconds (tooltip text + checkmark state below);
   - .dropdown[aria-expanded] toggled by the dropdown controller. */

/* Scroll-driven fade length for the examples column (registered so it
   interpolates; see the sticky column rules below). */
@property --pn-scroll-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@layer pn-components {
  /* --- Sticky examples column (>= 850px) --- */

  @media (min-width: 850px) {
    /* The introduction examples keep floating in the copy (pn-layout
       rules); this layer would beat them, hence the exclusion. */
    .doc-section-examples:not(#doc-introduction *) {
      display: flex;
      position: sticky;
      top: calc(0px + 64px + calc(4px * 8));
      top: calc(var(--body-top, 0px) + var(--doc-nav-height) + var(--base-gap));
      flex-direction: column;
      margin-bottom: 0;
      padding-bottom: calc(4px * 5);
      padding-bottom: var(--spacing-5);
    }

    .doc-section-examples.sticky-scrollable {
      max-height: calc(100vh - (calc(4px * 8) * 4));
      max-height: calc(100vh - (var(--base-gap) * 4));
    }

    /* Bottom fade hinting there is more to scroll: a mask fades the
       content itself to transparency, so it works over the dark code
       panel and the page background alike, in both modes. The fade is
       scroll-driven — gone once scrolled to the end, and inert when
       the column does not scroll (inactive timeline keeps the
       registered --pn-scroll-fade at its 0px initial value, which is
       also the fallback in browsers without scroll-driven support). */
    .doc-section-examples.sticky-scrollable .doc-section-examples-content {
      /* The bare calc() between the stops is an interpolation hint:
         it pulls the fade's midpoint close to the edge, so the text
         dims gently and only dissolves on the last few pixels instead
         of smearing into a gray band. */
      -webkit-mask-image: linear-gradient(
        to bottom,
        black calc(100% - var(--pn-scroll-fade)),
        calc(100% - var(--pn-scroll-fade) / 4),
        transparent
      );
      mask-image: linear-gradient(
        to bottom,
        black calc(100% - var(--pn-scroll-fade)),
        calc(100% - var(--pn-scroll-fade) / 4),
        transparent
      );
      animation: pn-examples-unfade linear both;
      animation-timeline: scroll(self block);
    }

    @keyframes pn-examples-unfade {
      0%,
      92% {
        --pn-scroll-fade: 40px;
      }

      100% {
        --pn-scroll-fade: 0px;
      }
    }

    .doc-section-examples .doc-section-examples-content {
      height: 100%;
      overflow: auto;
    }

    /* Cards must not compress when the column inner-scrolls */
    .doc-section-examples .doc-section-examples-content > * {
      flex-shrink: 0;
    }
  }

  /* --- Example card --- */

  portal-example {
    --example-border-color: var(--pn-code-border);

    container-type: inline-size;
    background-color: #18181b;
    background-color: var(--pn-code-bg);
    border: 1px solid #27272a;
    border: 1px solid var(--example-border-color);
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    color: #d4d4d8;
    color: var(--pn-code-text);
  }

  /* Panel colors stay identical in dark mode; only the hairline
     lightens so the card still detaches from the near-black page. */
  .dark-theme portal-example {
    --example-border-color: var(--pn-zinc-700);
  }

  portal-example:not([hidden]) {
    display: flex;
    flex-direction: column;
  }

  portal-example.code-sample {
    z-index: 15;
  }

  /* --- Header bar --- */

  portal-example header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: 0;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    border-bottom: 1px solid var(--example-border-color);
    /* zinc-300, not 400: the title is the panel's label, it should
       read as easily as the code below it (11.99:1 vs 6.9) */
    color: #d4d4d8;
    color: var(--pn-zinc-300);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  /* Webhook code samples render no body: the divider would poke past
     the bottom radius. */
  portal-example header:last-child {
    border-bottom: 0;
  }

  portal-example header .title {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 4px calc(4px * 2);
    gap: var(--spacing-1) var(--spacing-2);
    min-width: 0;
  }

  /* Endpoint sample (verb + path): the customer accent carries into
     the panel through its readable-on-dark derivative. The explorer
     request panel shows the same endpoint title but keeps the dark
     theme (legacy renders "custom" as a colored panel). */
  portal-example[data-example-theme="custom"] header .title,
  portal-example.request header .title {
    color: color-mix(in srgb, #025fd7, white 55%);
    color: var(--pn-accent-on-dark);
  }

  /* AsyncAPI operations and webhooks render verb + path straight in
     the header, without the .title wrapper of REST example panels:
     same accent voice (the crop comes from the shared endpoint_title
     structure, like REST). */
  portal-example[data-example-theme="custom"] header:not(:has(.title)) {
    color: color-mix(in srgb, #025fd7, white 55%);
    color: var(--pn-accent-on-dark);
  }

  portal-example header span[dir="rtl"] {
    flex: 1;
    min-width: 0;
    direction: rtl;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  portal-example header .header-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  /* --- Dropdowns (language / example selectors): quiet dark chips.
     Structure and behavior come from components/dropdown.css; only the
     dark colorway is declared here. --- */

  /* Header menus anchor to the header itself, like the old bundle */
  portal-example header .dropdown {
    position: static;
    position: initial;
  }

  portal-example .dropdown-title {
    display: flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    min-height: 0;
    background-color: #27272a;
    background-color: var(--pn-zinc-800);
    border: 0;
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #d4d4d8;
    color: var(--pn-zinc-300);
    padding: 4px calc(4px * 2);
    padding: var(--spacing-1) var(--spacing-2);
    transition: background-color 150ms ease;
    transition: background-color var(--base-duration) var(--base-timing);
    white-space: nowrap;
  }

  portal-example .dropdown:hover .dropdown-title {
    background-color: #3f3f46;
    background-color: var(--pn-zinc-700);
    border-color: transparent;
    color: #e4e4e7;
    color: var(--pn-zinc-200);
  }

  /* Menu: dark popover matching the panel */
  portal-example .menu-dropdown {
    background-color: #27272a;
    background-color: var(--pn-zinc-800);
    border: 1px solid #3f3f46;
    border: 1px solid var(--pn-zinc-700);
  }

  portal-example header .menu-dropdown {
    right: calc(4px * 2);
    right: var(--spacing-2);
    top: calc(100% - calc(4px * 2));
    top: calc(100% - var(--spacing-2));
  }

  portal-example .menu-dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #d4d4d8;
    color: var(--pn-zinc-300);
    cursor: pointer;
    font-size: 0.75rem;
    font-size: var(--text-xs);
    max-width: calc(100cqi - calc(4px * 9));
    max-width: calc(100cqi - var(--spacing-9));
    padding: calc(4px * 1.5) calc(4px * 3);
    padding: var(--spacing-1-5) var(--spacing-3);
    width: 100%;
  }

  portal-example .menu-dropdown a:hover {
    background-color: #3f3f46;
    background-color: var(--pn-zinc-700);
    color: #ffffff;
    color: var(--pn-white);
    text-decoration: none;
  }

  portal-example .menu-dropdown a span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- Copy button: ghost icon, checkmark while "Copied" --- */

  /* The markup is a .button (shared/copy_button partial): strip the
     primary accent chrome down to a ghost icon. */
  portal-example .copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(4px * 6);
    width: var(--spacing-6);
    height: calc(4px * 6);
    height: var(--spacing-6);
    background: none;
    border: 0;
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #a1a1aa;
    color: var(--pn-zinc-400);
    padding: 0;
    transition: color 150ms ease;
    transition: color var(--base-duration) var(--base-timing);
  }

  portal-example .copy:hover {
    background: none;
    border-color: transparent;
    color: #ffffff;
    color: var(--pn-white);
  }

  portal-example .copy::before {
    content: "";
    width: calc(4px * 4);
    width: var(--spacing-4);
    height: calc(4px * 4);
    height: var(--spacing-4);
    background-color: currentColor;
    -webkit-mask: url(https://bump.sh/packs/static/copy-example-663fb4ae9b1fd5792372.svg) center / contain no-repeat;
    mask: url(https://bump.sh/packs/static/copy-example-663fb4ae9b1fd5792372.svg) center / contain no-repeat;
  }

  portal-example .copy[aria-label="Copied"] {
    color: #059669;
    color: var(--pn-success);
  }

  portal-example .copy[aria-label="Copied"]::before {
    -webkit-mask-image: url(https://bump.sh/packs/static/checkmark-6f736912a08090b9655a.svg);
    mask-image: url(https://bump.sh/packs/static/checkmark-6f736912a08090b9655a.svg);
  }

  /* --- Body and code area --- */

  portal-example .placeholder {
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  portal-example .example-body {
    height: 100%;
    overflow: auto;
    scrollbar-color: #3f3f46 transparent;
    scrollbar-color: var(--pn-zinc-700) transparent;
    scrollbar-width: thin;
  }

  portal-example .example-content {
    height: 100%;
    padding: calc(4px * 4) calc(4px * 5);
    padding: var(--spacing-4) var(--spacing-5);
  }

  portal-example .example-content pre {
    flex-grow: 1;
    font-size: 0.75rem;
    font-size: var(--code-font-size);
    line-height: 1.7;
    margin: 0;
  }

  portal-example .example-content pre code {
    color: currentColor;
    overflow: visible;
    overflow: initial;
  }

  portal-example .example-content [data-doc-examples-target="example"] {
    display: none;
  }

  portal-example .example-content [data-doc-examples-target="example"].active,
  portal-example .example-content [data-doc-examples-target="example"]:only-child {
    display: inline;
    display: initial;
  }

  portal-example .example-content .language-curl::before {
    content: "$ ";
  }

  /* External example link (x-beta external examples) */
  portal-example .doc-external-link a {
    display: flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    color: color-mix(in srgb, #025fd7, white 55%);
    color: var(--pn-accent-on-dark);
  }

  portal-example .doc-external-link svg {
    flex-shrink: 0;
  }

  portal-example .doc-external-link__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Example description rendered as a comment above the code: the
     ::before column repeats the comment marker on every wrapped line */
  portal-example .example-description {
    --symbol-padding: 1em;

    position: relative;
    color: #a1a1aa;
    color: var(--pn-zinc-400);
    margin-block-end: calc(4px * 3);
    margin-block-end: var(--spacing-3);
    padding-inline-start: 1em;
    padding-inline-start: var(--symbol-padding);
  }

  portal-example .example-description::before {
    content: "##############################################################";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--symbol-padding);
    overflow-y: hidden;
    overflow-wrap: anywhere;
  }

  portal-example .example-description.language-json::before {
    content: "//////////////////////////////////////////////////////////////";
  }

  portal-example .example-description.language-xml::before {
    content: "\3c !--";
  }

  portal-example .example-description.language-xml {
    --symbol-padding: 2em;
  }

  portal-example .example-description.language-xml::after {
    content: "-->";
  }

  /* --- Operations quick access card (group headers) --- */

  portal-example .doc-example__operation {
    color: #d4d4d8;
    color: var(--pn-code-text);
  }

  portal-example .doc-example__operation:hover {
    color: #ffffff;
    color: var(--pn-white);
    text-decoration: none;
  }

  /* Verb pills switch to their on-dark colorway inside the panel */
  portal-example .operation-verb {
    background-color: color-mix(in srgb, var(--verb-color), black 70%);
    color: color-mix(in srgb, var(--verb-color), white 45%);
  }

  /* --- Server / base-url bar (introduction column) --- */

  .doc-section-examples.multi-servers,
  .doc-section-examples.multi-servers .example-body,
  .doc-section-examples.multi-servers .example-content {
    overflow: visible;
    overflow: initial;
  }

  .doc-section-examples.multi-servers .example-content {
    display: flex;
    align-items: stretch;
    padding: 0;
  }

  .doc-section-examples.multi-servers .example-content pre {
    overflow-x: auto;
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
  }

  .doc-section-examples.multi-servers .example-content .dropdown {
    display: flex;
    align-items: center;
    background-color: #27272a;
    background-color: var(--pn-zinc-800);
    border-end-start-radius: calc(12px - 1px);
    border-end-start-radius: calc(var(--pn-radius-lg) - 1px);
  }

  .doc-section-examples.multi-servers .example-content .dropdown-title {
    background-color: transparent;
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  .doc-section-examples.multi-servers .server-name {
    font-size: 0.75rem;
    font-size: var(--text-xs);
    max-width: calc(4px * 24);
    max-width: var(--spacing-24);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .doc-section-examples.multi-servers .example-content .menu-dropdown {
    left: 0;
    top: calc(100% + 4px);
    top: calc(100% + var(--spacing-1));
  }
}
/* highlight.js theme, from scratch, for code on the dark panel
   (--pn-code-bg, #18181b) — a single colorway for light and dark page
   modes. The legacy color-brewer.css is not loaded with this bundle.

   Strings and JSON keys derive from the customer accent (like the old
   hljs-overrides tinted strings with --doc-base-color); the rest is a
   fixed palette tuned for contrast on #18181b. */

@layer pn-components {
  .hljs {
    /* Local theme tokens (accent-derived first, fixed palette after).
       Keys are near-white with a hint of accent (14:1) so the frank
       accent tint stays the voice of the values (8.3:1) — at 65%
       both read as the same color. Comments hold the dimmest voice
       at AA; punctuation reads with the text. */
    --pn-code-string: var(--pn-accent-on-dark);
    --pn-code-key: color-mix(in srgb, var(--pn-accent), white 85%);
    --pn-code-keyword: #c4b5fd;
    --pn-code-number: #fbbf24;
    --pn-code-title: #7dd3fc;
    --pn-code-comment: var(--pn-zinc-400);
    --pn-code-punctuation: var(--pn-code-text);
    --pn-code-deletion: color-mix(in srgb, var(--pn-error), white 40%);

    background: none;
    color: #d4d4d8;
    color: var(--pn-code-text);
    padding: 0;
  }

  .hljs-comment,
  .hljs-quote {
    color: var(--pn-code-comment);
    font-style: italic;
  }

  .hljs-punctuation,
  .hljs-operator,
  .hljs-meta,
  .hljs-tag {
    color: var(--pn-code-punctuation);
  }

  .hljs-string,
  .hljs-regexp,
  .hljs-symbol,
  .hljs-template-tag,
  .hljs-template-variable,
  .hljs-variable,
  .hljs-addition {
    color: var(--pn-code-string);
  }

  .hljs-attr,
  .hljs-attribute,
  .hljs-selector-attr,
  .hljs-property {
    color: var(--pn-code-key);
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-doctag,
  .hljs-type,
  .hljs-meta-keyword {
    color: var(--pn-code-keyword);
  }

  .hljs-number,
  .hljs-literal {
    color: var(--pn-code-number);
  }

  .hljs-title,
  .hljs-section,
  .hljs-name,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-selector-pseudo,
  .hljs-bullet {
    color: var(--pn-code-title);
  }

  .hljs-params,
  .hljs-subst,
  .hljs-formula {
    color: #d4d4d8;
    color: var(--pn-code-text);
  }

  .hljs-deletion {
    color: var(--pn-code-deletion);
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .hljs-link {
    text-decoration: underline;
  }
}

/* Generic dropdown: quiet chip trigger + floating menu panel.

   This file is the base under every dropdown refinement shipped in
   earlier phases: the drawer branch selector (doc/navigation.css), the
   content-type switcher (doc/misc.css) and the dark portal-example
   selectors (components/example.css). Those files are imported before
   this one but win their overrides through extra classes/elements, so
   every selector here stays at minimal specificity (one class plus an
   optional element or attribute).

   JS contract (dropdown controller):
   - aria-expanded toggled on .dropdown shows/hides .menu-dropdown;
   - [data-dropdown-target="current"] receives the picked entry;
   - .caret-down is the rotating caret;
   - menu entries are <a>, <button> or a static [aria-current];
   - the active entry carries .active (branch/example selectors). */

@layer pn-components {
  .dropdown {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    cursor: pointer;
  }

  /* Downloading a spec file is a desktop gesture: the dropdown is
     dead weight in the phone menu. */
  @media (max-width: 850px) {
    .dropdown.source {
      display: none;
    }
  }

  .dropdown:focus-visible {
    outline: 3px solid color-mix(in oklch, #27272a, transparent 40%);
    outline: var(--focus-outline);
    outline-offset: 2px;
    outline-offset: var(--focus-outline-offset);
  }

  /* --- Trigger: quiet chip --- */

  .dropdown-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    min-height: calc(4px * 8);
    min-height: var(--spacing-8);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    /* Primary text: the trigger shows a picked value (branch,
       operation, auth scheme), secondary would read as disabled */
    color: #27272a;
    color: var(--pn-text);
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
    transition:
      border-color 150ms ease,
      color 150ms ease;
    transition:
      border-color var(--base-duration) var(--base-timing),
      color var(--base-duration) var(--base-timing);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
  }

  .dropdown:hover .dropdown-title {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
    color: #27272a;
    color: var(--pn-text);
  }

  /* Download source: a quiet secondary action, so the chip chrome
     goes away and it reads like the neighboring nav links — gray
     included: it navigates, it doesn't hold a picked value. */
  .dropdown.source .dropdown-title {
    background-color: transparent;
    border: 0;
    color: #71717a;
    color: var(--pn-text-secondary);
    padding-inline: 0;
  }

  .dropdown-title [data-dropdown-target="current"] {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .dropdown-title span {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dropdown-title .counter {
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    margin-left: calc(4px * 2);
    margin-left: var(--spacing-2);
    padding: calc(4px * 0.25) calc(4px * 2) 0;
    padding: var(--spacing-px) var(--spacing-2) 0;
  }

  .dropdown-title svg {
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.8;
    transform: rotate(0);
    transition: transform ease-in 0.2s;
  }

  .dropdown[aria-expanded="true"] .dropdown-title > .caret-down {
    transform: rotate(-180deg);
  }

  /* --- Menu: floating panel (the one place shadows are allowed) --- */

  .menu-dropdown {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    top: calc(100% + var(--spacing-1));
    z-index: 20;
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-shadow: var(--pn-shadow-lg);
    color: #27272a;
    color: var(--pn-text);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    min-width: 180px;
    width: -moz-max-content;
    width: max-content;
    padding: 4px;
    padding: var(--spacing-1);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 150ms ease,
      visibility 150ms ease;
    transition:
      opacity var(--base-duration) var(--base-timing),
      visibility var(--base-duration) var(--base-timing);
  }

  .menu-dropdown.right {
    left: auto;
    right: 0;
  }

  .dropdown[aria-expanded="true"] .menu-dropdown {
    opacity: 1;
    visibility: visible;
  }

  /* Shadows disappear on the dark page: a stronger hairline detaches
     the floating panel instead (same value the portal-example menus
     already use). */
  .dark-theme .menu-dropdown {
    border-color: #3f3f46;
    border-color: var(--pn-zinc-700);
  }

  /* The menu ul is classless so the ul[class] reset skips it, and
     .markdown-content list styles reach it when the dropdown sits
     inside doc content (Ask AI): neutralize lists inside menus. */
  .menu-dropdown ul {
    list-style: none;
    padding: 0;
  }

  .menu-dropdown > ul {
    max-height: 50vh;
    overflow-y: auto;
  }

  .menu-dropdown li {
    margin: 0;
  }

  /* Inset focus ring: the scrolling ul clips an outset one (the
     browser default ring showed up with broken sides). */
  .menu-dropdown a:focus-visible,
  .menu-dropdown button:focus-visible {
    outline: 3px solid color-mix(in oklch, #27272a, transparent 40%);
    outline: var(--focus-outline);
    outline-offset: calc(3px * -1);
    outline-offset: calc(var(--focus-outline-width) * -1);
  }

  .menu-dropdown li + li {
    margin-block-start: calc(4px * 0.5);
    margin-block-start: var(--spacing-05);
  }

  .menu-dropdown hr {
    border: 0;
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
    margin: 4px calc(4px * 2);
    margin: var(--spacing-1) var(--spacing-2);
  }

  /* Group headings (explorer operations menu) */
  .menu-dropdown b {
    display: block;
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    line-height: calc(4px * 8);
    line-height: var(--spacing-8);
    padding-inline: calc(4px * 3);
    padding-inline: var(--spacing-3);
  }

  .menu-dropdown > span {
    display: flex;
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
  }

  /* --- Entries --- */

  .menu-dropdown a,
  .menu-dropdown button,
  .menu-dropdown [aria-current] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
    min-height: calc(4px * 8);
    min-height: var(--spacing-8);
    width: 100%;
    background: transparent;
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #27272a;
    color: var(--pn-text);
    padding: calc(4px * 1.5) calc(4px * 3);
    padding: var(--spacing-1-5) var(--spacing-3);
    position: relative;
    text-align: left;
    text-decoration: none;
  }

  .menu-dropdown a:hover,
  .menu-dropdown button:hover {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    text-decoration: none;
  }

  .menu-dropdown a[data-button-state="warning"],
  .menu-dropdown button[data-button-state="warning"] {
    color: #d97706;
    color: var(--pn-warning);
  }

  .menu-dropdown a[data-button-state="error"],
  .menu-dropdown button[data-button-state="error"] {
    color: #dc2626;
    color: var(--pn-error);
  }

  /* Current entry: soft accent pill (matches the sidebar active state) */
  .menu-dropdown a.active,
  .menu-dropdown [aria-current] {
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
    color: #025fd7;
    color: var(--pn-accent-text);
  }

  .menu-dropdown a.active::after {
    content: "";
    flex-shrink: 0;
    width: calc(4px * 3);
    width: var(--spacing-3);
    height: calc(4px * 3);
    height: var(--spacing-3);
    background-color: currentColor;
    -webkit-mask: url(https://bump.sh/packs/static/checkmark-6f736912a08090b9655a.svg) center / contain no-repeat;
    mask: url(https://bump.sh/packs/static/checkmark-6f736912a08090b9655a.svg) center / contain no-repeat;
  }

  .menu-dropdown a.active svg {
    display: block;
  }

  .menu-dropdown [aria-current] {
    cursor: default;
    height: calc(4px * 8);
    height: var(--spacing-8);
    padding-inline-end: calc(4px * 8);
    padding-inline-end: var(--spacing-8);
  }

  /* Footer action (the hub switcher's "Back to hub page"): an exit out
     of the list, not one of its options. A full-bleed hairline detaches
     it, secondary voice + leading arrow mark it as navigation. */
  .menu-dropdown > ul + a {
    justify-content: flex-start;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
    /* Bleed through the panel padding so the hairline runs edge to
       edge; auto width stretches between the negative margins (the
       entries' width: 100% would fall short of the right edge) */
    margin: 4px calc(4px * -1)
      calc(4px * -1);
    margin: var(--spacing-1) calc(var(--spacing-1) * -1)
      calc(var(--spacing-1) * -1);
    width: auto;
    border-radius: 0 0 calc(8px - 1px)
      calc(8px - 1px);
    border-radius: 0 0 calc(var(--pn-radius-md) - 1px)
      calc(var(--pn-radius-md) - 1px);
    color: #71717a;
    color: var(--pn-text-secondary);
    padding: calc(4px * 2) calc(4px * 4);
    padding: var(--spacing-2) var(--spacing-4);
  }

  .menu-dropdown > ul + a:hover {
    color: #27272a;
    color: var(--pn-text);
  }

  .menu-dropdown > ul + a::before {
    content: "";
    flex-shrink: 0;
    width: calc(4px * 2.5);
    width: var(--spacing-2-5);
    height: calc(4px * 2.5);
    height: var(--spacing-2-5);
    background-color: currentColor;
    -webkit-mask: url(https://bump.sh/packs/static/arrow-left-579d865812fe9e3a7be9.svg) center / contain
      no-repeat;
    mask: url(https://bump.sh/packs/static/arrow-left-579d865812fe9e3a7be9.svg) center / contain no-repeat;
  }

  .menu-dropdown .menu-item {
    display: flex;
    align-items: center;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    min-width: 0;
  }

  .menu-dropdown .icon-link {
    align-items: center;
    justify-content: start;
  }

  /* Trailing checkmarks sit against the right edge, like the old bundle */
  .menu-dropdown svg {
    position: absolute;
    right: calc(4px * 3);
    right: var(--spacing-3);
    top: 50%;
    color: currentColor;
    transform: translateY(-50%);
  }

  .menu-dropdown .icon-link svg {
    position: static;
    margin-right: calc(4px * 3);
    margin-right: var(--spacing-3);
    stroke: currentColor;
    transform: none;
  }

  /* --- Headings variant (explorer operations menu) --- */

  .dropdown:where([data-headings="true"]) .menu-dropdown {
    padding: calc(4px * 2) calc(4px * 2) calc(4px * 3);
    padding: var(--spacing-2) var(--spacing-2) var(--spacing-3);
  }

  :where(.dropdown[data-headings="true"]) ul > li + li {
    margin-block-start: calc(4px * 3);
    margin-block-start: var(--spacing-3);
  }

  :where(.dropdown[data-headings="true"]) ul ul {
    margin-block-start: 4px;
    margin-block-start: var(--spacing-1);
  }
}
/* Buttons. Primary is the customer accent; every variant flows through
   the --button-* custom properties so data-button-style/-size/-state
   attributes (unchanged public template API) only swap values.

   Bare <button> elements are NOT styled here (unlike the old bundle):
   this layer beats pn-layout regardless of specificity, so a global
   element rule would clobber the shell chrome (menu-toggle, carets...).
   Templates opt in with .button / input[type="submit"|"button"]. */

@layer pn-components {
  .button,
  input[type="submit"],
  input[type="button"] {
    --button-color: var(--pn-accent);
    --button-color-hover: color-mix(in srgb, var(--pn-accent), black 10%);
    --button-text-color: var(--pn-white);
    --button-text-color-hover: var(--pn-white);
    --button-border-color: transparent;
    --button-border-color-hover: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    height: calc(4px * 8);
    height: var(--spacing-8);
    background-color: #025fd7;
    background-color: var(--button-color);
    border: 1px solid transparent;
    border: 1px solid var(--button-border-color);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    color: #ffffff;
    color: var(--button-text-color);
    cursor: pointer;
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    -webkit-font-smoothing: antialiased;
    line-height: 1;
    padding: calc(4px * 2) calc(4px * 4);
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    text-decoration: none;
    transition:
      background-color 150ms ease,
      border-color 150ms ease,
      color 150ms ease;
    transition:
      background-color var(--base-duration) var(--base-timing),
      border-color var(--base-duration) var(--base-timing),
      color var(--base-duration) var(--base-timing);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    vertical-align: middle;
    white-space: nowrap;
  }

  .button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover {
    background-color: var(--button-color-hover);
    border-color: var(--button-border-color-hover);
    color: var(--button-text-color-hover);
    text-decoration: none;
  }

  .button:focus-visible,
  input[type="submit"]:focus-visible,
  input[type="button"]:focus-visible {
    outline: 3px solid color-mix(in oklch, #27272a, transparent 40%);
    outline: var(--focus-outline);
    outline-offset: 2px;
    outline-offset: var(--focus-outline-offset);
  }

  .button:disabled,
  input[type="submit"]:disabled,
  input[type="button"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .button svg {
    flex-shrink: 0;
    width: calc(4px * 4);
    width: var(--spacing-4);
    height: calc(4px * 4);
    height: var(--spacing-4);
  }

  /* --- Sizes --- */

  .button[data-button-size="mini"] {
    font-size: 0.625rem;
    font-size: var(--text-xxs);
    gap: 4px;
    gap: var(--spacing-1);
    height: calc(4px * 5);
    height: var(--spacing-5);
    padding: 4px calc(4px * 1.5);
    padding: var(--spacing-1) var(--spacing-1-5);
  }

  .button[data-button-size="mini"] svg,
  .button[data-button-size="small"] svg {
    width: calc(4px * 3);
    width: var(--spacing-3);
    height: calc(4px * 3);
    height: var(--spacing-3);
  }

  .button[data-button-size="small"] {
    font-size: 0.75rem;
    font-size: var(--text-xs);
    gap: 4px;
    gap: var(--spacing-1);
    height: calc(4px * 6);
    height: var(--spacing-6);
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
  }

  .button[data-button-size="large"] {
    height: calc(4px * 10);
    height: var(--spacing-10);
    padding-inline: calc(4px * 5);
    padding-inline: var(--spacing-5);
  }

  .button[data-button-padding="large"] {
    padding-inline: calc(4px * 6);
    padding-inline: var(--spacing-6);
  }

  .button[data-button-radius="round"] {
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
  }

  /* --- Styles --- */

  /* Ghost outline picking up the surrounding text color (works on the
     dark explorer panels too) */
  .button[data-button-style="outline"] {
    --button-color: transparent;
    --button-color-hover: transparent;
    --button-border-color: color-mix(in srgb, currentColor, transparent 70%);
    --button-border-color-hover: color-mix(in srgb, currentColor, transparent 40%);
    --button-text-color: currentColor;
    --button-text-color-hover: currentColor;
  }

  /* Quiet chip: surface + hairline */
  .button[data-button-style="secondary"] {
    --button-color: var(--pn-surface);
    --button-color-hover: var(--pn-surface);
    --button-border-color: var(--pn-border);
    --button-border-color-hover: var(--pn-zinc-400);
    --button-text-color: var(--pn-text);
    --button-text-color-hover: var(--pn-title);
  }

  /* White whatever the theme (dark banner CTAs) */
  .button[data-button-style="white"],
  .button-white {
    --button-color: var(--pn-white);
    --button-color-hover: var(--pn-white);
    --button-border-color: var(--pn-zinc-200);
    --button-border-color-hover: var(--pn-zinc-500);
    --button-text-color: var(--pn-zinc-700);
    --button-text-color-hover: var(--pn-zinc-900);
  }

  /* Inverted band (upgrade banner) */
  .button[data-button-style="action"] {
    --button-color: var(--bg-color-inverted);
    --button-color-hover: var(--bg-color-inverted);
    --button-text-color: var(--text-color-inverted);
    --button-text-color-hover: var(--text-color-inverted);
  }

  .button[data-button-style="neutral"] {
    --button-color: var(--pn-surface-muted);
    --button-color-hover: var(--pn-zinc-200);
    --button-text-color: var(--pn-text);
    --button-text-color-hover: var(--pn-text);
  }

  .dark-theme .button[data-button-style="neutral"] {
    --button-color-hover: var(--pn-zinc-700);
  }

  .button[data-button-style="danger"] {
    --button-color: var(--pn-error);
    --button-color-hover: color-mix(in srgb, var(--pn-error), black 15%);
  }

  /* --- States --- */

  .button[data-button-state="success"] {
    --button-color: var(--pn-success);
    --button-color-hover: color-mix(in srgb, var(--pn-success), black 15%);
  }

  .button[data-button-state="error"] {
    --button-color: var(--pn-error);
    --button-color-hover: color-mix(in srgb, var(--pn-error), black 15%);
  }

  .button[data-button-state="warning"] {
    --button-color: var(--pn-warning);
    --button-color-hover: color-mix(in srgb, var(--pn-warning), black 15%);
  }

  /* --- Ghost variants (also used by bare buttons in copy widgets) --- */

  [data-button-style="naked"] {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    height: auto;
    padding: 0;
  }

  [data-button-style="naked"]:hover {
    background: transparent;
    color: inherit;
    text-decoration: underline;
  }

  [data-button-style="link"] {
    display: inline;
    background: transparent;
    border: 0;
    color: #025fd7;
    color: var(--pn-accent-text);
    cursor: pointer;
    height: auto;
    padding: 0;
    text-decoration: underline;
  }

  [data-button-style="link"]:hover {
    background: transparent;
    color: color-mix(in srgb, #025fd7, black 25%);
    color: var(--pn-accent-strong);
  }

  /* Quiet companion link next to a primary CTA (preview banner) */
  .contact {
    color: inherit;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    text-decoration: none;
  }

  .contact:hover {
    text-decoration: underline;
  }
}
/* Search: header trigger chip + the cmd+k dialog (search_v2).

   JS contract (doc-search-v2 controller, do not rename):
   - results are hydrated into .doc-search_v2__results-list from the
     <template> targets: .result-link, .result-title, .result-description,
     .result-api-name, .result-api-type, .result-node-type, .result-label
     (gets the verb class, reuses the badge styles), .result-path,
     .result-breadcrumbs(-last/-item/-caret), .result-path-label,
     .search-flex-row, .search-highlight, .result-query, .error-message;
   - .hidden is toggled on the loader, footer paragraphs and
     .doc-search_v2__more-results (utility class, unlayered, wins);
   - keyboard navigation moves focus across .result-link elements;
   - the dialog controller shows the <dialog> via showModal(). */

@layer pn-components {
  /* --- Header trigger: quiet chip with the shortcut hint --- */

  .search-button {
    display: flex;
    align-items: center;
    order: -1;
    flex-grow: 1;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    min-width: 0;
    max-width: 400px;
    margin-right: auto;
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
    padding: calc(4px * 1.5) calc(4px * 3);
    padding: var(--spacing-1-5) var(--spacing-3);
    transition:
      border-color 150ms ease,
      color 150ms ease;
    transition:
      border-color var(--base-duration) var(--base-timing),
      color var(--base-duration) var(--base-timing);
  }

  .search-button:hover {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
    color: #27272a;
    color: var(--pn-text);
  }

  .search-button:focus-visible {
    outline: 3px solid color-mix(in oklch, #27272a, transparent 40%);
    outline: var(--focus-outline);
    outline-offset: 2px;
    outline-offset: var(--focus-outline-offset);
  }

  .search-button svg {
    flex-shrink: 0;
  }

  .search-button .placeholder {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ⌘K / Ctrl+K hint (os-detector picks the right span) */
  .search-button .command {
    flex-shrink: 0;
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding: 0 calc(4px * 1.5);
    padding: 0 var(--spacing-1-5);
  }

  @media (max-width: 849.98px) {
    /* Alone on the drawer's first row */
    .search-button {
      flex-basis: 100%;
      max-width: none;
      margin-block-end: calc(4px * 3);
      margin-block-end: var(--spacing-3);
    }
  }

  /* --- Dialog shell: centered, top-aligned modal --- */

  .doc-search_v2__dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    margin-block-start: 12vh;
    margin-inline: auto;
    background: #ffffff;
    background: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-shadow: var(--pn-shadow-lg);
    color: #27272a;
    color: var(--pn-text);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    overflow: auto;
    padding: 0;
  }

  .doc-search_v2__dialog:not([open]) {
    display: none;
  }

  .doc-search_v2__dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
  }

  .doc-search_v2__dialog p {
    margin: 0;
  }

  /* --- Query form: borderless large input, hairline divider --- */

  .doc-search_v2__form {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border-bottom: 1px solid #e4e4e7;
    border-bottom: var(--pn-hairline);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
  }

  .doc-search_v2__form svg {
    flex-shrink: 0;
    width: calc(4px * 4);
    width: var(--spacing-4);
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .doc-search-v2__loader {
    flex-shrink: 0;
  }

  .doc-search_v2__dialog #query {
    flex-grow: 1;
    height: auto;
    background: transparent;
    border: 0;
    color: #09090b;
    color: var(--pn-title);
    font-size: 0.9375rem;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    margin: 0;
    padding: 4px 0;
    padding: var(--spacing-1) 0;
  }

  .doc-search_v2__dialog #query::-moz-placeholder {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
  }

  .doc-search_v2__dialog #query::placeholder {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
  }

  .search-scope {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  .search-scope #hub-default-search-scope-multiple-checkbox {
    margin: 0;
  }

  #hub-default-search-scope-multiple-checkbox-link {
    text-decoration: underline;
  }

  /* Keycap chips (ESC button + footer hints) */
  .esc-button,
  .doc-search_v2__dialog_footer .keyboard-key {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: calc(4px * 6);
    height: var(--spacing-6);
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding-inline: calc(4px * 2);
    padding-inline: var(--spacing-2);
  }

  /* Dark surface-muted and the hairline are both zinc-800: the keycap
     edge vanishes. One step lighter, like the example card borders. */
  .dark-theme .esc-button,
  .dark-theme .doc-search_v2__dialog_footer .keyboard-key {
    border-color: #3f3f46;
    border-color: var(--pn-zinc-700);
  }

  /* Same quiet-chip hover as the security badges (after the dark
     border rule: equal specificity, source order decides) */
  .esc-button:hover {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
    color: #27272a;
    color: var(--pn-text);
  }

  .doc-search_v2__dialog_footer .keyboard-key svg {
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  /* --- Results --- */

  ul.doc-search_v2__results-list {
    padding: calc(4px * 2);
    padding: var(--spacing-2);
  }

  ul.doc-search_v2__results-list:not(:first-of-type) {
    padding-top: 0;
  }

  .search_v2__results-list-item {
    display: block;
  }

  .search_v2__results-list-item + .search_v2__results-list-item {
    margin-block-start: calc(4px * 0.5);
    margin-block-start: var(--spacing-05);
  }

  .result-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    gap: var(--spacing-1);
    min-width: 0;
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    padding: calc(4px * 2) calc(4px * 3);
    padding: var(--spacing-2) var(--spacing-3);
    transition: background-color 150ms ease;
    transition: background-color var(--base-duration) var(--base-timing);
  }

  .result-link:hover,
  .result-link:focus,
  .result-link:focus-visible {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    outline: none;
    text-decoration: none;
  }

  .search-flex-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  /* Title line: the leaf stands out, ancestor crumbs stay quiet meta */
  .result-title,
  .result-breadcrumbs-last {
    color: #09090b;
    color: var(--pn-title);
    font-size: 0.8125rem;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .result-api-type,
  .result-node-type {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.625rem;
    font-size: var(--text-xxs);
    font-style: normal;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .result-node-type {
    margin-left: 4px;
    margin-left: var(--spacing-1);
  }

  .result-api-name {
    display: flex;
    align-items: center;
    color: #025fd7;
    color: var(--pn-accent-text);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .result-description {
    max-width: 100%;
    min-width: 0;
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .result-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4px * 1.5);
    gap: var(--spacing-1-5);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  .result-breadcrumbs-caret {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .result-breadcrumbs-caret svg {
    width: -moz-fit-content;
    width: fit-content;
  }

  /* Verb chip: colors come from the badge styles (doc/badges.css) */
  .result-path-label {
    display: flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  /* Chip look itself comes from .operation-verb (doc/badges.css) */
  .result-label {
    display: flex;
    align-items: center;
  }

  .result-path {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  /* color: inherit so a match in a quiet crumb doesn't jump out of it */
  .search-highlight {
    color: inherit;
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  /* --- Empty / error / more --- */

  .no-results-container {
    color: #71717a;
    color: var(--pn-text-secondary);
    padding: calc(4px * 4);
    padding: var(--spacing-4);
  }

  .doc-search_v2__more-results {
    padding: 0 calc(4px * 4) calc(4px * 4);
    padding: 0 var(--spacing-4) var(--spacing-4);
  }

  /* Button chrome: the shared .show-more-button pill (doc/misc.css) */
  .doc-search_v2__more-results:not(.hidden) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Footer hints --- */

  .doc-search_v2__dialog_footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #ffffff;
    background-color: var(--pn-surface);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
    transition: background-color ease-out 0.3s;
  }

  .doc-search_v2__dialog_footer:has([data-doc-search-v2-target="keyboardNavigationTutorial"]:not(.hidden)) {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
    padding-block: calc(4px * 2);
    padding-block: var(--spacing-2);
  }

  .doc-search_v2__dialog_footer p[data-doc-search-v2-target="keyboardNavigationTutorial"] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .doc-search_v2__dialog_footer p[data-doc-search-v2-target="keyboardNavigationTutorial"].hidden {
    display: none;
  }

  /* --- Mobile --- */

  @media (max-width: 849.98px) {
    .doc-search_v2__dialog {
      max-width: calc(100vw - calc(4px * 8));
      max-width: calc(100vw - var(--spacing-8));
      margin-block-start: calc(4px * 10);
      margin-block-start: var(--spacing-10);
    }

    .doc-search_v2__form {
      flex-wrap: wrap;
      row-gap: calc(4px * 3);
      row-gap: var(--spacing-3);
    }

    .doc-search_v2__form .esc-button {
      display: none;
    }

    .doc-search_v2__dialog_footer:has([data-doc-search-v2-target="keyboardNavigationTutorial"]:not(.hidden)) {
      display: none;
    }
  }

  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }
}
/* Modal dialogs (dialog Stimulus controller: showModal()/close(), plus
   body.no-scroll while open) and the explorer response dialog, filled
   by the response-dialog controller with a portal-example clone. */

@layer pn-components {
  body.no-scroll {
    overflow: hidden;
  }

  dialog {
    --dialog-width: 480px;

    /* The pn-reset * { margin: 0 } wipes the UA margin that centers a
       showModal() dialog: restore it. */
    margin: auto;
    width: 100%;
    max-width: 480px;
    max-width: var(--dialog-width, auto);
    max-height: auto;
    max-height: var(--dialog-height, auto);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-shadow: var(--pn-shadow-lg);
    color: #27272a;
    color: var(--pn-text);
    padding: 0;
    text-align: left;
    text-align: initial;
    white-space: wrap;
  }

  dialog[data-dialog-size="large"] {
    --dialog-width: 640px;
  }

  dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
  }

  /* Shadows disappear on the dark page: a stronger hairline detaches
     the modal instead (covers the search dialogs too; #response-dialog
     keeps its border: 0 through id specificity). */
  .dark-theme dialog {
    border-color: #3f3f46;
    border-color: var(--pn-zinc-700);
  }

  /* --- Standard dialog internals (Shared::Dialog) --- */

  .dialog .close-dialog {
    position: absolute;
    top: calc(4px * 5);
    top: var(--spacing-5);
    right: calc(4px * 6);
    right: var(--spacing-6);
    height: calc(4px * 3);
    height: var(--spacing-3);
    background: none;
    border: none;
    color: #71717a;
    color: var(--pn-text-secondary);
    padding: 0;
  }

  .dialog .close-dialog:hover {
    background: none;
    color: #27272a;
    color: var(--pn-text);
  }

  .dialog header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
    padding: calc(4px * 4) calc(4px * 6) 0;
    padding: var(--spacing-4) var(--spacing-6) 0;
  }

  .dialog header h2 {
    margin: 0;
    color: #09090b;
    color: var(--pn-title);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    text-align: left;
  }

  .dialog header button svg {
    aspect-ratio: 1 / 1;
    width: calc(4px * 3);
    width: var(--spacing-3);
  }

  .dialog .dialog-body {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    padding: calc(4px * 6);
    padding: var(--spacing-6);
  }

  .dialog .dialog-body ul {
    list-style-type: disc;
    padding-left: calc(4px * 4);
    padding-left: var(--spacing-4);
  }

  .dialog .dialog-body hr {
    border: 0;
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
    margin: 0 calc(4px * -6);
    margin: 0 var(--spacing-6-minus);
  }

  .dialog .dialog-body h3 {
    margin-bottom: 0;
    color: #09090b;
    color: var(--pn-title);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .dialog .dialog-buttons {
    display: flex;
    justify-content: end;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    padding-top: calc(4px * 3);
    padding-top: var(--spacing-3);
  }

  /* --- Confirmation variant (delete request warning) --- */

  .dialog.confirmation-dialog header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: auto;
    border-bottom: 1px solid #e4e4e7;
    border-bottom: var(--pn-hairline);
    padding: calc(4px * 3) calc(4px * 6);
    padding: var(--spacing-3) var(--spacing-6);
  }

  .dialog.confirmation-dialog header button {
    position: static;
    position: initial;
  }

  .dialog.confirmation-dialog .dialog-body {
    gap: 0;
    padding-block: calc(4px * 4);
    padding-block: var(--spacing-4);
  }

  .dialog.confirmation-dialog .dialog-body > *:first-child {
    margin-top: 0;
  }

  .dialog.confirmation-dialog .dialog-body .input {
    margin-top: calc(4px * 4);
    margin-top: var(--spacing-4);
  }

  .dialog.confirmation-dialog .dialog-body .button:not(.dialog-buttons > *) {
    margin-top: calc(4px * 3);
    margin-top: var(--spacing-3);
    width: 100%;
  }

  .dialog .confirmation-dialog-buttons {
    display: flex;
    justify-content: end;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    margin-top: calc(4px * 2);
    margin-top: var(--spacing-2);
  }

  /* --- Explorer response dialog: a portal-example fills the frame --- */

  #response-dialog {
    --dialog-width: 960px;
    --dialog-height: 720px;

    width: min(960px, calc(100% - 64px));

    width: min(var(--dialog-width), calc(100% - 64px));
    height: min(720px, calc(100% - 64px));
    height: min(var(--dialog-height), calc(100% - 64px));
    background: transparent;
    border: 0;
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    overflow: hidden;
  }

  #response-dialog portal-example {
    height: 100%;
  }

  #response-dialog header .expand {
    display: none;
    pointer-events: none;
  }

  #response-dialog header .close-dialog {
    position: static;
    height: auto;
    color: #a1a1aa;
    color: var(--pn-zinc-400);
  }

  #response-dialog header .close-dialog:hover {
    color: #ffffff;
    color: var(--pn-white);
  }

  #response-dialog header .close-dialog svg {
    position: relative;
    top: -1px;
    height: 14px;
  }
}
/* Authentication section: OAuth2 flow / security-scheme definition
   tables rendered as quiet surface cards. Base table rules live in
   doc/content.css; this file upgrades table.authentication to a card
   with definition rows and mono token names/URLs. */

@layer pn-components {
  .doc-content table.authentication {
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-collapse: separate;
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    border-spacing: 0;
    overflow: hidden;
  }

  /* Tone and hairlines come from the generic .doc-content th/td rules
     (doc/content.css); only the card geometry is declared here. */
  .doc-content table.authentication th {
    width: 20%;
    min-width: calc(4px * 24);
    min-width: var(--spacing-24);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
    vertical-align: top;
  }

  .doc-content table.authentication td {
    width: 80%;
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
  }

  .doc-content table.authentication tr:last-child th,
  .doc-content table.authentication tr:last-child td {
    border-bottom: 0;
  }

  /* Endpoint URLs: mono, accent, breakable */
  .doc-content table.authentication td a {
    color: #025fd7;
    color: var(--pn-accent-text);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
  }

  /* Scopes list: quiet definition rows */
  .doc-content table.authentication td ul {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .doc-content table.authentication td ul p {
    display: inline;
    margin: 0;
  }
}
/* Shared odds and ends: ask-ai menu, os-detector, external links,
   mermaid, forms/inputs, labels, loaders, copy fields, the preview
   call-to-action band, upgrade banners and the changes compare bar. */

@layer pn-components {
  /* --- Ask AI: quiet accent trigger under section titles --- */

  ask-ai {
    --flow-space: var(--spacing-2);

    display: block;
    margin-top: calc(4px * 2);
    margin-top: var(--spacing-2);
    max-width: calc(4px * 20);
    max-width: var(--spacing-20);
    color: #025fd7;
    color: var(--pn-accent-text);
  }

  /* In the operation-header grid the row gap owns the spacing; the
     equivalent pn-layout rule (section.css) loses the margin fight
     against the base rule above, so this layer must say it. */
  .operation-header > div:first-child > ask-ai {
    margin-top: 0;
  }

  ask-ai a {
    display: inline-block;
  }

  ask-ai .dropdown-title {
    background: transparent;
    border: 0;
    color: #025fd7;
    color: var(--pn-accent-text);
    min-height: 0;
    padding-inline: 0;
  }

  ask-ai .dropdown:hover .dropdown-title {
    color: color-mix(in srgb, #025fd7, black 25%);
    color: var(--pn-accent-strong);
  }

  ask-ai .dropdown-title [data-dropdown-target="current"] {
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  ask-ai .dropdown-title [data-dropdown-target="current"] svg {
    opacity: 1;
  }

  ask-ai .menu-dropdown {
    width: calc(4px * 64);
    width: var(--spacing-64);
    align-items: center;
  }

  ask-ai .menu-dropdown a {
    justify-content: flex-start;
    gap: 0;
    padding-inline: calc(4px * 2.5);
    padding-inline: var(--spacing-2-5);
  }

  /* Tool icons drawn with masks so they follow the text color */
  ask-ai .menu-dropdown a::before {
    content: "";
    display: inline-block;
    width: calc(4px * 4.5);
    width: var(--spacing-4-5);
    height: calc(4px * 3);
    height: var(--spacing-3);
    background-color: #27272a;
    background-color: var(--pn-text);
    margin-right: calc(4px * 2);
    margin-right: var(--spacing-2);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: calc(4px * 4.5) calc(4px * 3);
    -webkit-mask-size: var(--spacing-4-5) var(--spacing-3);
    mask-size: calc(4px * 4.5) calc(4px * 3);
    mask-size: var(--spacing-4-5) var(--spacing-3);
    opacity: 0.8;
  }

  ask-ai .menu-dropdown a#ask-ai-mcp-cursor::before {
    -webkit-mask-image: url(https://bump.sh/packs/static/cursor-138ee8a236a6f791386d.svg);
    mask-image: url(https://bump.sh/packs/static/cursor-138ee8a236a6f791386d.svg);
  }

  ask-ai .menu-dropdown a#ask-ai-mcp-vscode::before {
    -webkit-mask-image: url(https://bump.sh/packs/static/vs-code-d857f713185089bbe87c.svg);
    mask-image: url(https://bump.sh/packs/static/vs-code-d857f713185089bbe87c.svg);
  }

  ask-ai .menu-dropdown a#ask-ai-mcp-other::before {
    -webkit-mask-image: url(https://bump.sh/packs/static/mcp-server-5b22484a88ee565ca161.svg);
    mask-image: url(https://bump.sh/packs/static/mcp-server-5b22484a88ee565ca161.svg);
  }

  ask-ai .menu-dropdown a#ask-ai-chat-gpt::before {
    -webkit-mask-image: url(https://bump.sh/packs/static/chat-gpt-6dfd241501025c00638d.svg);
    mask-image: url(https://bump.sh/packs/static/chat-gpt-6dfd241501025c00638d.svg);
  }

  ask-ai .menu-dropdown a#ask-ai-claude::before {
    -webkit-mask-image: url(https://bump.sh/packs/static/claude-1d53b5d7d1ab09142890.svg);
    mask-image: url(https://bump.sh/packs/static/claude-1d53b5d7d1ab09142890.svg);
  }

  ask-ai .menu-dropdown a#ask-ai-markdown::before {
    -webkit-mask-image: url(https://bump.sh/packs/static/markdown-1b8bee8460d30d0e785f.svg);
    mask-image: url(https://bump.sh/packs/static/markdown-1b8bee8460d30d0e785f.svg);
    margin-left: calc(4px * 0.5);
    margin-left: var(--spacing-05);
    margin-right: calc(4px * 2.5);
    margin-right: var(--spacing-2-5);
  }

  ask-ai .menu-dropdown a#ask-ai-copy::before {
    -webkit-mask-image: url(https://bump.sh/packs/static/copy-3f65e3282a00c3118aca.svg);
    mask-image: url(https://bump.sh/packs/static/copy-3f65e3282a00c3118aca.svg);
    -webkit-mask-size: calc(4px * 3) calc(4px * 3);
    -webkit-mask-size: var(--spacing-3) var(--spacing-3);
    mask-size: calc(4px * 3) calc(4px * 3);
    mask-size: var(--spacing-3) var(--spacing-3);
    margin-left: 4px;
    margin-left: var(--spacing-1);
    margin-right: calc(4px * 2);
    margin-right: var(--spacing-2);
    opacity: 0.7;
  }

  ask-ai .menu-dropdown svg {
    display: block;
    flex-shrink: 0;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
  }

  ask-ai .menu-dropdown hr {
    margin: calc(4px * 1.5) calc(4px * 2);
    margin: var(--spacing-1-5) var(--spacing-2);
  }

  /* --- Ask AI "other MCP tools" modal --- */

  #ask-ai-mcp-other-modal header {
    width: auto;
    border-bottom: 1px solid #e4e4e7;
    border-bottom: var(--pn-hairline);
    padding-bottom: calc(4px * 4);
    padding-bottom: var(--spacing-4);
  }

  #ask-ai-mcp-other-modal .dialog-body {
    gap: 0;
  }

  #ask-ai-mcp-other-modal .subtitle {
    margin-top: calc(4px * 4);
    margin-top: var(--spacing-4);
    margin-bottom: calc(4px * 2);
    margin-bottom: var(--spacing-2);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  #ask-ai-mcp-other-modal-close {
    width: -moz-fit-content;
    width: fit-content;
    align-self: end;
    margin-top: calc(4px * 6);
    margin-top: var(--spacing-6);
  }

  /* The url field wrapper is a <code> element: without this reset the
     inline-code chrome (border + padding) shrinks it out of alignment
     with the mcp.json panel below. */
  #ask-ai-mcp-other-modal .dialog-body > code {
    display: block;
    background: none;
    border: 0;
    padding: 0;
  }

  #ask-ai-mcp-other-modal-url {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(4px * 4);
    gap: var(--spacing-4);
    height: calc(4px * 10);
    height: var(--spacing-10);
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    /* Same right inset as the mcp.json panel's copy action */
    padding: calc(4px * 2.5) calc(4px * 3);
    padding: var(--spacing-2-5) var(--spacing-3);
  }

  #ask-ai-mcp-other-modal-url span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #ask-ai-mcp-other-modal-url button {
    width: auto;
  }

  /* Workspace code block reused by the modal: same card chrome as the
     doc example panels (portal-example) — identical colors in both
     modes, only the hairline lightens on the dark page. */
  .code-block.dark {
    --example-border-color: var(--pn-code-border);

    background-color: #18181b;

    background-color: var(--pn-code-bg);
    border: 1px solid #27272a;
    border: 1px solid var(--example-border-color);
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    color: #d4d4d8;
    color: var(--pn-code-text);
    font-size: 0.75rem;
    font-size: var(--code-font-size);
    overflow: hidden;
    white-space: normal;
  }

  .dark-theme .code-block.dark {
    --example-border-color: var(--pn-zinc-700);
  }

  .code-block.dark .code-block__header {
    position: relative;
  }

  .code-block.dark .code-block__title {
    border-bottom: 1px solid var(--example-border-color);
    color: #d4d4d8;
    color: var(--pn-zinc-300);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  /* white-space stays normal: the template's own newlines around the
     rendered snippet would otherwise paint as phantom empty lines
     (the code formatting lives in the inner pre). */
  .code-block.dark .code-block__content {
    position: relative;
    overflow-x: auto;
    line-height: 1.7;
    padding: calc(4px * 4) calc(4px * 5);
    padding: var(--spacing-4) var(--spacing-5);
  }

  .code-block.dark .code-block__actions {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    /* The panel border insets the header by 1px: compensate so the
       copy icon stays plumb with the url field's one above. */
    right: calc(calc(4px * 3) - 1px);
    right: calc(var(--spacing-3) - 1px);
    color: #a1a1aa;
    color: var(--pn-zinc-400);
    transform: translateY(-50%);
  }

  .code-block.dark .code-block__actions button {
    display: flex;
  }

  .code-block.dark .code-block__actions button:hover {
    color: #e4e4e7;
    color: var(--pn-zinc-200);
  }

  /* --- OS detector (os-detector controller flags <body>) --- */

  .os-mac-only,
  .os-other-only {
    display: none;
  }

  .os-other span.os-other-only,
  .os-mac span.os-mac-only {
    display: inline-block;
  }

  .os-other span.os-mac-only,
  .os-mac span.os-other-only {
    display: none;
  }

  /* Keyboard shortcut hints mean nothing on touch layouts */
  @media (max-width: 850px) {
    .os-other span.os-other-only,
    .os-mac span.os-mac-only {
      display: none;
    }
  }

  /* --- External links rendered as buttons (x-topics) --- */

  external-link a.button {
    line-height: normal;
    text-align: left;
    white-space: normal;
  }

  /* In the mobile drawer the external links fill their row like the
     other links (their color and weight already blend in: naked
     buttons inherit the .doc-top-nav voice) */
  @media (max-width: 850px) {
    .doc-top-nav external-link {
      width: 100%;
    }

    .doc-top-nav external-link a.button {
      height: calc(4px * 11);
      height: var(--spacing-11);
    }
  }

  /* --- Mermaid diagrams: light surface card, even in fenced code --- */

  pre.mermaid {
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    overflow: auto;
    padding: calc(4px * 4);
    padding: var(--spacing-4);
  }

  pre.mermaid p {
    color: inherit;
  }

  /* Mermaid renders with its light theme (dark strokes and labels):
     keep the card white in dark mode so diagrams stay legible. */
  .dark-theme pre.mermaid {
    background-color: #ffffff;
    background-color: var(--pn-white);
  }

  /* --- Forms and inputs --- */

  select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    height: calc(4px * 8);
    height: var(--spacing-8);
    background:
      url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right calc(4px * 3) center no-repeat,
      #ffffff;
    background:
      url(https://bump.sh/packs/static/select-caret-ec7fc303a92c05d33b42.svg) right var(--spacing-3) center no-repeat,
      var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    color: #09090b;
    color: var(--pn-title);
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    margin-bottom: calc(4px * 3);
    margin-bottom: var(--spacing-3);
    padding-inline: calc(4px * 3) calc(4px * 6);
    padding-inline: var(--spacing-3) var(--spacing-6);
    transition: border-color 150ms ease;
    transition: border-color var(--base-duration) var(--base-timing);
  }

  select:hover {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
  }

  input {
    height: calc(4px * 8);
    height: var(--spacing-8);
    background: #ffffff;
    background: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    color: #09090b;
    color: var(--pn-title);
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    padding-inline: calc(4px * 3);
    padding-inline: var(--spacing-3);
    transition: border-color 150ms ease;
    transition: border-color var(--base-duration) var(--base-timing);
  }

  /* Text-like inputs fill their column (old global/components/input.css);
     number and date stay half-width on desktop. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  textarea {
    width: 100%;
  }

  input[type="number"],
  input[type="datetime-local"] {
    width: 50%;
  }

  @media (max-width: 500px) {
    input[type="number"],
    input[type="datetime-local"] {
      width: 100%;
    }
  }

  input::-moz-placeholder {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: inherit;
  }

  input::placeholder {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: inherit;
  }

  input:hover {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
  }

  input:focus-visible {
    border-color: #71717a;
    border-color: var(--pn-zinc-500);
    outline: 0;
  }

  input[type="checkbox"] {
    height: auto;
    height: initial;
    accent-color: #025fd7;
    accent-color: var(--pn-accent);
  }

  .input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    max-width: 720px;
    max-width: var(--input-max-width);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    color: #27272a;
    color: var(--pn-text);
    padding: calc(4px * 2);
    padding: var(--spacing-2);
    transition: border-color 150ms ease;
    transition: border-color var(--base-duration) var(--base-timing);
  }

  .input:hover {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
  }

  .input:focus {
    border-color: #71717a;
    border-color: var(--pn-zinc-500);
    outline: none;
  }

  .input.disabled {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    cursor: not-allowed;
  }

  .input.disabled:hover {
    border-color: #e4e4e7;
    border-color: var(--pn-border);
  }

  textarea {
    background: #ffffff;
    background: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    color: #27272a;
    color: var(--pn-text);
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    padding: calc(4px * 2) calc(4px * 3);
    padding: var(--spacing-2) var(--spacing-3);
  }

  label {
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  .input-group {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    row-gap: var(--spacing-1);
  }

  .error-message {
    color: #dc2626;
    color: var(--pn-error);
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  /* --- Labels (version chip, branch "default" tag, compare summary) --- */

  .label {
    --label-bg: var(--pn-surface-muted);
    --label-text-color: var(--pn-text);

    display: inline-flex;
    align-items: center;
    gap: 4px;
    gap: var(--spacing-1);
    background-color: #f4f4f5;
    background-color: var(--label-bg);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    color: #27272a;
    color: var(--label-text-color);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    line-height: 2;
    padding: 0 calc(4px * 2);
    padding: 0 var(--spacing-2);
    white-space: nowrap;
  }

  .label svg {
    height: 13px;
  }

  .label[data-label-type="outlined"] {
    background: 0;
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
  }

  .label[data-label-status="info"] {
    --label-bg: var(--pn-accent-soft);
    --label-text-color: var(--pn-accent-text);
  }

  .label[data-label-status="success"] {
    --label-bg: var(--pn-success-soft);
    --label-text-color: var(--pn-success-text);
  }

  .label[data-label-status="warning"] {
    --label-bg: var(--pn-warning-soft);
    --label-text-color: var(--pn-warning-text);
  }

  .label[data-label-status="error"] {
    --label-bg: var(--pn-error-soft);
    --label-text-color: var(--pn-error-text);
  }

  .label[data-label-status="inverted"] {
    --label-bg: var(--bg-color-inverted);
    --label-text-color: var(--text-color-inverted);
  }

  /* --- Loaders (search spinner, explorer send button) --- */

  .loader[data-loader-type="circle"] {
    animation: rotation 1s linear infinite;
    aspect-ratio: 1 / 1;
    border: 2px solid #025fd7;
    border: 2px solid var(--pn-accent);
    border-bottom-color: transparent;
    border-radius: 50%;
    height: calc(4px * 4);
    height: var(--spacing-4);
  }

  /* Legacy renders actual bars; here it becomes a quiet ring spinner.
     currentColor keeps it legible on any surface (search form, accent
     Send request button). */
  .loader[data-loader-type="bars"] {
    animation: rotation 1s linear infinite;
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    width: calc(4px * 4);
    width: var(--spacing-4);
  }

  /* --- Copy field (share request dialog) --- */

  copy-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding: calc(4px * 3);
    padding: var(--spacing-3);
  }

  /* Long urls truncate: without this the span takes the whole row and
     the flex squeezes the copy button (and its svg) down to nothing */
  copy-field span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  copy-field button[data-button-style="naked"] {
    color: #27272a;
    color: var(--pn-text);
    flex-shrink: 0;
  }

  copy-field button[data-button-style="naked"]:hover {
    text-decoration: none;
  }

  copy-field button[data-button-style="naked"][disabled] {
    cursor: auto;
  }

  copy-field svg {
    width: auto;
    height: auto;
  }

  /* --- Preview call-to-action: inverted band pinned to the bottom --- */

  .call-to-action-container {
    position: sticky;
    bottom: 0;
    z-index: 10;
    width: 100%;
    padding: calc(4px * 8) calc(4px * 12);
    padding: var(--spacing-8) var(--doc-inline-spacing);
  }

  .call-to-action {
    display: flex;
    align-items: center;
    background-color: #18181b;
    background-color: var(--doc-base-banner-background-color);
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    color: #ffffff;
    color: var(--pn-white);
    padding: calc(4px * 4) calc(4px * 6);
    padding: var(--spacing-4) var(--spacing-6);
  }

  .call-to-action .live-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 8px;
    height: 8px;
    margin-right: calc(4px * 6);
    margin-right: var(--spacing-6);
  }

  .call-to-action .live-dot .dot,
  .call-to-action .live-dot .pulse {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    background-color: var(--pn-white);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
  }

  .call-to-action .live-dot .pulse {
    animation: dot-scale-fade 2s infinite;
  }

  .call-to-action .live-dot .pulse.two {
    animation-delay: 0.25s;
  }

  .call-to-action-text {
    display: flex;
    flex-direction: column;
    margin-right: calc(4px * 8);
    margin-right: var(--spacing-8);
  }

  .call-to-action-text .title-container {
    display: flex;
    align-items: center;
  }

  .call-to-action-text .title {
    margin-bottom: 0;
    color: #ffffff;
    color: var(--pn-white);
    font-size: 1rem;
    font-size: var(--text-base);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .call-to-action-text .expiration {
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: #d4d4d8;
    color: var(--pn-zinc-300);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    margin-left: calc(4px * 3);
    margin-left: var(--spacing-3);
    padding: calc(4px * 0.5) calc(4px * 3);
    padding: var(--spacing-05) var(--spacing-3);
  }

  .call-to-action-text .description {
    margin: 4px 0 0;
    margin: var(--spacing-1) 0 0;
    color: #d4d4d8;
    color: var(--pn-zinc-300);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  .call-to-action-ctas {
    display: flex;
    align-items: center;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
    margin-left: auto;
    white-space: nowrap;
  }

  .call-to-action-ctas .contact {
    color: #ffffff;
    color: var(--pn-white);
  }

  @media (max-width: 1220px) {
    .call-to-action-container {
      padding: calc(4px * 6) calc(4px * 12);
      padding: var(--spacing-6) var(--doc-inline-spacing);
    }

    .call-to-action .live-dot {
      margin-right: calc(4px * 4);
      margin-right: var(--spacing-4);
    }

    .call-to-action-text {
      margin-right: 0;
    }

    .call-to-action-text .expiration,
    .call-to-action-text .description,
    .call-to-action-ctas .contact {
      display: none;
    }
  }

  @media (max-width: 500px) {
    .call-to-action-container {
      bottom: calc(4px * 16);
      bottom: var(--spacing-16);
    }

    .call-to-action {
      flex-direction: column;
      align-items: stretch;
      height: auto;
    }

    .call-to-action .live-dot {
      display: none;
    }

    .call-to-action-text {
      margin-bottom: calc(4px * 4);
      margin-bottom: var(--spacing-4);
    }

    .call-to-action-ctas {
      width: 100%;
      margin-left: 0;
    }

    .call-to-action-ctas .button-white {
      width: 100%;
    }
  }

  /* --- Upgrade banner (feature limit reached) --- */

  [data-content-disabled="true"] {
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(250, 250, 250, 1),
      rgba(250, 250, 250, 0) 80%
    );
            mask-image: linear-gradient(
      to bottom,
      rgba(250, 250, 250, 1),
      rgba(250, 250, 250, 0) 80%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(var(--bg-color-rgb), 1),
      rgba(var(--bg-color-rgb), 0) 80%
    );
            mask-image: linear-gradient(
      to bottom,
      rgba(var(--bg-color-rgb), 1),
      rgba(var(--bg-color-rgb), 0) 80%
    );
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    width: 100%;
  }

  .banner {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
  }

  .banner__content,
  .banner__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .banner__title {
    margin-bottom: 0;
    color: #09090b;
    color: var(--pn-title);
    font-size: 1em;
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .banner__buttons {
    display: flex;
    flex-direction: row;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    margin-top: calc(4px * 2);
    margin-top: var(--spacing-2);
  }

  .public__upgrade-banner {
    position: absolute;
    bottom: calc(4px * 12);
    bottom: var(--spacing-12);
    z-index: 100;
    max-width: 1200px;
    max-width: var(--screen-xl);
  }

  .doc__upgrade-banner {
    left: calc(280px + calc(4px * 12));
    left: calc(var(--sidebar-width) + var(--spacing-12));
    right: calc(4px * 12);
    right: var(--spacing-12);
    max-width: calc(100% - 280px - calc(4px * 12) * 2);
    max-width: calc(100% - var(--sidebar-width) - var(--spacing-12) * 2);
  }

  .hub__upgrade-banner {
    left: calc(4px * 8);
    left: var(--spacing-8);
    right: calc(4px * 8);
    right: var(--spacing-8);
    max-width: calc(100% - calc(4px * 8) * 2);
    max-width: calc(100% - var(--spacing-8) * 2);
  }

  /* --- Dark-mode toggle: the legacy sun/moon switch on the next
     mechanic. The markup stays a checkbox label
     (application/_theme_toggle partial); dark-theme controller relies
     on [data-dark-theme-target="toggle"] and the checked attribute.

     The checkbox itself is the track (appearance: none) so every
     state reads from plain :checked selectors: styling the wrapping
     label through :has(> :checked) left the pseudos unpainted on
     first render (Chrome mis-invalidates them when the parser inserts
     the input after the label started rendering).

     ::before is the knob, ::after the sun (dot + eight box-shadow
     rays) that morphs into a crescent moon. Art and coordinates come
     verbatim from the legacy theme-toggle.css, drawn relative to the
     40×12 track. --- */

  .toggle-label {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  /* > .toggle-darkmode outranks the input[type="checkbox"] reset above */
  .toggle-label > .toggle-darkmode {
    --toggle-icon-color: var(--pn-text);

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;
    position: relative;
    width: calc(4px * 10);
    width: var(--spacing-10);
    height: calc(4px * 3);
    height: var(--spacing-3);
    background-color: #d4d4d8;
    background-color: var(--pn-zinc-300);
    border: 0;
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    cursor: pointer;
    /* Room for the knob overhang in the header row */
    margin: calc(4px * 2) 0;
    margin: var(--spacing-2) 0;
    padding: 0;
    transition: background-color 150ms ease;
    transition: background-color var(--base-duration) var(--base-timing);
  }

  .toggle-darkmode::before,
  .toggle-darkmode::after {
    content: "";
    position: absolute;
    left: 0;
  }

  /* Knob: 24px circle riding on the 12px track, centered overhang */
  .toggle-darkmode::before {
    top: calc((calc(4px * 6) - calc(4px * 3)) / -2);
    top: calc((var(--spacing-6) - var(--spacing-3)) / -2);
    width: calc(4px * 6);
    width: var(--spacing-6);
    height: calc(4px * 6);
    height: var(--spacing-6);
    background-color: #fafafa;
    background-color: var(--pn-bg);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--pn-shadow-sm);
  }

  .toggle-darkmode::after {
    top: 2px;
    width: calc(4px * 2);
    width: var(--spacing-2);
    height: calc(4px * 2);
    height: var(--spacing-2);
    margin-left: calc(4px * 2);
    margin-left: var(--spacing-2);
    background-color: var(--toggle-icon-color);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    box-shadow:
      7px 0 0 -3px var(--toggle-icon-color),
      -7px 0 0 -3px var(--toggle-icon-color),
      0 7px 0 -3px var(--toggle-icon-color),
      0 -7px 0 -3px var(--toggle-icon-color),
      5px -5px 0 -3px var(--toggle-icon-color),
      -5px -5px 0 -3px var(--toggle-icon-color),
      -5px 5px 0 -3px var(--toggle-icon-color),
      5px 5px 0 -3px var(--toggle-icon-color);
  }

  .toggle-darkmode:hover {
    background-color: #a1a1aa;
    background-color: var(--pn-zinc-400);
  }

  .toggle-darkmode:checked {
    background-color: #025fd7;
    background-color: var(--pn-accent);
  }

  .toggle-darkmode:checked::before,
  .toggle-darkmode:checked::after {
    left: 50%;
  }

  /* Moon: transparent disc, the offset shadow draws the crescent */
  .toggle-darkmode:checked::after {
    top: -5px;
    width: calc(4px * 4);
    width: var(--spacing-4);
    height: calc(4px * 4);
    height: var(--spacing-4);
    margin-left: calc(calc(4px * 2) + 2px);
    margin-left: calc(var(--spacing-2) + 2px);
    background-color: transparent;
    border: 0;
    box-shadow: -5px 3px 0 0 var(--toggle-icon-color);
  }

  .toggle-darkmode:focus-visible {
    outline: 3px solid color-mix(in oklch, #27272a, transparent 40%);
    outline: var(--focus-outline);
    outline-offset: 2px;
    outline-offset: var(--focus-outline-offset);
  }

  @media (prefers-reduced-motion: no-preference) {
    .toggle-darkmode::before,
    .toggle-darkmode::after {
      transition: left 0.4s ease-out;
    }

    .toggle-darkmode:checked::after {
      animation: daynight 0.7s;
    }

    .toggle-darkmode:not(:checked)::after {
      animation: nightday 0.7s;
    }
  }

  @keyframes daynight {
    0% {
      top: 2px;
      width: calc(4px * 2);
      width: var(--spacing-2);
      height: calc(4px * 2);
      height: var(--spacing-2);
      margin-left: calc(4px * 2);
      margin-left: var(--spacing-2);
      background-color: transparent;
      box-shadow:
        7px 0 0 -3px var(--toggle-icon-color),
        -7px 0 0 -3px var(--toggle-icon-color),
        0 7px 0 -3px var(--toggle-icon-color),
        0 -7px 0 -3px var(--toggle-icon-color),
        5px -5px 0 -3px var(--toggle-icon-color),
        -5px -5px 0 -3px var(--toggle-icon-color),
        -5px 5px 0 -3px var(--toggle-icon-color),
        5px 5px 0 -3px var(--toggle-icon-color);
      transform: rotate(0deg);
    }

    40% {
      top: 2px;
      width: calc(4px * 2);
      width: var(--spacing-2);
      height: calc(4px * 2);
      height: var(--spacing-2);
      background-color: transparent;
      box-shadow: none;
      transform: rotate(180deg);
    }

    60% {
      top: -5px;
      width: calc(4px * 4);
      width: var(--spacing-4);
      height: calc(4px * 4);
      height: var(--spacing-4);
      box-shadow: -5px 3px 0 0 var(--toggle-icon-color);
      transform: rotate(360deg);
    }

    100% {
      top: -5px;
      width: calc(4px * 4);
      width: var(--spacing-4);
      height: calc(4px * 4);
      height: var(--spacing-4);
      transform: rotate(360deg);
    }
  }

  @keyframes nightday {
    0% {
      top: -5px;
      width: calc(4px * 4);
      width: var(--spacing-4);
      height: calc(4px * 4);
      height: var(--spacing-4);
      background-color: transparent;
      border: 0;
      box-shadow: -5px 3px 0 0 var(--toggle-icon-color);
      transform: rotate(360deg);
    }

    20% {
      top: 2px;
      width: calc(4px * 2);
      width: var(--spacing-2);
      height: calc(4px * 2);
      height: var(--spacing-2);
      background-color: transparent;
      border: 0;
      box-shadow: -1px 1px 0 0 var(--toggle-icon-color);
      transform: rotate(360deg);
    }

    30% {
      top: 2px;
      width: calc(4px * 2);
      width: var(--spacing-2);
      height: calc(4px * 2);
      height: var(--spacing-2);
      background-color: transparent;
      border: 0;
      box-shadow: none;
      transform: rotate(360deg);
    }

    100% {
      top: 2px;
      width: calc(4px * 2);
      width: var(--spacing-2);
      height: calc(4px * 2);
      height: var(--spacing-2);
      margin-left: calc(4px * 2);
      margin-left: var(--spacing-2);
      box-shadow:
        7px 0 0 -3px var(--toggle-icon-color),
        -7px 0 0 -3px var(--toggle-icon-color),
        0 7px 0 -3px var(--toggle-icon-color),
        0 -7px 0 -3px var(--toggle-icon-color),
        5px -5px 0 -3px var(--toggle-icon-color),
        -5px -5px 0 -3px var(--toggle-icon-color),
        -5px 5px 0 -3px var(--toggle-icon-color),
        5px 5px 0 -3px var(--toggle-icon-color);
      transform: rotate(360deg);
    }
  }

  /* In the mobile drawer the toggle becomes a labeled settings row,
     last of the menu: the header hides the label text, the menu
     shows it. */
  @media (max-width: 850px) {
    .doc-top-nav > .toggle-label {
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: calc(4px * 11);
      min-height: var(--spacing-11);
      font-size: 0.875rem;
      font-size: var(--nav-font-size);
    }
  }

  /* --- Changes compare bar (public_doc_changes/compare) --- */

  .doc-compare page-breadcrumbs {
    height: calc(4px * 16);
    height: var(--spacing-16);
  }

  /* No band: like the changelog title row, the form sits on the page
     background under the single chrome bar */
  .doc-compare__bar {
    display: flex;
    justify-content: center;
    padding: calc(4px * 6) calc(4px * 8) calc(4px * 4);
    padding: var(--spacing-6) var(--spacing-8) var(--spacing-4);
  }

  .doc-compare__form-container {
    container: compare-fields / inline-size;
    display: grid;
    width: 1200px;
    width: var(--screen-xl);
  }

  .doc-compare__narrow {
    --form-width: 752px;
    --wrapper-width: var(--form-width);

    justify-content: center;
  }

  /* The wrapper's fixed 1fr side rails would wrap the page title: let
     the rails grow to their content, the fields keep the middle track.
     The buttons rail gets a fixed floor instead of max-content — sized
     for the "Comparison in progress" disable_with label (~194px), so
     the whole row stays put when the submit swaps its text. The
     tighter column gap buys the floor its room: with the default 32px
     the fields track would shrink below --form-width and lose its edge
     alignment with the diff content. */
  .doc-compare__bar .doc-compare__narrow {
    grid-template-columns:
      minmax(max-content, 1fr)
      minmax(0, var(--form-width))
      minmax(12.5rem, 1fr);
    -moz-column-gap: calc(4px * 5);
         column-gap: calc(4px * 5);
    -moz-column-gap: var(--spacing-5);
         column-gap: var(--spacing-5);
  }

  .doc-compare__form-title {
    display: flex;
    align-items: center;
    grid-column: 1;
    margin: 0;
    /* Same rank as the changelog and change page titles */
    font-size: 1.5rem;
    font-size: var(--text-2xl);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .doc-compare__form-fields {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: calc(4px * 4);
    gap: var(--spacing-4);
  }

  /* min-width lets the pair shrink into its half of the track: selects
     size to their longest option otherwise, overflowing under the
     Compare button (whose label grows to "Comparison in progress") */
  .doc-compare__form-item {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: calc(4px * 8);
    height: var(--spacing-8);
    min-width: 0;
    width: 100%;
  }

  .doc-compare__form-item select {
    cursor: pointer;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    margin: 0;
    text-overflow: ellipsis;
    width: auto;
  }

  .doc-compare__form-item select:first-child {
    border-radius: 9999px 0 0 9999px;
    border-radius: var(--pn-radius-round) 0 0 var(--pn-radius-round);
    flex-shrink: 0;
    min-width: calc(4px * 35);
    min-width: var(--spacing-35);
    padding: 4px calc(4px * 6) 4px calc(4px * 4);
    padding: var(--spacing-1) var(--spacing-6) var(--spacing-1) var(--spacing-4);
  }

  /* The version select absorbs the item's remaining width and
     ellipsizes: the selects fill exactly the fields track, edges level
     with the diff content below, like the legacy layout */
  .doc-compare__form-item select + select {
    flex: 1;
    border-left: 0;
    border-radius: 0 9999px 9999px 0;
    border-radius: 0 var(--pn-radius-round) var(--pn-radius-round) 0;
    min-width: 0;
    padding: 4px calc(4px * 8) 4px calc(4px * 4);
    padding: var(--spacing-1) var(--spacing-8) var(--spacing-1) var(--spacing-4);
  }

  .doc-compare__form-item select:invalid {
    color: #a1a1aa;
    color: var(--pn-zinc-400);
  }

  .doc-compare__form-icon {
    flex-shrink: 0;
    color: #71717a;
    color: var(--pn-text-secondary);
    height: 9px;
    width: 10px;
  }

  .doc-compare__form-buttons {
    display: flex;
    align-items: center;
    justify-content: end;
    grid-column: 3;
  }

  .doc-compare__change-component {
    padding-block: calc(4px * 6);
    padding-block: var(--spacing-6);
  }

  .doc-compare__change-component .back-link {
    align-self: start;
    grid-column: 1;
  }

  .doc-compare__change-component .doc-compare__narrow {
    grid-row-gap: calc(4px * 8);
    grid-row-gap: var(--spacing-8);
  }

  /* Quiet lead-in line above the diff cards, on the changelog feed and
     the compare result alike: no box of its own */
  .doc-compare__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .doc-compare__summary .label {
    margin: 0;
  }

  /* The breaking count is the only summary label rendered without the
     outlined type: same chip shape as its siblings, but it keeps its
     soft error fill — breaking deserves more weight than the counts */
  .doc-compare__summary .label[data-label-status="breaking"] {
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-color: color-mix(in srgb, #dc2626, transparent 70%);
  }

@supports (color: color-mix(in lch, red, blue)){
.doc-compare__summary .label[data-label-status="breaking"] {
    border-color: color-mix(in srgb, var(--pn-error), transparent 70%);
  }
}

  @media (max-width: 1050px) {
    /* The second selector restates the bar's 3-track rule at higher
       specificity: without it the desktop tracks would win here */
    .doc-compare__narrow,
    .doc-compare__bar .doc-compare__narrow {
      gap: calc(4px * 6);
      gap: var(--spacing-6);
      grid-template-columns: 1fr;
    }

    .doc-compare__narrow > * {
      grid-column: revert;
      justify-content: start;
    }
  }

  @container compare-fields (width < 784px) {
    .doc-compare__form-fields {
      flex-direction: column;
    }

    .doc-compare__form-icon {
      rotate: 90deg;
    }
  }

  @container compare-fields (width < 350px) {
    /* The stacked pair needs its natural height: the desktop 32px row
       height would overflow onto the arrow and the submit button */
    .doc-compare__form-item {
      flex-direction: column;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
      height: auto;
    }

    .doc-compare__form-item select:first-child,
    .doc-compare__form-item select + select {
      border: 1px solid #e4e4e7;
      border: var(--pn-hairline);
      border-radius: 9999px;
      border-radius: var(--pn-radius-round);
    }
  }
}

/* Keyframe names are a JS/CSS contract with the old bundle: keep them */
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes dot-scale-fade {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(2.5);
  }

  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

/* Unlayered on purpose: the Rouge theme arrives as an inline
   unlayered stylesheet, which beats every layered rule. The wrapper
   and its pre dissolve into the .code-block.dark panel. */
.code-block.dark .highlight,
.code-block.dark .highlight pre {
  background-color: transparent;
  margin: 0;
  padding: 0;
}

/* API explorer page: header/wrapper shell, request bar, auth box,
   parameter forms and the request/response panels. Secondary surface:
   same structure as the old bundle, restyled through the tokens. The
   dark panel look of .explorer-example comes from components/example.css.

   JS contracts: explorer-* controllers toggle [data-toggle-active],
   .clearable on clearable-form roots, .filled/.empty auth status,
   .selected on .server-button, [data-status-code] on the response chip,
   .single-server/.show-single-server on the server name. */

@layer pn-layout {
  portal-explorer {
    display: block;
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  /* The page shell (.wrapper grid, sticky .header-wrapper band and its
     mobile drawer form) comes from hubs/hub.css: same bundle, same
     markup. Only the explorer-specific drawer trigger and gutter are
     declared below. */

  /* --- Mobile: the drawer opens on the body flag, not .open --- */

  @media (max-width: 850px) {
    [data-toggled-menu="true"] portal-explorer .header-wrapper {
      transform: translateX(0);
    }

    /* Slightly narrower gutter than the hub pages */
    portal-explorer .wrapper {
      grid-template-columns: 1fr min(var(--wrapper-width), calc(100% - 48px)) 1fr;
    }
  }
}

@layer pn-components {
  /* ================= Request bar ================= */

  /* Sits in the wrapper's center column (.wrapper > * default). The
     old bundle declared grid-column: 1 / -1 but lost it to the
     .wrapper > * specificity — here the layer order would make it win,
     so it must not be declared at all. */
  explorer-request-bar {
    display: flex;
    flex-wrap: wrap;
    position: sticky;
    top: calc(calc(4px * 16) + 0px);
    top: calc(var(--spacing-16) + var(--body-top, 0px));
    z-index: 9;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    background-color: #fafafa;
    background-color: var(--pn-bg);
    margin-block-end: calc(4px * 8);
    margin-block-end: var(--spacing-8);
    padding: calc(4px * 4) 0 0;
    padding: var(--spacing-4) 0 0;
  }

  /* Soft fade under the sticky bar */
  explorer-request-bar::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(4px * 8);
    height: var(--spacing-8);
    background-image: linear-gradient(
      to bottom,
      color-mix(in srgb, #fafafa, transparent 66%),
      transparent
    );
    pointer-events: none;
  }

@supports (color: color-mix(in lch, red, blue)){
explorer-request-bar::after {
    background-image: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--pn-bg), transparent 66%),
      transparent
    );
  }
}

  explorer-request-bar .dropdown-title,
  explorer-request-bar > .button,
  explorer-request-bar .request-url {
    min-height: calc(4px * 10);
    min-height: var(--spacing-10);
  }

  /* --- Verb + URL segment --- */

  /* Very long operation titles: cap the picker at half the bar and
     end-truncate on the right, so the url always keeps its half. */
  explorer-request-bar .dropdown.operations {
    max-width: 50%;
  }

  explorer-request-bar .dropdown.operations .dropdown-title [data-dropdown-target="current"] {
    /* block, not the generic flex: the ellipsis only crops text in
       plain inline flow */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* flex-basis 0: the bar wraps on the item's content size, and a long
     url would push the whole segment to a second line. From zero it
     only ever grows into the remaining space, so it stays on the
     operations dropdown's line and the path crops instead. */
  explorer-request-bar .request-url {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    padding-inline-end: calc(4px * 4);
    padding-inline-end: var(--spacing-4);
  }

  explorer-request-bar .request-url .operation-verb {
    display: flex;
    align-items: center;
    align-self: stretch;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-start-start-radius: calc(8px - 1px);
    border-start-start-radius: calc(var(--pn-radius-md) - 1px);
    border-end-start-radius: calc(8px - 1px);
    border-end-start-radius: calc(var(--pn-radius-md) - 1px);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    margin: -1px 0 -1px -1px;
    padding-inline: calc(4px * 4);
    padding-inline: var(--spacing-4);
  }

  explorer-request-bar .request-url .operation-verb.verb {
    background: #f4f4f5;
    background: var(--pn-surface-muted);
    border: 0;
    color: #71717a;
    color: var(--pn-text-secondary);
    margin: 0;
  }

  explorer-request-bar .request-url .operation-path {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    margin-inline-end: auto;
    padding-block: calc(4px * 2);
    padding-block: var(--spacing-2);
  }

  /* Long urls end-truncate from the left (rtl/bdi markup), same as the
     example card headers. */
  explorer-request-bar .request-url .operation-path > span[dir="rtl"] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Plain inline flow: an atomic box (inline-flex) cannot be cropped
     character by character by the ellipsis. The flex chrome is only
     needed once server-variable widgets render inside. */
  explorer-request-bar
    .request-url
    .operation-path
    [data-explorer-server-variables-target="serverUrl"]:has(.server-variable-wrapper) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    gap: var(--spacing-1);
  }

  explorer-request-bar .request-url .dropdown {
    margin-inline-start: auto;
  }

  explorer-request-bar .request-url .dropdown-title {
    background: transparent;
    border: 0;
    min-height: 0;
  }

  explorer-request-bar .request-url .menu-dropdown {
    left: auto;
    right: calc(4px * -3);
    right: var(--spacing-3-minus);
  }

  explorer-request-bar .server-button {
    border: none;
  }

  explorer-request-bar .server-button span {
    margin-right: calc(4px * 8);
    margin-right: var(--spacing-8);
  }

  explorer-request-bar .server-button svg:is(button:not(.selected) > *) {
    display: none;
  }

  explorer-request-bar .single-server {
    display: none;
  }

  explorer-request-bar .show-single-server {
    display: block;
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  /* --- Shared-request context band --- */

  explorer-request-bar .share-context {
    width: 100%;
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
    border: 1px solid color-mix(in srgb, #025fd7, transparent 75%);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
  }

@supports (color: color-mix(in lch, red, blue)){
explorer-request-bar .share-context {
    border: 1px solid color-mix(in srgb, var(--pn-accent), transparent 75%);
  }
}

  explorer-request-bar .share-context a {
    text-decoration: underline;
  }

  /* --- Server variables --- */

  explorer-request-bar .server-variable-wrapper {
    position: relative;
  }

  explorer-request-bar .server-variable-input {
    box-sizing: border-box;
    flex-shrink: 0;
    height: calc(4px * 6);
    height: var(--spacing-6);
    min-width: calc(4px * 12);
    min-width: var(--spacing-12);
    max-width: calc(4px * 64);
    max-width: var(--spacing-64);
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    color: #27272a;
    color: var(--pn-text);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    overflow: hidden;
    padding-inline: calc(4px * 2);
    padding-inline: var(--spacing-2);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  explorer-request-bar .server-variable-dropdown {
    height: calc(4px * 6);
    height: var(--spacing-6);
  }

  explorer-request-bar .server-variable-dropdown .dropdown-title {
    min-height: auto;
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 6px;
    border-radius: var(--pn-radius-sm);
    padding: calc(4px * 0.25) calc(4px * 2);
    padding: var(--spacing-px) var(--spacing-2);
  }

  explorer-request-bar .server-variable-dropdown .menu-dropdown {
    left: 0;
    right: auto;
  }

  @media (max-width: 849.98px) {
    explorer-request-bar .request-url {
      width: 100%;
    }

    explorer-request-bar .request-url .operation-path {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    explorer-request-bar .request-url .dropdown {
      max-width: 50%;
    }

    explorer-request-bar .request-url .dropdown .dropdown-title {
      padding: 0;
    }

    explorer-request-bar .request-url .dropdown .dropdown-title [data-dropdown-target="current"] {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    explorer-request-bar span[data-explorer-share-target="server"] {
      max-width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  @media (max-width: 499.98px) {
    explorer-request-bar #operations-dropdown {
      width: 100%;
    }

    explorer-request-bar .dropdown-title [data-dropdown-target="current"] {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    explorer-request-bar .request-url .show-single-server {
      display: none;
    }
  }

  /* Floating variable tooltip (created by explorer-server-variables) */
  .server-variable-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: 400px;
    max-height: calc(4px * 14);
    max-height: var(--spacing-14);
    width: -moz-max-content;
    width: max-content;
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    box-shadow: var(--pn-shadow-md);
    color: #27272a;
    color: var(--pn-text);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
    pointer-events: none;
    word-wrap: break-word;
  }

  .server-variable-tooltip::after {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(calc(4px * 1.5) + calc(4px * 0.25));
    border-width: calc(var(--spacing-1-5) + var(--spacing-px));
    border-color: #ffffff transparent transparent transparent;
    border-color: var(--pn-surface) transparent transparent transparent;
    filter: drop-shadow(0 1.5px 0 #e4e4e7);
    filter: drop-shadow(0 1.5px 0 var(--pn-border));
    pointer-events: none;
    transform: translateX(-50%);
  }

  .server-variable-tooltip-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ================= Authentication box ================= */

  #api-key-form {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    margin: calc(4px * 5) 0 calc(4px * 3);
    margin: var(--spacing-5) 0 var(--spacing-3);
    padding: calc(4px * 4);
    padding: var(--spacing-4);
  }

  /* One-shot flash when a request comes back 401 */
  #api-key-form::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
  }

  #api-key-form[data-form-highlight="true"]::after {
    background-color: color-mix(in srgb, #025fd7, transparent 30%);
    opacity: 0;
    transform: scaleX(1.05) scaleY(1.25);
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
  }

@supports (color: color-mix(in lch, red, blue)){
#api-key-form[data-form-highlight="true"]::after {
    background-color: color-mix(in srgb, var(--pn-accent), transparent 30%);
  }
}

  #api-key-form:has(.form-content[aria-hidden="true"]) .dropdown {
    pointer-events: none;
  }

  #api-key-form:has(.form-content[aria-hidden="true"]) .dropdown-title svg {
    display: none;
  }

  #api-key-form .auth-form-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  #api-key-form .auth-form-header .title-content {
    display: flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    max-width: 100%;
  }

  #api-key-form .auth-form-header .title-content .dropdown {
    min-width: 0;
  }

  #api-key-form .dropdown-title {
    background: transparent;
    border: 0;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    min-height: 0;
    padding-inline: 0;
  }

  #api-key-form .dropdown-title span[data-explorer-auth-box-target="label"] {
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  #api-key-form .title-content [data-dropdown-target="current"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Auth status (explorer-auth-box controller) */
  #api-key-form .filled {
    color: #059669;
    color: var(--pn-success);
  }

  #api-key-form .empty {
    color: #d97706;
    color: var(--pn-warning);
  }

  #api-key-form .form-content {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  #api-key-form .password-input {
    display: flex;
    align-items: center;
    position: relative;
  }

  #api-key-form .title {
    display: flex;
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    max-width: -moz-max-content;
    max-width: max-content;
  }

  #api-key-form .title span[data-explorer-select-auth-scheme-target="authSchemeLabel"] {
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    max-width: -moz-max-content;
    max-width: max-content;
  }

  #api-key-form a {
    text-decoration: underline;
  }

  #api-key-form .description {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #api-key-form input[type="text"] {
    width: 100%;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  #api-key-form .actions {
    display: flex;
    align-items: center;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
  }

  #api-key-form button[data-access-token-target] {
    position: absolute;
    right: calc(4px * 5);
    right: var(--spacing-5);
    color: currentColor;
  }

  #api-key-form .menu-dropdown {
    width: 100%;
  }

  #api-key-form .menu-dropdown li {
    overflow: hidden;
  }

  #api-key-form .menu-dropdown button[data-button-style="naked"] {
    width: 100%;
  }

  #api-key-form .menu-dropdown button[data-button-style="naked"] span {
    width: 90%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #api-key-form .menu-dropdown svg {
    display: none;
  }

  #api-key-form .menu-dropdown svg:is(li[aria-selected] *) {
    display: block;
    width: auto;
    width: initial;
    height: auto;
    height: initial;
  }

  @media (max-width: 500px) {
    #api-key-form .auth-form-header {
      flex-direction: column;
      align-items: flex-start;
    }

    #api-key-form .description {
      flex-direction: column;
      align-items: flex-end;
      gap: calc(4px * 2);
      gap: var(--spacing-2);
    }
  }

  /* ================= Parameter forms ================= */

  .property-container {
    display: flex;
    flex-direction: column;
    row-gap: calc(4px * 3);
    row-gap: var(--spacing-3);
  }

  .property-container > button.add {
    display: none;
    align-self: start;
  }

  .property-container .property:first-child:not(:only-of-type, :has(input)) {
    display: none;
  }

  .property-container .property:first-child:has(input) ~ button.add {
    display: revert;
  }

  .property-container button {
    height: auto;
  }

  .property-container button.add {
    width: 100%;
  }

  .property-container button.add:where(.property + *) {
    display: revert;
  }

  .property-container button.remove {
    color: #27272a;
    color: var(--pn-text);
    margin-inline-start: auto;
  }

  .property-container .attributes {
    display: flex;
  }

  .property-container input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0%) sepia(0%) saturate(0%) brightness(100%) contrast(100%);
    filter: var(--date-time-indicator-color);
  }

  /* ================= Explorer content ================= */

  .explorer-content [data-controller="clearable-form"]:not(.clearable) .clear-form-link {
    display: none;
  }

  .explorer-content .doc-section-title {
    margin-block-end: calc(4px * 4);
    margin-block-end: var(--spacing-4);
  }

  .explorer-content .doc-section--column {
    row-gap: 0;
  }

  .explorer-content .properties-list-header {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    border-block-end: 1px solid #e4e4e7;
    border-block-end: var(--pn-hairline);
    padding-block-end: calc(4px * 3);
    padding-block-end: var(--spacing-3);
  }

  .explorer-content .properties-list-header:not(:first-of-type) {
    margin-block-start: calc(4px * 8);
    margin-block-start: var(--spacing-8);
  }

  .explorer-content .properties-list-content {
    -moz-column-gap: calc(4px * 2);
         column-gap: calc(4px * 2);
    -moz-column-gap: var(--spacing-2);
         column-gap: var(--spacing-2);
    justify-content: start;
  }

  .explorer-content .properties-list {
    --even-level-color: var(--pn-accent);
    --odd-level-color: var(--purple);
  }

  .explorer-content .properties-list ul {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    border: 0;
    padding-block: calc(4px * 3);
    padding-block: var(--spacing-3);
  }

  .explorer-content .properties-list :where(.property) {
    border: 0;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    padding: 0;
  }

  .explorer-content .properties-list :where(.property) select {
    margin: 0;
  }

  .explorer-content .properties-list :where(.properties-list) {
    border-inline-start: 1px solid #e4e4e7;
    border-inline-start: var(--pn-hairline);
    padding-inline-start: calc(4px * 6);
    padding-inline-start: var(--spacing-6);
  }

  .explorer-content .properties-list :where(.properties-list) ul {
    padding: 0;
  }

  .explorer-content .properties-list:is([data-tabs-target="panel"] > *) {
    border: 0;
    padding: 0;
  }

  .explorer-content .properties-list > external-link {
    padding-block: calc(4px * 3);
    padding-block: var(--spacing-3);
  }

  .explorer-content .operation-section {
    display: grid;
    flex-grow: 1;
    grid-template-columns: repeat(2, calc(50% - calc(4px * 6)));
    grid-template-columns: repeat(2, calc(50% - var(--spacing-6)));
    grid-gap: calc(4px * 12);
    grid-gap: var(--spacing-12);
    gap: calc(4px * 12);
    gap: var(--spacing-12);
    position: relative;
  }

  .explorer-content .operation-section > .flex-column {
    display: flex;
    flex-direction: column;
    padding-block-end: calc(4px * 17);
    padding-block-end: var(--spacing-17);
  }

  .explorer-content .operation-section .properties-list-header {
    margin-block-start: calc(4px * 5);
    margin-block-start: var(--spacing-5);
  }

  .explorer-content .operation-header {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 4);
    gap: var(--spacing-4);
    padding-block-end: calc(4px * 3);
    padding-block-end: var(--spacing-3);
  }

  .explorer-content .operation-header-content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
  }

  .explorer-content .operation-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    margin: 0;
    color: #09090b;
    color: var(--pn-title);
    font-size: 1.5rem;
    font-size: var(--text-2xl);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
  }

  .explorer-content .attribute-container {
    display: flex;
    flex-direction: column;
    row-gap: calc(4px * 6);
    row-gap: var(--spacing-6);
  }

  .explorer-content .attributes {
    display: flex;
    flex-wrap: wrap;
  }

  .explorer-content .attributes > .remove {
    align-self: center;
    margin-inline-start: 4px;
    margin-inline-start: var(--spacing-1);
  }

  .explorer-content .attributes > .remove svg {
    height: calc(4px * 4);
    height: var(--spacing-4);
  }

  .explorer-content .property-doc-button:hover {
    text-decoration: none;
  }

  .explorer-content .property-doc-button:hover label {
    pointer-events: none;
  }

  .explorer-content .property-name {
    margin: 0;
  }

  .explorer-content .combinator {
    width: 100%;
  }

  /* --- Request/response column --- */

  .explorer-content .doc-section-examples {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 6);
    gap: var(--spacing-6);
  }

  .explorer-content portal-example {
    height: calc((100vh - 200px - 0px) / 2);
    height: calc((100vh - 200px - var(--body-top, 0px)) / 2);
  }

  .explorer-content .request-preview .sticky-scrollable {
    min-height: calc(100vh - calc(4px * 40));
    min-height: calc(100vh - var(--spacing-40));
    padding-block-end: calc(4px * 4);
    padding-block-end: var(--spacing-4);
    top: calc(calc(4px * 38) + 0px);
    top: calc(var(--spacing-38) + var(--body-top, 0px));
  }

  .explorer-content .request-preview .sticky-scrollable::after {
    position: fixed;
    bottom: 0;
  }

  .explorer-content .request-preview copy-field {
    white-space: nowrap;
  }

  .explorer-content .request-preview copy-field span {
    overflow-x: hidden;
    padding-block: 4px;
    padding-block: var(--spacing-1);
    text-overflow: ellipsis;
  }

  @media (max-width: 850px) {
    .explorer-content {
      padding-block: 0 calc(4px * 16);
      padding-block: 0 var(--spacing-16);
      scroll-padding-top: 7.9rem;
    }

    .explorer-content .operation-section {
      display: flex;
      flex-direction: column;
    }

    .explorer-content .request-preview .sticky-scrollable {
      min-height: revert;
    }
  }

  @media (max-width: 500px) {
    .explorer-content .operation-header-content {
      flex-direction: column;
    }
  }

  /* --- Request preview panel --- */

  portal-example.request {
    position: relative;
  }

  portal-example.request .example-content {
    height: auto;
    padding: 0;
    padding-block-end: calc(4px * 12);
    padding-block-end: var(--spacing-12);
  }

  portal-example.request pre code {
    display: block;
    padding: calc(4px * 3);
    padding: var(--spacing-3);
    /* Long URLs (query parameters) wrap instead of clipping.
       pre-wrap only adds break opportunities: the JSON body keeps its
       own newlines and indentation. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  portal-example.request .preview-buttons {
    display: flex;
    justify-content: end;
    position: absolute;
    right: calc(4px * 3);
    right: var(--spacing-3);
    bottom: calc(4px * 3);
    bottom: var(--spacing-3);
    -moz-column-gap: calc(4px * 3);
         column-gap: calc(4px * 3);
    -moz-column-gap: var(--spacing-3);
         column-gap: var(--spacing-3);
    background: #18181b;
    background: var(--pn-code-bg);
  }

  /* Send request: the accent primary, not the white slab the shared
     markup asks for (data-button-style="white" serves the old bundle).
     Hover lightens — darkening reads as pressed on the dark panel. */
  portal-example.request .preview-buttons button[type="submit"] {
    --button-color: var(--pn-accent);
    --button-color-hover: color-mix(in srgb, var(--pn-accent), white 12%);
    --button-text-color: var(--pn-white);
    --button-text-color-hover: var(--pn-white);
    --button-border-color: transparent;
    --button-border-color-hover: transparent;
  }

  @media (max-width: 849.98px) {
    portal-example.request .preview-buttons {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 5;
      width: 100%;
      background-color: #fafafa;
      background-color: var(--pn-bg);
      border-block-start: 1px solid #e4e4e7;
      border-block-start: var(--pn-hairline);
      padding: calc(4px * 3) calc(4px * 6);
      padding: var(--spacing-3) var(--spacing-6);
    }

    /* On the light bottom bar the ghost button flips to light chrome */
    portal-example.request .preview-buttons button:first-child {
      --button-color: transparent;
      --button-color-hover: transparent;
      --button-border-color: var(--pn-border);
      --button-border-color-hover: var(--pn-zinc-400);
      --button-text-color: var(--pn-text);
      --button-text-color-hover: var(--pn-text);
    }
  }

  @media (max-width: 499.98px) {
    portal-example.request .preview-buttons button {
      flex-grow: 1;
    }
  }

  /* --- Response panel --- */

  portal-example.response .banner {
    display: inline-block;
    background-color: #27272a;
    background-color: var(--pn-zinc-800);
    border-color: #3f3f46;
    border-color: var(--pn-zinc-700);
    color: #d4d4d8;
    color: var(--pn-zinc-300);
    margin-block-end: calc(4px * 3);
    margin-block-end: var(--spacing-3);
  }

  portal-example.response [data-status-code] {
    --status-color: var(--pn-warning);

    display: flex;
    align-items: center;
    gap: 4px;
    gap: var(--spacing-1);
    background-color: color-mix(in srgb, #d97706, black 70%);
    border: 1px solid color-mix(in srgb, #d97706, black 45%);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: color-mix(in srgb, #d97706, white 45%);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    margin-inline-end: auto;
    padding-inline: calc(4px * 2);
    padding-inline: var(--spacing-2);
  }

@supports (color: color-mix(in lch, red, blue)){
portal-example.response [data-status-code] {
    background-color: color-mix(in srgb, var(--status-color), black 70%);
    border: 1px solid color-mix(in srgb, var(--status-color), black 45%);
    color: color-mix(in srgb, var(--status-color), white 45%);
  }
}

  portal-example.response [data-status-code]::before {
    content: "•";
  }

  portal-example.response [data-status-code]:empty {
    display: none;
  }

  portal-example.response [data-status-code^="1"] {
    --status-color: var(--pn-accent);
  }

  portal-example.response [data-status-code^="2"] {
    --status-color: var(--pn-success);
  }

  portal-example.response [data-status-code^="3"] {
    --status-color: var(--purple-60);
  }

  portal-example.response [data-status-code^="4"] {
    --status-color: var(--pn-warning);
  }

  portal-example.response [data-status-code^="5"] {
    --status-color: var(--pn-error);
  }

  portal-example.response .object-container {
    display: none;
  }

  portal-example.response .object-container:not(:empty) {
    display: block;
  }

  /* --- Info banners --- */

  .explorer-banner {
    display: flex;
    flex-direction: column;
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
    border: 1px solid color-mix(in srgb, #025fd7, transparent 75%);
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
  }

@supports (color: color-mix(in lch, red, blue)){
.explorer-banner {
    border: 1px solid color-mix(in srgb, var(--pn-accent), transparent 75%);
  }
}

  .explorer-banner-link {
    text-decoration: underline;
  }

  /* --- Documentation slide-over --- */

  .explorer-doc {
    --side-padding: var(--spacing-12);

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: 50vw;
    background: #fafafa;
    background: var(--pn-bg);
    border-inline-start: 1px solid #e4e4e7;
    border-inline-start: var(--pn-hairline);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-shadow: var(--pn-shadow-lg);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    transition: all 0.5s ease;
  }

  .explorer-doc:not([data-toggle-active="true"]) {
    opacity: 0;
    transform: translateX(100%);
  }

  .explorer-doc[data-toggle-active="true"] {
    display: block;
    opacity: 1;
    transform: translateX(0);
  }

  .explorer-doc turbo-frame {
    display: block;
    height: 100%;
    overflow: auto;
    padding: calc(4px * 5) var(--side-padding);
    padding: var(--spacing-5) var(--side-padding);
  }

  .explorer-doc .close-doc {
    position: fixed;
    top: calc(4px * 6);
    top: var(--spacing-6);
    right: var(--side-padding);
    z-index: 10;
    color: currentColor;
  }

  .explorer-doc .property {
    scroll-margin-top: calc(4px * 4);
    scroll-margin-top: var(--spacing-4);
  }

  /* Hidden in the explorer context (views still render them) */
  .explorer-doc .operation-header,
  .explorer-doc .doc-section-examples,
  .explorer-doc .content-type {
    display: none;
  }

  @media (max-width: 849.98px) {
    .explorer-doc {
      --side-padding: var(--spacing-6);

      width: 100vw;
    }
  }
}

/* Hub portal home (public_hubs/show) plus the page scaffolding shared
   by every "portal listing" page: the centered .wrapper grid, the
   sticky .header-wrapper band (which becomes the mobile drawer) and
   the API/hub catalog cards. The explorer reuses this shell and only
   overrides its drawer trigger (explorer/explorer.css).

   JS contracts (do not break):
   - mobile-nav toggles .open on [data-mobile-nav-target="drawer"]
     (.header-wrapper here) below the hardcoded 850px breakpoint;
   - filter controller toggles .active on .filter__tab
     ([data-filter-target="button"]) and rewrites the .hub-category-title
     ([data-filter-target="title"]); it shows/hides cards by setting
     inline display on [data-filter-target="content"] (.list-element);
   - doc-search v1 clones hub cards (#api-<id>.list-element) into the
     .doc-search__dialog results and navigates across .list-element. */

@layer pn-layout {
  /* --- Centered grid shell (old global .wrapper) --- */

  .wrapper {
    --wrapper-width: var(--screen-xl);

    display: grid;
    grid-template-columns: 1fr min(1200px, calc(100% - 64px)) 1fr;
    grid-template-columns: 1fr min(var(--wrapper-width), calc(100% - 64px)) 1fr;
    grid-column-gap: calc(4px * 8);
    grid-column-gap: var(--spacing-8);
    justify-content: center;
  }

  .wrapper > * {
    grid-column: 2;
  }

  .full-bleed {
    grid-column: 1 / -1;
  }

  /* --- Sticky header band (hub, orga and changelog pages) --- */

  .header-wrapper {
    display: block;
    position: sticky;
    top: 0px;
    top: var(--body-top, 0px);
    z-index: 10;
    background-color: color-mix(in srgb, #fafafa, transparent 20%);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid #e4e4e7;
    border-block-end: var(--pn-hairline);
  }

@supports (color: color-mix(in lch, red, blue)){
.header-wrapper {
    background-color: color-mix(in srgb, var(--pn-bg), transparent 20%);
  }
}

  /* The grid already centers the nav: no inline padding needed */
  portal-header.wrapper .main-nav {
    padding-inline: 0;
  }

  /* --- Hub home: main catalog + changelog aside --- */

  .hubs {
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  .hub-wrapper {
    flex-grow: 1;
  }

  .hub-container {
    display: flex;
    align-items: start;
    gap: calc(4px * 10);
    gap: var(--spacing-10);
  }

  .hubs main {
    flex: 1;
    min-width: 0;
    padding-block-end: calc(4px * 16);
    padding-block-end: var(--spacing-16);
  }

  /* The changelog aside draws its own timeline: no separator needed
     between the catalog and the feed */
  .hub-container > hr {
    display: none;
  }

  .hubs aside {
    flex: 0 1 380px;
    position: sticky;
    /* No extra offset: the threshold must not exceed the aside's
       natural position, or sticky pushes it down while the catalog is
       tall and lets it snap back up when filtering shortens it. The
       breathing room below the header comes from the block padding. */
    top: calc(64px + 0px);
    top: calc(var(--doc-nav-height) + var(--body-top, 0px));
    padding-block: calc(4px * 20) calc(4px * 8);
    padding-block: var(--spacing-20) var(--spacing-8);
  }

  /* ================= Mobile (Stimulus breakpoint) ================= */

  @media (max-width: 850px) {
    /* Header band becomes the off-canvas drawer (.open slides it in) */
    .header-wrapper {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0px;
      top: var(--body-top, 0px);
      left: 0;
      /* Some customers have a high nav z-index (999 for MongoDB) */
      z-index: 1000;
      width: 280px;
      width: var(--sidebar-width);
      max-width: calc(100vw - calc(4px * 18));
      max-width: calc(100vw - var(--spacing-18));
      height: calc(100dvh - 0px);
      height: calc(100dvh - var(--body-top, 0px));
      background-color: #fafafa;
      background-color: var(--pn-bg);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      box-shadow: var(--pn-shadow-lg);
      overflow-y: auto;
      padding: calc(4px * 6);
      padding: var(--spacing-6);
      transform: translateX(-100%);
    }

    .header-wrapper.open {
      transform: translateX(0);
    }

    .header-wrapper portal-header.wrapper {
      display: block;
    }

    .hub-container {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .hub-container > hr {
      display: none;
    }

    .hubs main {
      padding-block-end: calc(4px * 10);
      padding-block-end: var(--spacing-10);
    }

    .hubs aside {
      flex-basis: auto;
      position: static;
      padding-block: 0 calc(4px * 16);
      padding-block: 0 var(--spacing-16);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .header-wrapper {
      transition: transform 0.3s ease;
    }
  }
}

@layer pn-components {
  /* --- Hero (hub and orga home) --- */

  .public-hero {
    width: 100%;
    margin: calc(4px * 20) auto calc(4px * 10);
    margin: var(--spacing-20) auto var(--spacing-10);
    max-width: 1200px;
    max-width: var(--screen-xl);
  }

  .public-subhero {
    width: 100%;
    margin: calc(4px * 10) auto calc(4px * 4);
    margin: var(--spacing-10) auto var(--spacing-4);
  }

  .public-hero .title,
  .public-subhero .title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: first baseline;
    margin-bottom: calc(4px * 4);
    margin-bottom: var(--spacing-4);
  }

  /* text-3xl on every viewport: 5xl read as a landing hero, this is
     a catalog page title */
  .public-hero .title h1 {
    font-size: 2rem;
    font-size: var(--text-3xl);
    margin-bottom: 0;
    margin-right: calc(4px * 3);
    margin-right: var(--spacing-3);
  }

  .public-hero .title:has(+ ask-ai) {
    margin-bottom: 0;
  }

  .public-hero ask-ai {
    margin-top: 4px;
    margin-top: var(--spacing-1);
    margin-bottom: calc(4px * 4);
    margin-bottom: var(--spacing-4);
  }

  .public-hero .description {
    max-width: 72ch;
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  /* Same voice as .hub-category-title: the orga sections and the hub
     categories are the same level of the same catalog */
  .public-subhero .title h2 {
    font-size: 1.25rem;
    font-size: var(--text-xl);
    margin-bottom: 0;
    margin-right: calc(4px * 3);
    margin-right: var(--spacing-3);
  }

  /* --- Filter tabs: quiet segmented chips --- */

  .filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    width: 100%;
  }

  .filters li {
    display: flex;
  }

  .filters .filter__tab {
    display: inline-flex;
    align-items: center;
    -moz-column-gap: calc(4px * 2);
         column-gap: calc(4px * 2);
    -moz-column-gap: var(--spacing-2);
         column-gap: var(--spacing-2);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: #71717a;
    color: var(--pn-text-secondary);
    cursor: pointer;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    padding: calc(4px * 1.5) calc(4px * 4);
    padding: var(--spacing-1-5) var(--spacing-4);
    white-space: nowrap;
    transition:
      border-color 150ms ease,
      background-color 150ms ease,
      color 150ms ease;
    transition:
      border-color var(--base-duration) var(--base-timing),
      background-color var(--base-duration) var(--base-timing),
      color var(--base-duration) var(--base-timing);
  }

  /* Dark surface and hairline are one zinc step apart: the pill edge
     melts into its own background. One step lighter, like the search
     keycaps. Before :hover in source so hover still wins. */
  .dark-theme .filters .filter__tab {
    border-color: #3f3f46;
    border-color: var(--pn-zinc-700);
  }

  .filters .filter__tab:hover {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
    color: #27272a;
    color: var(--pn-text);
    text-decoration: none;
  }

  .filters .filter__tab.active,
  .filters .filter__tab.active:hover {
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
    border-color: color-mix(in srgb, #025fd7, transparent 70%);
    color: #025fd7;
    color: var(--pn-accent-text);
  }

@supports (color: color-mix(in lch, red, blue)){
.filters .filter__tab.active,
  .filters .filter__tab.active:hover {
    border-color: color-mix(in srgb, var(--pn-accent), transparent 70%);
  }
}

  @media (max-width: 850px) {
    .filters {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-block-end: calc(4px * 2);
      padding-block-end: var(--spacing-2);
    }
  }

  .hub-category-title {
    font-size: 1.25rem;
    font-size: var(--text-xl);
    margin: calc(4px * 8) 0 calc(4px * 4);
    margin: var(--spacing-8) 0 var(--spacing-4);
  }

  /* --- Catalog: full-width rows, like the legacy list --- */

  .catalog-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-gap: calc(4px * 4);
    grid-gap: var(--spacing-4);
    gap: calc(4px * 4);
    gap: var(--spacing-4);
  }

  /* --- API/hub card: content left, update time right --- */

  .list-element {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    grid-gap: calc(4px * 3) calc(4px * 8);
    grid-gap: var(--spacing-3) var(--spacing-8);
    gap: calc(4px * 3) calc(4px * 8);
    gap: var(--spacing-3) var(--spacing-8);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--pn-shadow-sm);
    color: #27272a;
    color: var(--pn-text);
    padding: calc(4px * 5) calc(4px * 6);
    padding: var(--spacing-5) var(--spacing-6);
    transition:
      border-color 150ms ease,
      box-shadow 150ms ease;
    transition:
      border-color var(--base-duration) var(--base-timing),
      box-shadow var(--base-duration) var(--base-timing);
  }

  .list-element:hover {
    border-color: #d4d4d8;
    border-color: var(--pn-zinc-300);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    box-shadow: var(--pn-shadow-md);
    text-decoration: none;
  }

  /* Dark surface and hairline are one zinc step apart: the card edge
     melts into its own background. One step lighter, like the
     example cards. */
  .dark-theme .list-element {
    border-color: #3f3f46;
    border-color: var(--pn-zinc-700);
  }

  .dark-theme .list-element:hover {
    border-color: #52525b;
    border-color: var(--pn-zinc-600);
  }

  /* The wrapper dissolves into the card grid so the description can
     escape it and span the full card width, under the date column */
  .list-element .content {
    display: contents;
  }

  .list-element .content p {
    margin: 0;
  }

  .list-element .api-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4px * 2) calc(4px * 3);
    gap: var(--spacing-2) var(--spacing-3);
  }

  .list-element .title {
    margin: 0;
    color: #09090b;
    color: var(--pn-title);
    font-size: 1rem;
    font-size: var(--text-base);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .list-element .tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  /* Same accent voice as the doc's deprecated pill (.pill-deprecated):
     the API type chips are the one touch of customer color on the
     catalog cards. The accent tokens carry the dark mode flip. */
  .list-element .tag {
    display: inline-flex;
    align-items: center;
    -moz-column-gap: 4px;
         column-gap: 4px;
    -moz-column-gap: var(--spacing-1);
         column-gap: var(--spacing-1);
    background-color: color-mix(in srgb, #025fd7, white 92%);
    background-color: var(--pn-accent-soft);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: #025fd7;
    color: var(--pn-accent-text);
    font-size: 0.625rem;
    font-size: var(--text-xxs);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.03em;
    line-height: 2;
    padding: 0 calc(4px * 2);
    padding: 0 var(--spacing-2);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .list-element .tag svg {
    height: 9px;
  }

  .list-element .doc-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    grid-column: 1 / -1;
    color: #71717a;
    color: var(--pn-text-secondary);
    overflow: hidden;
  }

  .list-element .extra {
    display: flex;
    grid-row: 1;
    grid-column: 2;
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  @media (max-width: 850px) {
    .list-element {
      grid-template-columns: 1fr;
    }

    .list-element .extra {
      grid-row: auto;
      grid-column: 1;
    }
  }

  /* --- Changelog aside: quiet timeline --- */

  .hubs aside .title {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
  }

  /* Widget header, not a page section: one step down */
  .hubs aside .title h2 {
    margin-bottom: 0;
    font-size: 1rem;
    font-size: var(--text-base);
  }

  /* See all sits right after the title, behind a small separator */
  .hubs aside .title a {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  .hubs aside .title a::before {
    content: "";
    width: 1px;
    height: calc(4px * 3.5);
    height: var(--spacing-3-5);
    background-color: #e4e4e7;
    background-color: var(--pn-border);
  }

  /* The timeline starts below the widget title, slightly indented from
     its left edge, and carries the event dots; events sit one
     --spacing-6 gutter right of it */
  .hubs aside .content {
    margin-top: calc(4px * 2);
    margin-top: var(--spacing-2);
    margin-inline-start: calc(4px * 4);
    margin-inline-start: var(--spacing-4);
    border-inline-start: 1px solid #e4e4e7;
    border-inline-start: var(--pn-hairline);
    padding-inline-start: calc(4px * 6);
    padding-inline-start: var(--spacing-6);
  }

  .hubs aside .changelog-event {
    display: flex;
    flex-direction: column;
    row-gap: calc(4px * 2);
    row-gap: var(--spacing-2);
    padding-block: calc(4px * 4);
    padding-block: var(--spacing-4);
    position: relative;
  }

  /* Timeline dot on the content's left border, centered on the date's
     --spacing-5 first-line box below the --spacing-4 block padding —
     the changelog pages' dot formula on the feed's own line. */
  .hubs aside .changelog-event::before {
    content: "";
    position: absolute;
    top: calc(calc(4px * 4) + (calc(4px * 5) - calc(4px * 2)) / 2);
    top: calc(var(--spacing-4) + (var(--spacing-5) - var(--spacing-2)) / 2);
    left: calc(-1 * calc(4px * 6));
    left: calc(-1 * var(--spacing-6));
    width: calc(4px * 2);
    width: var(--spacing-2);
    height: calc(4px * 2);
    height: var(--spacing-2);
    /* Same stroked dot as the changelog pages */
    background-color: #fafafa;
    background-color: var(--pn-bg);
    border: 1px solid #a1a1aa;
    border: 1px solid var(--pn-zinc-400);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    /* The ring lifts the dot off the hairline it sits on */
    box-shadow: 0 0 0 3px #fafafa;
    box-shadow: 0 0 0 3px var(--pn-bg);
    transform: translateX(calc(-50% - 0.5px));
  }

  .hubs aside .changelog-event__date {
    display: block;
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    /* Owns its --spacing-5 line box: the dot formula centers on it */
    line-height: calc(4px * 5);
    line-height: var(--spacing-5);
  }

  /* API name and version voice comes from the shared
     .changelog-event__tags rules in doc/changelog.css */

  .hubs aside .changelog-event__title {
    display: flex;
    flex-direction: column;
    row-gap: calc(4px * 2);
    row-gap: var(--spacing-2);
  }

  /* Title + Breaking label: same --spacing-2 gap as the changelog
     pages, instead of the bare word space */
  .hubs aside .changelog-event__title > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  /* The event line stays regular: the API name above carries the
     weight of the entry */
  .hubs aside .changelog-event__title h3 {
    display: inline;
    margin: 0;
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
  }

  .hubs aside .changelog-event__title h3 a {
    color: #09090b;
    color: var(--pn-title);
  }

  .hubs aside .changelog-event__title h3 a:hover {
    color: #025fd7;
    color: var(--pn-accent-text);
    text-decoration: none;
  }

  .hubs aside .changelog-event__tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  /* --- Empty state --- */

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(4px * 4);
    gap: var(--spacing-4);
    color: #71717a;
    color: var(--pn-text-secondary);
    padding: calc(4px * 16) calc(4px * 8);
    padding: var(--spacing-16) var(--spacing-8);
    text-align: center;
  }

  .empty-state p {
    margin: 0;
  }

  /* --- Hub search v1 dialog: same look as the v2 dialog.
     The base <dialog> surface comes from components/dialog.css;
     .esc-button is styled in components/search.css. --- */

  .doc-search__dialog {
    --dialog-width: 640px;

    display: flex;
    flex-direction: column;
    max-height: 70vh;
    margin-block-start: 12vh;
    margin-inline: auto;
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    overflow: auto;
  }

  .doc-search__dialog:not([open]) {
    display: none;
  }

  .doc-search__form {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border-bottom: 1px solid #e4e4e7;
    border-bottom: var(--pn-hairline);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
  }

  .doc-search__form svg {
    flex-shrink: 0;
    width: calc(4px * 4);
    width: var(--spacing-4);
    color: #71717a;
    color: var(--pn-text-secondary);
  }

  .doc-search__loader {
    flex-shrink: 0;
  }

  .doc-search__dialog #query {
    flex-grow: 1;
    height: auto;
    background: transparent;
    border: 0;
    color: #09090b;
    color: var(--pn-title);
    font-size: 0.9375rem;
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    margin: 0;
    padding: 4px 0;
    padding: var(--spacing-1) 0;
  }

  .doc-search__dialog #query::-moz-placeholder {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
  }

  .doc-search__dialog #query::placeholder {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
  }

  /* Results: group headings + plain <ul> built by the controller */
  .doc-search__dialog .dialog-body {
    padding: calc(4px * 2) calc(4px * 2) calc(4px * 3);
    padding: var(--spacing-2) var(--spacing-2) var(--spacing-3);
  }

  .doc-search__dialog .dialog-body h3 {
    margin: 0 0 4px;
    margin: 0 0 var(--spacing-1);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.625rem;
    font-size: var(--text-xxs);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.03em;
    padding-inline: calc(4px * 3);
    padding-inline: var(--spacing-3);
    text-transform: uppercase;
  }

  .doc-search__dialog .dialog-body h3:where(ul + *) {
    margin-top: calc(4px * 4);
    margin-top: var(--spacing-4);
  }

  .doc-search__dialog .dialog-body p {
    margin: 0;
  }

  .doc-search__dialog .dialog-body .notice {
    color: #71717a;
    color: var(--pn-text-secondary);
    padding: calc(4px * 2) calc(4px * 3);
    padding: var(--spacing-2) var(--spacing-3);
  }

  .doc-search__dialog .dialog-body ul {
    display: flex;
    flex-direction: column;
    row-gap: calc(4px * 0.5);
    row-gap: var(--spacing-05);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Result rows reuse .list-element (hub cards get cloned in):
     flatten the card into a quiet hoverable row. Explicit flex — the
     card itself is a grid now. */
  .doc-search__dialog .list-element {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    row-gap: calc(4px * 1.5);
    row-gap: var(--spacing-1-5);
    background-color: transparent;
    border: 0;
    border-radius: 8px;
    border-radius: var(--pn-radius-md);
    box-shadow: none;
    line-height: 1.6;
    min-height: auto;
    padding: calc(4px * 3);
    padding: var(--spacing-3);
    transition: background-color 150ms ease;
    transition: background-color var(--base-duration) var(--base-timing);
  }

  .doc-search__dialog .list-element:hover,
  .doc-search__dialog .list-element:focus,
  .doc-search__dialog .list-element:focus-visible {
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    outline: none;
    text-decoration: none;
    transform: none;
  }

  .doc-search__dialog .list-element h4 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    gap: var(--spacing-1);
    margin: 0;
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
  }

  .doc-search__dialog .list-element h4 strong {
    color: #09090b;
    color: var(--pn-title);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .doc-search__dialog .list-element h4 svg.caret {
    align-self: center;
    height: 9px;
  }

  .doc-search__dialog .result-api-name {
    color: #025fd7;
    color: var(--pn-accent-text);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .doc-search__dialog .result-details {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    overflow: hidden;
    text-align: left;
  }

  .doc-search__dialog .list-element .markdown-content,
  .doc-search__dialog .list-element .markdown-content p {
    display: inline;
  }

  .doc-search__dialog .list-element .extra {
    display: none;
  }

  @media (max-width: 850px) {
    .doc-search__dialog {
      max-width: calc(100vw - calc(4px * 8));
      max-width: calc(100vw - var(--spacing-8));
      margin-block-start: calc(4px * 10);
      margin-block-start: var(--spacing-10);
    }
  }
}
/* Organization portal home (portal/public_orga/home): hero, Hubs and
   Standalone APIs sections sharing the hub catalog look, plus the
   quiet pagination chips (also used by the changelog feed). The page
   shell (.wrapper, .header-wrapper) and cards live in hubs/hub.css. */

@layer pn-layout {
  .page-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    max-width: var(--screen-xl);
    margin: auto;
  }

  .page-container main {
    width: 100%;
    /* Mirrors the hero's top offset so the catalog floats in the
       middle of the page instead of stopping dead at the fold */
    padding-block-end: calc(4px * 32);
    padding-block-end: var(--spacing-32);
  }
}

@layer pn-components {
  /* The hub home flows from hero to catalog with space alone: the
     separator would be the only ruled hero on the portal */
  .page-container main > hr {
    display: none;
  }

  .hubs-section,
  .apis-section {
    width: 100%;
    margin-block-end: calc(4px * 8);
    margin-block-end: var(--spacing-8);
  }

  /* Same cards as the hub catalog (hubs/hub.css), but two per row:
     full-width rows read too wide on a page that lists whole hubs */
  .catalog-list.two-columns {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: calc(4px * 6);
    margin-bottom: var(--spacing-6);
  }

  @media (max-width: 850px) {
    .catalog-list.two-columns {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* --- Pagination: quiet chips row (Shared::Pagination) --- */

  .pagination {
    font-size: 0.875rem;
    font-size: var(--text-sm);
  }

  .pagination nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    padding-block: calc(4px * 1.5);
    padding-block: var(--spacing-1-5);
  }

  .pagination .page {
    display: inline-flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: #27272a;
    color: var(--pn-text);
    padding: 4px calc(4px * 3);
    padding: var(--spacing-1) var(--spacing-3);
    transition: border-color 150ms ease;
    transition: border-color var(--base-duration) var(--base-timing);
  }

  /* Dark surface and hairline are one zinc step apart: the chip edge
     melts into its own background. One step lighter, like the filter
     tabs. Before .disabled in source so disabled still wins. */
  .dark-theme .pagination .page {
    border-color: #3f3f46;
    border-color: var(--pn-zinc-700);
  }

  .pagination a.page:hover {
    border-color: #a1a1aa;
    border-color: var(--pn-zinc-400);
    text-decoration: none;
  }

  .pagination .page.disabled {
    background-color: transparent;
    border-color: transparent;
    color: #a1a1aa;
    color: var(--text-color-disabled);
  }

  .pagination .prev svg {
    rotate: -90deg;
  }

  .pagination .next svg {
    rotate: 90deg;
  }

  .pagination__page-count {
    display: flex;
    align-items: center;
    gap: 4px;
    gap: var(--spacing-1);
    color: #71717a;
    color: var(--pn-text-secondary);
  }
}
/* Changelog pages (public_doc_changes, public_hub_changes) and the
   compare page pieces that misc-f.css does not cover yet: the menu
   band, the timeline feed, diff rendering, subscription dialog and the
   compare empty states. Event layout is scoped under the .changelog
   page root so the hub-home aside (hubs/hub.css) keeps its own quiet
   list look.

   JS contracts: show-more collapses .changelog-event__diff-container
   and .changelog-event__diff-lines (chrome in doc/misc.css), the
   highlight controller injects .dismiss-highlight into
   .changelog-event.highlight-container (doc/misc.css), and the
   doc-changes-subscription controller toggles .hidden on the
   __notification paragraph. */

@layer pn-layout {
  .changelog {
    --timeline-width: var(--spacing-40);

    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 0px);
    min-height: calc(100dvh - var(--body-top, 0px));
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  .changelog .changelog-content {
    flex-grow: 1;
    grid-template-rows: min-content auto;
  }

  .changelog-feed {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: auto;
  }

  .changelog-feed > :last-child {
    flex-grow: 1;
  }

  /* --- Header breadcrumbs (shared by the changelog, compare and
     explorer pages: one Portal::Breadcrumb component) --- */

  page-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    font-size: 0.875rem;
    font-size: var(--nav-font-size);
  }

  page-breadcrumbs a {
    flex-shrink: 0;
    color: #71717a;
    color: var(--pn-text-secondary);
    text-decoration: none;
  }

  page-breadcrumbs a:hover {
    color: #27272a;
    color: var(--pn-text);
  }

  page-breadcrumbs .separator {
    color: #e4e4e7;
    color: var(--pn-border);
  }

  page-breadcrumbs .dropdown-button .dropdown-title {
    background: transparent;
    border: 0;
    height: auto;
    min-height: 0;
    padding-inline: 0;
  }

  page-breadcrumbs .menu-dropdown a {
    display: block;
    box-sizing: content-box;
    overflow: hidden;
    padding-right: calc(4px * 10);
    padding-right: var(--spacing-10);
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(4px * 68);
    width: var(--spacing-68);
  }
}

@layer pn-components {
  /* --- Menu band: title, branch dropdown, last update, actions --- */

  /* No band of its own: the title row sits on the page background,
     the site header above stays the only chrome bar */
  .changelog-menu {
    padding-block: calc(4px * 6) calc(4px * 4);
    padding-block: var(--spacing-6) var(--spacing-4);
    z-index: 5;
  }

  .changelog-menu__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(4px * 3) calc(4px * 6);
    gap: var(--spacing-3) var(--spacing-6);
  }

  .changelog-menu__selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4px * 2) calc(4px * 3);
    gap: var(--spacing-2) var(--spacing-3);
  }

  .changelog-menu__selector h1 {
    margin: 0;
    /* One step above the text-xl event titles: it names the page */
    font-size: 1.5rem;
    font-size: var(--text-2xl);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
  }

  .changelog-menu__selector .version {
    flex-basis: 100%;
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  .changelog-menu__last-update {
    flex-shrink: 0;
    background-color: transparent;
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    line-height: 1.6;
    padding: calc(4px * 0.5) calc(4px * 3);
    padding: var(--spacing-05) var(--spacing-3);
  }

  .changelog-menu__actions {
    display: flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  /* --- Timeline: date column with hairline + dot, content column --- */

  .changelog .changelog-event {
    display: grid;
    grid-template-columns: var(--timeline-width) minmax(0, 1fr);
    grid-gap: calc(4px * 2) calc(4px * 12);
    grid-gap: var(--spacing-2) var(--spacing-12);
    gap: calc(4px * 2) calc(4px * 12);
    gap: var(--spacing-2) var(--spacing-12);
  }

  .changelog .changelog-event--single-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .changelog .changelog-event__date {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    position: relative;
    border-inline-end: 1px solid #e4e4e7;
    border-inline-end: var(--pn-hairline);
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding-block: calc(4px * 12);
    padding-block: var(--spacing-12);
    padding-inline-end: calc(4px * 8);
    padding-inline-end: var(--spacing-8);
  }

  /* The dot centers on the entry's first text line: every first line
     (date, doc title, hub API kicker) shares the same --spacing-7
     line box, so one formula aligns them all. */
  .changelog .changelog-event__date::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(calc(4px * 12) + (calc(4px * 7) - calc(4px * 2)) / 2);
    top: calc(var(--spacing-12) + (var(--spacing-7) - var(--spacing-2)) / 2);
    right: 0;
    width: calc(4px * 2);
    width: var(--spacing-2);
    height: calc(4px * 2);
    height: var(--spacing-2);
    /* Stroked, not filled: the hollow dot sits lighter on the line */
    background-color: #fafafa;
    background-color: var(--pn-bg);
    border: 1px solid #a1a1aa;
    border: 1px solid var(--pn-zinc-400);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    /* The ring lifts the dot off the hairline it sits on */
    box-shadow: 0 0 0 3px #fafafa;
    box-shadow: 0 0 0 3px var(--pn-bg);
    /* right: 0 is the inner edge of the column's 1px border: the extra
       half pixel centers the dot on the hairline itself. */
    transform: translateX(calc(50% + 0.5px));
  }

  .changelog .change-info {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  /* The relative date is the entry's headline in this column: it reads
     in the text voice, the change id and version stay mono metadata */
  .changelog .change-info > span {
    color: #27272a;
    color: var(--pn-text);
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
    font-size: 0.875rem;
    font-size: var(--text-sm);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    /* Shared first-line box: keeps the date centered on the timeline
       dot and level with the content's first line across the column */
    line-height: calc(4px * 7);
    line-height: var(--spacing-7);
  }

  .changelog .change-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  /* Per-event compare is a tertiary action: compact chip metrics so it
     never competes with the page-level buttons */
  .changelog .changelog-event__date .button {
    height: calc(4px * 7);
    height: var(--spacing-7);
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    line-height: 1;
    margin-top: 4px;
    margin-top: var(--spacing-1);
    padding-inline: calc(4px * 3);
    padding-inline: var(--spacing-3);
  }

  /* --- Event content --- */

  .changelog .changelog-event__content {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 5);
    gap: var(--spacing-5);
    margin-block: calc(4px * 12) calc(4px * 6);
    margin-block: var(--spacing-12) var(--spacing-6);
  }

  .changelog .changelog-event__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(4px * 2) calc(4px * 6);
    gap: var(--spacing-2) var(--spacing-6);
  }

  .changelog .changelog-event__title {
    display: flex;
    flex-direction: column;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .changelog .changelog-event__title > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .changelog .changelog-event__title h3 {
    margin: 0;
    font-size: 1.25rem;
    font-size: var(--text-xl);
    /* Same --spacing-7 first-line box as the date and the dot */
    line-height: calc(4px * 7);
    line-height: var(--spacing-7);
  }

  .changelog .changelog-event__title h3 a {
    color: #09090b;
    color: var(--pn-title);
  }

  .changelog .changelog-event__title h3 a:hover {
    color: #025fd7;
    color: var(--pn-accent-text);
    text-decoration: none;
  }

  .changelog .changelog-event__tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .changelog .change-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: calc(4px * 2) calc(4px * 4);
    gap: var(--spacing-2) var(--spacing-4);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    line-height: 1;
  }

  .changelog .change-navigation > * {
    display: flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .changelog .change-navigation span {
    color: #a1a1aa;
    color: var(--text-color-disabled);
  }

  .changelog .change-navigation .next svg {
    transform: rotate(180deg);
  }

  /* --- Label variants used by changelog events (complement the
     .label system defined in components/misc-f.css) --- */

  .label[data-label-type="rounded"] {
    background: transparent;
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    line-height: 1.6;
    padding: calc(4px * 0.5) calc(4px * 2.5);
    padding: var(--spacing-05) var(--spacing-2-5);
    text-transform: capitalize;
  }

  .label[data-label-status="breaking"] {
    --label-bg: var(--pn-error-soft);
    --label-text-color: var(--pn-error-text);

    border-color: color-mix(in srgb, #dc2626, transparent 70%);
  }

@supports (color: color-mix(in lch, red, blue)){
.label[data-label-status="breaking"] {

    border-color: color-mix(in srgb, var(--pn-error), transparent 70%);
  }
}

  .label[data-label-status="theme"] {
    --label-bg: color-mix(in srgb, var(--pn-accent), transparent 92%);
    --label-text-color: var(--pn-accent-text);
  }

  /* Hub events (feed and hub-home aside): the API name reads as a
     plain strong kicker over the title, its version as mono metadata —
     chips would shout in a list where every entry has them */
  .changelog-event__tags .label[data-label-status="theme"] {
    --label-bg: transparent;
    --label-text-color: var(--pn-text);

    font-size: 0.875rem;

    font-size: var(--doc-font-size);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    /* Shared first-line box: on the hub feed this kicker is the
       entry's first line, level with the timeline dot and the date */
    line-height: calc(4px * 7);
    line-height: var(--spacing-7);
    padding: 0;
  }

  .changelog-event__tags .label[data-label-status="success"] {
    --label-bg: transparent;
    --label-text-color: var(--pn-text-secondary);

    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    font-family: var(--pn-font-mono);
    padding: 0;
  }

  /* --- Diff rendering: one card per status group --- */

  .changelog-event__diff-container .changelog-event__diff:not(:first-child) {
    margin-top: calc(4px * 6);
    margin-top: var(--spacing-6);
  }

  .changelog-event__diff {
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    overflow: hidden;
  }

  .changelog-event__diff-header {
    display: flex;
    align-items: center;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border-bottom: 1px solid #e4e4e7;
    border-bottom: var(--pn-hairline);
    color: #09090b;
    color: var(--pn-title);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    padding: calc(4px * 3) calc(4px * 4);
    padding: var(--spacing-3) var(--spacing-4);
  }

  /* Status dot: each card groups one status, announced by its color.
     The status lives on the operations, hence the :has() lookups. */
  .changelog-event__diff-header::before {
    content: "";
    width: calc(4px * 2);
    width: var(--spacing-2);
    height: calc(4px * 2);
    height: var(--spacing-2);
    background-color: #71717a;
    background-color: var(--pn-text-secondary);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
  }

  .changelog-event__diff:has(.changelog-event__diff-operation.added)
    .changelog-event__diff-header::before {
    background-color: #059669;
    background-color: var(--pn-success);
  }

  .changelog-event__diff:has(.changelog-event__diff-operation.modified)
    .changelog-event__diff-header::before {
    background-color: #d97706;
    background-color: var(--pn-warning);
  }

  .changelog-event__diff:has(.changelog-event__diff-operation.removed)
    .changelog-event__diff-header::before {
    background-color: #dc2626;
    background-color: var(--pn-error);
  }

  .changelog-event__diff-header .counter {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e4e4e7;
    background-color: var(--pn-zinc-200);
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
    max-height: calc(4px * 5);
    max-height: var(--spacing-5);
    min-width: calc(4px * 5);
    min-width: var(--spacing-5);
    padding: calc(4px * 0.5) 4px;
    padding: var(--spacing-05) var(--spacing-1);
  }

  /* zinc-200 would glow under the white title text on the dark
     surface-muted header: one step above the surface instead. */
  .dark-theme .changelog-event__diff-header .counter {
    background-color: #3f3f46;
    background-color: var(--pn-zinc-700);
  }

  .changelog-event__diff-header .breaking {
    color: color-mix(in srgb, #dc2626, black 25%);
    color: var(--pn-error-text);
    font-size: 0.75rem;
    font-size: var(--text-xs);
  }

  .changelog-event__diff-operations {
    padding: calc(4px * 4);
    padding: var(--spacing-4);
  }

  .changelog-event__diff-operation {
    font-size: 1rem;
    font-size: var(--text-base);
    padding: 0 calc(4px * 4);
    padding: 0 var(--spacing-4);
  }

  .changelog-event__diff-operation:not(:first-of-type) {
    margin-top: calc(4px * 6);
    margin-top: var(--spacing-6);
  }

  .changelog-event__diff-operation > code {
    margin-left: calc(calc(4px * 4) * -1);
    margin-left: calc(var(--spacing-4) * -1);
  }

  .changelog-event__diff-operation span {
    font-size: 0.75rem;
    font-size: var(--text-xs);
    margin-left: 4px;
    margin-left: var(--spacing-1);
  }

  /* Status words as soft chips: they scan as badges along the tree
     instead of loose colored words */
  .changelog-event__diff-operation span:is(.added, .modified, .removed) {
    border-radius: 9999px;
    border-radius: var(--pn-radius-round);
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    margin-left: calc(4px * 2);
    margin-left: var(--spacing-2);
    padding: calc(4px * 0.5) calc(4px * 2);
    padding: var(--spacing-05) var(--spacing-2);
  }

  .changelog-event__diff-operation span.added {
    background-color: #ecfdf5;
    background-color: var(--pn-success-soft);
    color: color-mix(in srgb, #059669, black 25%);
    color: var(--pn-success-text);
  }

  .changelog-event__diff-operation span.modified {
    background-color: #fffbeb;
    background-color: var(--pn-warning-soft);
    color: color-mix(in srgb, #d97706, black 25%);
    color: var(--pn-warning-text);
  }

  .changelog-event__diff-operation span.removed {
    background-color: #fef2f2;
    background-color: var(--pn-error-soft);
    color: color-mix(in srgb, #dc2626, black 25%);
    color: var(--pn-error-text);
  }

  .changelog-event__diff-operation > span.type {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
  }

  .changelog-event__diff-operation .label {
    margin-left: 4px;
    margin-left: var(--spacing-1);
  }

  .changelog-event__diff-operation ul {
    margin-top: calc(4px * 2);
    margin-top: var(--spacing-2);
  }

  .changelog-event__diff-operation ul > li:not(:last-of-type) {
    padding-bottom: calc(4px * 2);
    padding-bottom: var(--spacing-2);
  }

  .changelog-event__diff-operation li {
    line-height: 1.75;
  }

  /* The operation chip keeps the base code-inline voice (mono on a
     muted chip): verbs and paths are code, not prose */
  .changelog-event__diff code.code-inline {
    color: currentColor;
    padding: 4px calc(4px * 2);
    padding: var(--spacing-1) var(--spacing-2);
  }

  /* Nested property changes: hairline guides */

  .changelog-event__diff-properties {
    border-left: 1px solid #e4e4e7;
    border-left: var(--pn-hairline);
    font-size: 0.875rem;
    font-size: var(--doc-font-size);
    margin-top: calc(4px * 4);
    margin-top: var(--spacing-4);
    padding: 0 calc(4px * 4) 0 calc(4px * 6);
    padding: 0 var(--spacing-4) 0 var(--spacing-6);
  }

  .changelog-event__diff-properties:not(:first-of-type)::before {
    content: "";
    display: block;
    border-top: 1px solid #e4e4e7;
    border-top: var(--pn-hairline);
    margin-bottom: calc(4px * 6);
    margin-bottom: var(--spacing-6);
    margin-left: calc(calc(4px * 2) * -1);
    margin-left: calc(var(--spacing-2) * -1);
    width: 100%;
  }

  .changelog-event__diff-properties > li:first-child:not(.type) {
    border: 0;
    margin-left: calc(calc(4px * 2) * -1);
    margin-left: calc(var(--spacing-2) * -1);
    padding: 0;
  }

  .changelog-event__diff-properties > li:not(.type),
  .changelog-event__diff-properties ul {
    padding-left: calc(4px * 2);
    padding-left: var(--spacing-2);
  }

  /* The classless nested uls fall back to UA circle/square markers
     (reset.css only unlists ul[class]): the hairline guides already
     carry the nesting, the markers are noise on top */
  .changelog-event__diff-properties ul {
    list-style: none;
  }

  .changelog-event__diff-properties li:not(.type) {
    border-left: 1px solid #e4e4e7;
    border-left: var(--pn-hairline);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    padding-left: calc(4px * 4);
    padding-left: var(--spacing-4);
  }

  /* Changed identifiers (status codes, media types, property names)
     read as code. Their row is the one qualified by a .detail-type;
     the qualifier itself and the detail sentences stay prose. */
  .changelog-event__diff-properties li:not(.type):has(> .detail-type) {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-family: var(--pn-font-mono);
  }

  .changelog-event__diff-properties li:not(.type) .detail-type {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
  }

  /* Detail sentences ("Property is no longer required"): annotations,
     one step quieter than the identifiers they describe. The sans is
     explicit: they nest inside a mono identifier row and would
     inherit it. */
  .changelog-event__diff-properties li:not(.type):not(:has(> .detail-type)) {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-family: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
    font-family: var(--pn-font-sans);
  }

  /* Section overlines: Response / Query / Body group headers */
  .changelog-event__diff-properties .type {
    color: #71717a;
    color: var(--pn-text-secondary);
    font-size: 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    margin-left: calc(calc(4px * 2) * -1);
    margin-left: calc(var(--spacing-2) * -1);
    text-transform: uppercase;
  }

  .changelog-event__diff-properties > .type:not(:first-child) {
    margin-top: calc(4px * 5);
    margin-top: var(--spacing-5);
  }

  .changelog-event__diff-properties .markdown-content {
    display: flex;
    align-items: start;
    gap: calc(4px * 2);
    gap: var(--spacing-2);
  }

  .changelog-event__diff-properties .markdown-content p {
    color: #27272a;
    color: var(--pn-text);
    line-height: 2;
    margin: 0;
  }

  /* Textual diff (older changes without structured diff) */

  .changelog-event__diff-lines {
    background-color: #ffffff;
    background-color: var(--pn-surface);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    padding: calc(4px * 4);
    padding: var(--spacing-4);
  }

  .changelog-event__diff-lines li {
    line-height: 1.75;
    white-space: pre-wrap;
  }

  /* --- Feed pagination (chips styled in hubs/orga.css) --- */

  .changelog-feed .pagination {
    padding-block: calc(4px * 6) calc(4px * 12);
    padding-block: var(--spacing-6) var(--spacing-12);
  }

  /* --- Subscribe dialog (Get updates: email + RSS) --- */

  .changelog-subscription {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    width: 100%;
  }

  .changelog-subscription__description {
    color: #71717a;
    color: var(--pn-text-secondary);
    margin-bottom: 4px;
    margin-bottom: var(--spacing-1);
  }

  .changelog-subscription__form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .changelog-subscription__input {
    display: flex;
    width: 100%;
  }

  .changelog-subscription__input input.email {
    width: 100%;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  input.changelog-subscription__submit {
    border-radius: 0 8px 8px 0;
    border-radius: 0 var(--pn-radius-md) var(--pn-radius-md) 0;
    padding: calc(4px * 2) calc(4px * 6);
    padding: var(--spacing-2) var(--spacing-6);
  }

  .changelog-subscription__rss {
    width: 100%;
  }

  p.changelog-subscription__notification {
    margin: calc(4px * 2) 0 0;
    margin: var(--spacing-2) 0 0;
  }

  /* --- Compare page: back link and empty/loading states
     (form, bar and change list chrome live in misc-f.css) --- */

  .back-link {
    --link-font-size: var(--text-xs);

    display: inline-flex;
    align-items: center;
    gap: calc(4px * 1.5);
    gap: var(--spacing-1-5);
    font-size: 0.75rem;
    font-size: var(--link-font-size);
    text-decoration: none;
  }

  .back-link svg {
    width: 9px;
    height: 9px;
  }

  .back-link:where([data-link-size="large"]) {
    --link-font-size: var(--doc-font-size);
  }

  .back-link:where([data-link-size="large"]) svg {
    width: 11px;
    height: 11px;
  }

  .doc-compare__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(4px * 3);
    gap: var(--spacing-3);
    background-color: #f4f4f5;
    background-color: var(--pn-surface-muted);
    border: 1px solid #e4e4e7;
    border: var(--pn-hairline);
    border-radius: 12px;
    border-radius: var(--pn-radius-lg);
    color: #71717a;
    color: var(--pn-text-secondary);
    padding: calc(4px * 8) calc(4px * 6);
    padding: var(--spacing-8) var(--spacing-6);
    text-align: center;
  }

  /* The documents icon fills its paper with currentColor: on the
     secondary text color it turns into a dark blob. Surface makes it
     read as paper again, the strokes keep the border token. */
  .doc-compare__empty-state svg {
    color: #ffffff;
    color: var(--pn-surface);
  }

  .doc-compare__empty-state__title {
    margin: 0;
    color: #27272a;
    color: var(--pn-text);
    font-size: 1.125rem;
    font-size: var(--text-l);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
  }

  .doc-compare__empty-state p {
    margin: 0;
  }

  .doc-compare__empty-state #version-loading path:last-child {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: dash 1.2s linear infinite;
  }

  /* ================= Mobile: stacked entries ================= */

  @media (max-width: 850px) {
    .changelog .changelog-event {
      display: flex;
      flex-direction: column;
      gap: calc(4px * 4);
      gap: var(--spacing-4);
      border-inline-start: 1px solid #e4e4e7;
      border-inline-start: var(--pn-hairline);
      padding-block: calc(4px * 6) 0;
      padding-block: var(--spacing-6) 0;
      padding-inline-start: calc(4px * 6);
      padding-inline-start: var(--spacing-6);
    }

    /* Date row: the relative date owns the first line, the per-event
       compare sits at its right, both on the shared 28px line box */
    .changelog .changelog-event__date {
      flex-direction: row;
      align-items: start;
      justify-content: space-between;
      gap: calc(4px * 3);
      gap: var(--spacing-3);
      border: 0;
      padding: 0;
      width: 100%;
    }

    /* The dot moves from the desktop date-column edge to the entry's
       left rail, centered on the date's first line */
    .changelog .changelog-event__date::after {
      top: calc((calc(4px * 7) - calc(4px * 2)) / 2);
      top: calc((var(--spacing-7) - var(--spacing-2)) / 2);
      right: auto;
      left: calc(-1 * calc(4px * 6));
      left: calc(-1 * var(--spacing-6));
      transform: translateX(calc(-50% - 0.5px));
    }

    .changelog .change-info {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: calc(4px * 2) calc(4px * 3);
      gap: var(--spacing-2) var(--spacing-3);
    }

    /* The date keeps its line to itself: id, version and breaking read
       as one quiet meta row below it */
    .changelog .change-info > span {
      flex-basis: 100%;
    }

    /* When the kicker over the title already shows the version, don't
       repeat it in the meta row (the single-change page has no version
       there, so its kicker stays the only one) */
    .changelog
      .changelog-event:has(.changelog-event__tags [data-label-status="success"])
      .change-labels
      .version {
      display: none;
    }

    .changelog .changelog-event__date .button {
      margin-top: 0;
    }

    /* Long endpoint paths wrap inside one chip instead of splitting
       the inline background across lines */
    .changelog-event__diff-operation > code {
      display: inline-block;
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .changelog .changelog-event__content {
      margin-block: 0;
      padding-block-end: calc(4px * 8);
      padding-block-end: var(--spacing-8);
    }
  }
}

/* Spinner of the compare loading empty state (old keyframe name) */
@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }

  to {
    stroke-dashoffset: 0;
  }
}
.hover\:bg-lightgray:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.hover\:bg-lightgray:hover{
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
  }
}
.hover\:bg-shark:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(36 41 46 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.hover\:bg-shark:hover{
    background-color: rgb(36 41 46 / var(--tw-bg-opacity, 1));
  }
}
.hover\:text-black:hover{
  --tw-text-opacity: 1;
  color: rgb(19 20 21 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.hover\:text-black:hover{
    color: rgb(19 20 21 / var(--tw-text-opacity, 1));
  }
}
.hover\:text-lightblack:hover{
  --tw-text-opacity: 1;
  color: rgb(66 67 68 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.hover\:text-lightblack:hover{
    color: rgb(66 67 68 / var(--tw-text-opacity, 1));
  }
}
.hover\:opacity-75:hover{
  opacity: 0.75;
}
.dark\:text-gray:is([data-mode='dark'] *){
  --tw-text-opacity: 1;
  color: rgb(238 238 238 / 1);
}

@supports (color: rgb(0 0 0 / 0)){
.dark\:text-gray:is([data-mode='dark'] *){
    color: rgb(238 238 238 / var(--tw-text-opacity, 1));
  }
}
@media (min-width: 640px){

  .sm\:mt-0{
    margin-top: 0px;
  }

  .sm\:w-1\/2{
    width: 50%;
  }
}
@media (min-width: 768px){

  .md\:my-0{
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .md\:-mb-56{
    margin-bottom: -14rem;
  }

  .md\:mb-0{
    margin-bottom: 0px;
  }

  .md\:mb-30{
    margin-bottom: 7.5rem;
  }

  .md\:ml-20{
    margin-left: 5rem;
  }

  .md\:ml-4{
    margin-left: 1rem;
  }

  .md\:ml-6{
    margin-left: 1.5rem;
  }

  .md\:mr-10{
    margin-right: 2.5rem;
  }

  .md\:mr-6{
    margin-right: 1.5rem;
  }

  .md\:mr-8{
    margin-right: 2rem;
  }

  .md\:mt-0{
    margin-top: 0px;
  }

  .md\:mt-20{
    margin-top: 5rem;
  }

  .md\:mt-30{
    margin-top: 7.5rem;
  }

  .md\:mt-40{
    margin-top: 10rem;
  }

  .md\:block{
    display: block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:h-75{
    height: 18.75rem;
  }

  .md\:w-1\/2{
    width: 50%;
  }

  .md\:w-10\/12{
    width: 83.333333%;
  }

  .md\:w-2\/5{
    width: 40%;
  }

  .md\:w-6\/12{
    width: 50%;
  }

  .md\:w-auto{
    width: auto;
  }

  .md\:min-w-50{
    min-width: 12.5rem;
  }

  .md\:max-w-120{
    max-width: 30rem;
  }

  .md\:max-w-131{
    max-width: 32.75rem;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:justify-start{
    justify-content: flex-start;
  }

  .md\:gap-x-20{
    -moz-column-gap: 5rem;
         column-gap: 5rem;
  }

  .md\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .md\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:pb-16{
    padding-bottom: 4rem;
  }

  .md\:pb-30{
    padding-bottom: 7.5rem;
  }

  .md\:pt-30{
    padding-top: 7.5rem;
  }

  .md\:text-left{
    text-align: left;
  }

  .md\:text-center{
    text-align: center;
  }
}
@media (min-width: 1024px){

  .lg\:mt-0{
    margin-top: 0px;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:w-1\/2{
    width: 50%;
  }

  .lg\:w-1\/3{
    width: 33.333333%;
  }

  .lg\:w-auto{
    width: auto;
  }

  .lg\:max-w-120{
    max-width: 30rem;
  }

  .lg\:flex-none{
    flex: none;
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:flex-col{
    flex-direction: column;
  }

  .lg\:gap-30{
    gap: 7.5rem;
  }

  .lg\:gap-x-40{
    -moz-column-gap: 10rem;
         column-gap: 10rem;
  }

  .lg\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .lg\:px-20{
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media (min-width: 1280px){

  .xl\:my-30{
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
  }

  .xl\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .xl\:px-30{
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }

  .xl\:px-40{
    padding-left: 10rem;
    padding-right: 10rem;
  }
}


/*# sourceMappingURL=portal_next-2cb48adf.css.map*/