/**
 * periwinkle stylesheet.
 *
 * Every color, font, and radius comes from the `--pw-*` custom properties
 * emitted by the theme compiler (`compileThemeCss`). `:root` carries the
 * light palette; `[data-theme="dark"]` overrides the color tokens. No
 * utility framework required.
 */

/* ---------- Sizing, spacing, and typography tokens (reference values) ---------- */

/* Values are read verbatim from the reference theme
   (developer-theme.css / docs.css of the musiccloud developer portal). */
:root {
  --pw-space-1: 0.25rem;
  --pw-space-2: 0.5rem;
  --pw-space-3: 0.75rem;
  --pw-space-4: 1rem;
  --pw-space-5: 1.25rem;
  --pw-space-6: 1.5rem;
  --pw-space-7: 1.75rem;
  --pw-space-8: 2rem;
  --pw-space-card: 0.625rem;
  --pw-space-card-header: 0.625rem;
  --pw-space-card-row: 0.75rem;
  /* Fallbacks only: the theme compiler (`compileThemeCss`) emits both
     tokens after this stylesheet, so configured values always win. */
  --pw-page-padding: 1.5rem;
  --pw-container-max-width: 88rem;
  --pw-space-page-top: 3rem;
  --pw-space-page-bottom: 5rem;
  --pw-docs-space-xs: 0.125rem;
  --pw-docs-space-sm: 0.375rem;
  --pw-docs-space-md: 0.625rem;
  --pw-size-control: 2.75rem;
  --pw-size-control-compact: 2rem;
  --pw-size-icon-sm: 1rem;
  --pw-size-icon-md: 1.25rem;
  --pw-size-icon-lg: 1.5rem;
  --pw-size-text-icon: 1.2cap;
  --pw-text-body: 1.125rem;
  --pw-text-code: 1rem;
  --pw-text-card-title: 1.75rem;
  --pw-text-subsection: 1.625rem;
  --pw-text-section: 2.25rem;
  --pw-text-lead: 1.5rem;
  --pw-text-hero: 3.25rem;
  --pw-docs-sidebar-width: 20rem;
  --pw-docs-nav-toggle-size: var(--pw-space-7);
  --pw-docs-heading-icon-scale: 1em;
  --pw-docs-section-icon-size: calc(var(--pw-size-text-icon) + 2px);
  --pw-code-padding-block: 1rem;
  --pw-code-padding-inline: 1rem;
  --pw-code-line-height: 1.5;
  --pw-code-gutter-number-width: 2.5ch;
  --pw-code-gutter-padding-inline: 0.75rem;
  --pw-code-gutter-code-gap: 1rem;
  --pw-motion-duration-fast: 80ms;
  --pw-motion-duration-slow: 300ms;
  --pw-nav-transition-duration: 160ms;
  --pw-nav-transition-easing: ease-in-out;
  /* The reference mixes 4% status color into its translucent dark surface;
     on the opaque GitHub palettes that reads as gray, so the tint is raised
     until the tone is clearly perceptible in both modes. */
  --pw-response-tint: 12%;
}

[data-theme="dark"] {
  --pw-response-tint: 16%;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pw-nav-transition-duration: 0ms;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* The reference keeps the browser's 16px base; all type scales via the
     --pw-text-* tokens. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--pw-background);
  color: var(--pw-text);
  font-family: var(--pw-font-base);
  font-size: var(--pw-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The generated reference deliberately has no visible browser focus ring
   (adopted verbatim from the reference base stylesheet). Components may
   still communicate their active state with their own border or surface
   treatments, without reintroducing a global outline. */
:focus,
:focus-visible {
  /* biome-ignore lint/complexity/noImportantStyles: The reference base stylesheet kills the native focus ring globally with !important; adopted verbatim. */
  outline: 0 !important;
  /* biome-ignore lint/complexity/noImportantStyles: The reference base stylesheet kills the native focus ring globally with !important; adopted verbatim. */
  outline-offset: 0 !important;
  /* biome-ignore lint/complexity/noImportantStyles: The reference base stylesheet kills the native focus ring globally with !important; adopted verbatim. */
  box-shadow: none !important;
}

h1,
h2,
h3,
h4 {
  font-family: var(--pw-font-heading);
  text-box: trim-both cap alphabetic;
  line-height: 1.25;
  margin: 0;
}

a {
  color: var(--pw-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--pw-font-mono);
  font-size: 0.9em;
}

/* Anchor targets share the sidebar's sticky offset (top bar height plus the
   `--pw-space-4` gap), so a card scrolled to from the sidebar aligns its top
   edge flush with the sticky sidebar's top edge. */
[id] {
  scroll-margin-top: var(--pw-docs-nav-sticky-offset, var(--pw-space-8));
}

/* ---------- Layout ---------- */

/* Page root: hosts the full-width top navigation bar plus the max-width
   shell. Carries no geometry of its own, since it exists so `:has()` state
   (top-nav present) can cascade custom properties to both children. */
.pw-app {
  min-height: 100vh;
}

/* Shared content width, adopted from the reference `.developer-shell`:
   the public header's inner row and the page shell recenter on the same
   measure so the nav pills line up with the content column. */
.developer-shell,
.pw-shell {
  width: 100%;
  max-width: var(--pw-container-max-width);
  margin-inline: auto;
}

.pw-shell {
  padding: var(--pw-space-page-top) var(--pw-page-padding) var(--pw-space-page-bottom);
}

/* Outer shell + inner layout mirror the reference `.api-reference-shell` +
   `.api-reference-layout` compound: the intro sits above the two-column
   grid, and everything shares the token cascade defined on this element. */
.api-reference-shell {
  display: block;
  min-width: 0;
}

/* `.pw-layout` is a compatibility alias; the markup carries both classes. */
.api-reference-layout,
.pw-layout {
  display: grid;
  align-items: start;
  grid-template-columns: var(--pw-docs-sidebar-width) minmax(0, 1fr);
  gap: var(--pw-space-6);
}

.pw-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-8);
}

/* ---------- Card content inset (centralized) ----------
   The reference indents free-standing headlines and copy by the same
   `--pw-card-content-inset` so their left edge aligns with the text
   inside surrounding cards. Every element that participates in that
   alignment is listed here once, instead of repeating the padding on
   each block. */
.card-content-inset,
.pw-intro,
.pw-chapter__header,
.pw-chapter__lead,
.pw-entry__title,
.content-card__body-intro,
.content-card__copy {
  padding-inline: var(--pw-card-content-inset);
}

/* Free-standing intro copy uses the reference `.card-content-inset` treatment
   so its text aligns with the copy inside surrounding cards. Bottom margin
   mirrors the reference `mb-8` gap between intro and layout. */
.mb-8 {
  margin-bottom: var(--pw-space-8);
}

.pw-intro__title {
  font-size: var(--pw-text-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em; /* Tailwind tracking-tight, as on the reference hero */
  margin-bottom: var(--pw-space-3);
}

.pw-intro__lead {
  margin: 0;
  color: var(--pw-text-muted);
  font-size: var(--pw-text-lead);
}

.pw-intro__description {
  margin-top: var(--pw-space-3);
  color: var(--pw-text-muted);
}

/* ---------- Top navigation ---------- */

/* When the top nav is rendered, publish its block size (control height plus
   the inner's block padding) so the sidebar sticky offset and the anchor
   scroll margin can account for the bar. */
.pw-app:has([data-pw-top-nav]) {
  --pw-topnav-height: calc(var(--pw-size-control) + var(--pw-space-5) * 2);
}

/* Adopted from the reference `.public-header`: a full-viewport-width sticky
   layer whose translucent wash and blur let content pass beneath. The
   inline padding adds the shared half-radius card inset to the page gutter
   so the nav labels align with copy inside ordinary cards. */
.public-header {
  --pw-public-header-padding-inline: calc(var(--pw-page-padding) + var(--pw-card-content-inset));
  /* Header surface (reference `--mc-public-header-surface` pattern): the
     page background nudged 4% toward the text color, so the bar reads a
     touch darker in light mode and a touch lighter in dark mode. */
  --pw-public-header-surface: color-mix(in srgb, var(--pw-background) 96%, var(--pw-text));
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  background: color-mix(in srgb, var(--pw-public-header-surface) 72%, transparent);
  -webkit-backdrop-filter: blur(var(--pw-space-4));
  backdrop-filter: blur(var(--pw-space-4));
  transition:
    background-color 0s,
    box-shadow var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
}

/* periwinkle addition on top of the reference: once content scrolls behind
   the bar, the wash deepens and a hairline separator appears. */
.public-header[data-pw-top-nav-scrolled="true"] {
  background: color-mix(in srgb, var(--pw-public-header-surface) 86%, transparent);
  box-shadow:
    inset 0 -1px 0 var(--pw-border),
    0 var(--pw-space-1) var(--pw-space-3) color-mix(in srgb, var(--pw-text) 6%, transparent);
}

/* While the theme toggle swaps palettes, kill every transition for one frame
   so color-carrying properties (the top-nav separator, sidebar rows, etc.)
   switch instantly instead of animating between palettes (bindThemeToggle). */
[data-pw-theme-switching] * {
  /* biome-ignore lint/complexity/noImportantStyles: must override every
     element's own transition regardless of specificity for the one-frame swap. */
  transition: none !important;
}

/* The inner row recenters on the shared shell measure via `.developer-shell`
   (see Layout). `space-between` matches the reference: the optional brand
   logo sits left, the actions cluster right. */
.public-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-4);
  padding: var(--pw-space-5) var(--pw-public-header-padding-inline);
}

/* Optional brand mark (reference `Wordmark` slot): a square logo scaled to
   the control height so the bar keeps its measure with or without it. */
.public-header__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.public-header__brand-logo {
  display: block;
  width: auto;
  height: var(--pw-size-control);
}

/* Tinted variant (navigation.logoTint): the file is used as a mask and filled
   with the current text color, so a single-color mark stays legible in both
   themes. The box is square and the mask is contained, so non-square marks
   keep their proportions. */
.public-header__brand-logo--tinted {
  width: var(--pw-size-control);
  height: var(--pw-size-control);
  color: var(--pw-text);
  background-color: currentColor;
  -webkit-mask: var(--pw-brand-logo) center / contain no-repeat;
  mask: var(--pw-brand-logo) center / contain no-repeat;
}

.public-header__actions {
  display: flex;
  align-items: center;
  gap: var(--pw-space-3);
  min-width: 0;
  /* Keeps the cluster pinned right even when no brand logo renders and
     `space-between` has only one child to distribute. */
  margin-inline-start: auto;
}

.public-header__desktop {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}

/* Adopted from the reference `.public-navigation__link`: a min-44px
   pill-shaped anchor with icon + label, transparent by default, with a
   soft surface backdrop that fades in on hover via an ::before pseudo. */
.public-navigation__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: var(--pw-size-control, 2.75rem);
  align-items: center;
  gap: var(--pw-space-2);
  border: 0;
  border-radius: calc(var(--pw-radius) / 2);
  padding: 0 var(--pw-space-3);
  color: var(--pw-text-muted);
  background: transparent;
  /* The nav mixes <a> and <button> items (Search and the theme toggle are
     buttons). Without `appearance: none`, Safari paints the buttons with a
     native chrome (subtle border + background) so they no longer match the
     flat anchors. Force both element types to the same flat surface. */
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--pw-font-base);
  font-size: var(--pw-text-body);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
}

.public-navigation__link::before {
  position: absolute;
  z-index: -1;
  inset: var(--pw-space-1) 0;
  border-radius: calc(var(--pw-radius) / 2);
  background: transparent;
  content: "";
  transition: background-color var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
}

.public-navigation__link:hover,
.public-navigation__link:focus-visible {
  color: var(--pw-text);
  text-decoration: none;
}

/* Backdrop only fades in on hover, never on `:focus-visible`. Otherwise
   opening the Search dialog and dismissing it with ESC returns keyboard
   focus to the trigger, which browsers treat as a `:focus-visible`
   context and would keep the pill tinted after the dialog closes. Keep
   the color shift on focus for accessibility, and the browser's native
   focus outline handles the ring. */
.public-navigation__link:hover::before {
  background: var(--pw-surface-alt);
}

.public-navigation__link--active,
.public-navigation__link[aria-current="page"] {
  color: var(--pw-accent);
  /* The active item renders as a non-interactive <span> (current page),
     so it must not present a clickable cursor. */
  cursor: default;
}

.public-navigation__link--active::before,
.public-navigation__link[aria-current="page"]::before {
  background: color-mix(in srgb, var(--pw-accent) 10%, transparent);
}

.public-navigation__item-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.public-navigation__label {
  min-width: 0;
  white-space: nowrap;
}

/* Theme toggle sits at the far right as a compact icon-only variant of
   the same `.public-navigation__link` surface. */
.public-header__theme-toggle {
  padding: 0;
  min-width: var(--pw-size-control, 2.75rem);
  justify-content: center;
}

.public-header__theme-toggle .public-navigation__item-icon {
  width: 1.35rem;
  height: 1.35rem;
}

/* ---------- Sidebar ---------- */

/* Docs-nav tokens adopted from the reference `.api-reference-shell` block.
   The sidebar's sticky offset mirrors the reference recipe: the sticky
   public header's block size (`--pw-topnav-height`, published by `.pw-app`
   when the top nav renders, `0px` otherwise) plus the `--pw-space-4` gap. */
:root {
  --pw-docs-nav-padding: var(--pw-docs-space-md);
  --pw-docs-nav-bottom-fade-height: var(--pw-space-3);
  --pw-docs-nav-toggle-secondary-opacity: 0.3;
  --pw-topnav-height: 0px;
  --pw-docs-nav-viewport-gap: 4rem;
  --pw-docs-header-min-height: var(--pw-size-control);
  /* One header row: padding + the title line (card-title at 1.25 line
     height). The optional search row adds itself below via `:has()`. */
  --pw-docs-sidebar-header-block-size: calc(
    var(--pw-space-card-header) *
    2 +
    var(--pw-text-card-title) *
    1.25
  );
  --pw-docs-sidebar-header-surface: color-mix(in srgb, var(--pw-surface-alt) 56%, transparent);
  --pw-docs-nav-active-color: var(--pw-accent);
  --pw-color-mask-opaque: #000;
  /* Reference `--mc-card-content-inset` (docs.css § api-content) equals
     `radius / 2`, the horizontal inset every free-standing headline/copy
     uses so its text aligns with the copy inside a card whose header
     already carries `padding-inline-start: --mc-docs-content-card-copy-inset`
     (identical value). Adopted verbatim as `--pw-card-content-inset`. */
  --pw-card-content-inset: calc(var(--pw-radius) / 2);
}

/* The derived sticky offsets must be declared on `.pw-app`, NOT on `:root`:
   custom properties substitute their `var()` references at the declaring
   element, and `--pw-topnav-height` only carries the bar's height on
   `.pw-app` (via the `:has()` rule above). Declared on `:root` the offset
   would freeze at the root's `0px` fallback and every descendant would
   inherit a sticky offset that ignores the top bar. */
.pw-app {
  --pw-docs-nav-sticky-offset: calc(var(--pw-space-4) + var(--pw-topnav-height));
  --pw-docs-nav-viewport-clearance: calc(
    var(--pw-docs-nav-sticky-offset) +
    var(--pw-docs-nav-viewport-gap)
  );
}

.api-reference-nav {
  display: grid;
  grid-template-areas: "stack";
  position: relative;
  overflow-x: hidden;
  padding: 0;
}

/* When the optional sidebar search renders, the header grows by its row:
   the header grid gap plus the control-height search field. Without this
   the body's header offset would leave a blank strip below the title. */
.api-reference-nav:has(.pw-nav__search) {
  --pw-docs-sidebar-header-block-size: calc(
    var(--pw-space-card-header) *
    2 +
    var(--pw-space-3) +
    var(--pw-text-card-title) *
    1.25 +
    var(--pw-size-control)
  );
}

.sidebar__header {
  /* The header and the scrolling body intentionally overlap. This gives
     Safari actual scrolling content to sample for the glass backdrop. The
     first row is the reference-style Chapter header (title + toggle-all +
     theme toggle); the second row hosts the search field. */
  position: relative;
  z-index: 3;
  grid-area: stack;
  align-self: start;
  display: grid;
  gap: var(--pw-space-3);
  padding: var(--pw-space-card-header) var(--pw-docs-nav-padding);
  background: var(--pw-docs-sidebar-header-surface);
  -webkit-backdrop-filter: blur(var(--pw-space-4)) saturate(1.15);
  backdrop-filter: blur(var(--pw-space-4)) saturate(1.15);
}

/* Chapter row: title on the left, control cluster on the right (reference
   `Sidebar.Header` grid layout). */
.sidebar__header-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pw-space-3);
}

.api-reference-nav[data-pw-nav-scrolled="true"] .sidebar__header {
  box-shadow: 0 var(--pw-space-2) var(--pw-space-4)
    color-mix(in srgb, var(--pw-sky-top) 56%, transparent);
}

/* Brand row: the accepted periwinkle addition on top of the reference
   header; its inner geometry mirrors the reference header grid. */
.pw-nav__brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pw-space-3);
}

.sidebar__header-title {
  display: flex;
  align-items: center;
  gap: var(--pw-space-3);
  min-width: 0;
  margin: 0;
  padding-inline-start: calc(var(--pw-radius) / 2);
  color: var(--pw-text);
  font-size: var(--pw-text-card-title);
  font-weight: 600;
}

.pw-nav__brand-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw-nav__logo {
  width: var(--pw-size-icon-lg);
  height: var(--pw-size-icon-lg);
  object-fit: contain;
  flex: none;
}

.sidebar__header-addon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Give the toggle-all chevron and the theme toggle a comfortable gap so the
     two adjacent icon buttons do not read as one control cluster. Bumped from
     the previous zero-gap layout to the next spacing step per user feedback. */
  gap: var(--pw-space-3);
}

/* The theme toggle (periwinkle addition) shares the reference's toggle-all
   control geometry so both header buttons render identically. */
.api-reference-nav__toggle-all,
.pw-nav__icon-button {
  position: relative;
  display: inline-flex;
  width: var(--pw-docs-nav-toggle-size);
  min-height: var(--pw-docs-nav-toggle-size);
  height: var(--pw-docs-nav-toggle-size);
  align-items: center;
  justify-content: center;
  flex: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--pw-text-muted) var(--pw-icon-tone), var(--pw-icon-backdrop));
  cursor: pointer;
  transition: color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.api-reference-nav__toggle-all:hover,
.pw-nav__icon-button:hover {
  color: var(--pw-accent);
}

.api-reference-nav__toggle-all svg,
.pw-nav__icon-button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pw-docs-nav-toggle-size);
  height: var(--pw-docs-nav-toggle-size);
  transition:
    opacity var(--pw-nav-transition-duration) var(--pw-nav-transition-easing),
    transform var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
  transform: translate(-50%, -50%);
}

/* Expand/collapse-all: one chevron that flips 180 degrees between the
   two states, matching the section chevrons. */
.api-reference-nav__toggle-all svg {
  transform: translate(-50%, -50%) rotate(0deg);
}

[data-pw-all-expanded="true"] .api-reference-nav__toggle-all svg {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* Iconsax Bulk hardcodes opacity .4 on the secondary layer; lift it so the
   two-tone contrast stays readable on tinted surfaces. */
.pw-icon path[opacity] {
  opacity: 0.42;
}

/* Nav toggle controls keep their secondary Bulk layer quieter, exactly like
   the reference. */
.api-reference-nav__toggle .pw-icon path[opacity],
.api-reference-nav__toggle-all .pw-icon path[opacity],
.pw-nav__icon-button .pw-icon path[opacity] {
  opacity: var(--pw-docs-nav-toggle-secondary-opacity);
}

/* Icons align on the flex row axis, never on the text baseline.
   The base tint keeps every Iconsax icon perceptibly lifted in light
   mode; icons that must carry an intent color override it locally. */
.pw-icon {
  display: block;
  color: color-mix(in srgb, currentColor var(--pw-icon-tone), var(--pw-icon-backdrop));
}

/* Intent-colored icons keep their own color from later single-class
   rules (`.response-card__icon`, `.code-block__copy-success-icon`), which
   win over `.pw-icon`'s base tint by document order. The former override
   forced currentColor at higher specificity and blanked those out. */

/* Light mode renders icons slightly lifted so they do not read as black.
   The backdrop term cascades from the actual surface color under each icon
   so the tint stays perceptible whether the icon sits on the page, a card
   body, a card header, or a code frame (surface-specific overrides below). */
:root {
  --pw-icon-tone: 60%;
  --pw-icon-backdrop: var(--pw-background);
}

[data-theme="dark"] {
  --pw-icon-tone: 100%;
  /* Dark palettes need a stronger mix to lift the chrome off the
     surrounding surface. */
  --pw-docs-card-chrome: color-mix(in srgb, var(--pw-text) 12%, var(--pw-surface));
}

.surface-card,
.content-card,
.pw-endpoint,
.pw-endpoint__body,
.pw-schema-card,
.pw-schema-card__body,
.pw-card--inset,
.pw-panel {
  --pw-icon-backdrop: var(--pw-surface);
}

.content-card__header,
.pw-endpoint__header,
.integration-panel__header,
.content-panel__header,
.api-dialog__header,
.pw-nav__brand,
.pw-nav__search,
.pw-nav__body {
  --pw-icon-backdrop: var(--pw-docs-card-chrome);
}

.code-block__frame,
.code-block__surface {
  --pw-icon-backdrop: var(--pw-surface-alt);
}
.pw-nav__search-icon,
.pw-chapter__icon,
.pw-endpoint__section-icon {
  color: color-mix(in srgb, currentColor var(--pw-icon-tone), var(--pw-icon-backdrop));
}

/* Sidebar affordances (chevrons + theme toggle) deserve a touch more
   contrast in light mode than plain content icons; dark mode already
   sits at 100% so the override there is a no-op. */
.pw-chevron,
.api-reference-nav__toggle-all,
.pw-nav__theme-icon {
  --pw-icon-tone: 88%;
}

[data-theme="dark"] .pw-chevron,
[data-theme="dark"] .api-reference-nav__toggle-all,
[data-theme="dark"] .pw-nav__theme-icon {
  --pw-icon-tone: 100%;
}

.pw-nav__theme-icon--dark {
  display: none;
}

[data-theme="dark"] .pw-nav__theme-icon--light {
  display: none;
}

[data-theme="dark"] .pw-nav__theme-icon--dark {
  display: inline;
}

/* Search trigger (periwinkle addition): the field is a twin of the search
   dialog's header search, and the shared geometry lives in the combined
   selectors of the search-dialog block below. Only the trigger behavior
   differs: the whole field (readonly input included) acts as a button. */
.pw-nav__search,
.pw-nav__search-input {
  cursor: pointer;
}

.pw-nav__search-icon {
  display: inline-flex;
}

.sidebar__body {
  padding: var(--pw-space-3) var(--pw-docs-nav-padding) 0;
}

.sidebar__chapter {
  display: flex;
  align-items: center;
}

/* Separate the chapter cluster from the first disclosure while keeping
   adjacent collapsed section headers flush with each other. */
.sidebar__chapter + .sidebar__section {
  margin-block-start: var(--pw-space-3);
}

/* Open disclosures use equal breathing room before the first and after the
   last item; the padding collapses with the disclosure content itself.
   List resets replace the reference's Tailwind preflight. */
.sidebar__section-items {
  list-style: none;
  margin: 0;
  padding: var(--pw-docs-nav-padding) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-1);
}

.api-reference-nav__link {
  display: block;
  color: var(--pw-text-muted);
}

.api-reference-nav__top-link {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}

.api-reference-nav__section {
  overflow: clip;
  margin-inline: calc(-1 * var(--pw-docs-nav-padding));
  padding-inline: var(--pw-docs-nav-padding);
}

.api-reference-nav__section summary::marker {
  content: "";
}

.api-reference-nav__section summary::-webkit-details-marker {
  display: none;
}

.api-reference-nav__summary {
  display: flex;
  min-height: var(--pw-size-control);
  align-items: center;
  gap: var(--pw-space-2);
  margin-inline: calc(-1 * var(--pw-docs-nav-padding));
  padding: 0 var(--pw-docs-nav-padding);
  color: var(--pw-text-muted);
  background: var(--pw-surface-alt);
  cursor: pointer;
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-code);
}

.api-reference-nav__summary:hover {
  background: color-mix(in srgb, var(--pw-surface-alt) 98%, var(--pw-text) 2%);
}

.api-reference-nav__summary-title {
  min-width: 0;
  flex: 1;
  margin: 0;
  color: var(--pw-text);
  font-size: var(--pw-text-body);
  font-weight: 600;
}

.api-reference-nav__summary-addons {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  flex: none;
}

.api-reference-nav__section-icon {
  flex: none;
  color: color-mix(in srgb, var(--pw-text) var(--pw-icon-tone), var(--pw-icon-backdrop));
}

.api-reference-nav__count {
  display: inline-grid;
  min-width: var(--pw-space-7);
  height: var(--pw-docs-nav-toggle-size);
  place-items: center;
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  padding: 0 var(--pw-docs-space-sm);
  color: var(--pw-text-muted);
  line-height: 1;
  text-align: center;
}

.api-reference-nav__toggle {
  position: relative;
  display: inline-flex;
  width: var(--pw-docs-nav-toggle-size);
  height: var(--pw-docs-nav-toggle-size);
  flex: none;
  color: color-mix(in srgb, var(--pw-text-muted) var(--pw-icon-tone), var(--pw-icon-backdrop));
}

.api-reference-nav__toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pw-docs-nav-toggle-size);
  height: var(--pw-docs-nav-toggle-size);
  transition:
    opacity var(--pw-nav-transition-duration) var(--pw-nav-transition-easing),
    transform var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
  transform: translate(-50%, -50%);
}

/* The section body is height/opacity-animated by the client. `contain: layout paint`
   isolates layout and paint invalidations to this subtree so the WAAPI height
   interpolation cannot force full-document reflows during expand/collapse;
   `will-change` hints the compositor to promote it to its own layer. */
.api-reference-nav__content {
  height: 0;
  opacity: 0;
  overflow: clip;
  contain: layout paint;
  will-change: height, opacity;
}

.api-reference-nav__section[open] .api-reference-nav__content {
  height: auto;
  opacity: 1;
}

[data-pw-nav-item] {
  border-radius: calc(var(--pw-radius) / 2);
  padding-block: var(--pw-space-1);
  padding-inline: var(--pw-space-2);
  /* Color-only transition; background-color transitions flashed the
     sidebar rows across a theme switch. */
  transition: color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

[data-pw-nav-item]:hover {
  color: var(--pw-text);
  background: var(--pw-surface-alt);
  text-decoration: none;
}

[data-pw-nav-item][aria-current="true"],
[data-pw-nav-item][aria-current="true"]:hover {
  color: var(--pw-docs-nav-active-color);
  /* Accent-tinted background + medium weight so the scroll-spy position stands
     out clearly against the muted rail, not just the neutral hover surface. */
  background: color-mix(in srgb, var(--pw-accent) 12%, var(--pw-surface-alt));
  font-weight: 500;
  text-decoration: none;
}

/* Keep a desktop sticky rail clear of the viewport edge while long, open
   section lists scroll inside the rail instead of extending below it. */
@media (min-width: 64rem) {
  .api-reference-nav {
    position: sticky;
    top: var(--pw-docs-nav-sticky-offset);
  }

  [data-pw-nav-body].sidebar__body {
    /* The body overlaps the header, then offsets its first row by the
       header's block size. The header can therefore frost the actual list
       instead of the sidebar card's opaque parent surface. */
    grid-area: stack;
    min-height: 0;
    max-height: calc(100dvh - var(--pw-docs-nav-viewport-clearance));
    padding-block-start: calc(var(--pw-docs-sidebar-header-block-size) + var(--pw-space-3));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scroll-padding-bottom: var(--pw-docs-nav-viewport-gap);
    -webkit-mask-image: linear-gradient(
      to bottom,
      var(--pw-color-mask-opaque) 0 calc(100% - var(--pw-docs-nav-bottom-fade-height)),
      color-mix(in srgb, var(--pw-color-mask-opaque) 80%, transparent)
    );
    mask-image: linear-gradient(
      to bottom,
      var(--pw-color-mask-opaque) 0 calc(100% - var(--pw-docs-nav-bottom-fade-height)),
      color-mix(in srgb, var(--pw-color-mask-opaque) 80%, transparent)
    );
  }
}

/* One disclosure chevron per section: closed points right, open rotates
   90 degrees down. The wrapper rotates so the icon's own centering stays
   intact; data-pw-expanded drives the JS-animated close before [open]
   flips at the animation's end. */
.pw-chevron {
  transform: rotate(0deg);
  transition: transform var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
  will-change: transform;
}

details[open] .pw-chevron {
  transform: rotate(180deg);
}

details[data-pw-expanded="false"] .pw-chevron {
  transform: rotate(0deg);
}

/* Chapter-header toggle-all: not a details element, so the rotation
   binds to the button's own data-pw-all-expanded state. */
.api-content__chapter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pw-docs-nav-toggle-size);
  height: var(--pw-docs-nav-toggle-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pw-text-muted);
  cursor: pointer;
  flex: none;
}

/* Safari collapses an SVG with no explicit dimensions inside a flex button to
   zero width, so the toggle-all chevron was invisible there while Chrome gave
   it an intrinsic size. Pin the icon to the button size like the schema-card
   chevron (.pw-schema-card__chevron > .pw-icon) already does. */
.api-content__chapter-toggle > .pw-icon {
  width: var(--pw-docs-nav-toggle-size);
  height: var(--pw-docs-nav-toggle-size);
}

.api-content__chapter-toggle:hover {
  color: var(--pw-accent);
}

.api-content__chapter-toggle[data-pw-all-expanded="true"].pw-chevron {
  transform: rotate(180deg);
}

.api-content__chapter-header-addon {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  /* Match the chapter icon's cap-mid correction (see .pw-chapter__icon) so the
     toggle-all chevron sits on the heading's optical center, not the line box.
     Applied to the wrapper, not the button, so the button keeps its rotation
     transform (.pw-chevron) uncontested. */
  transform: translateY(calc(0.034em + 1px));
}

/* ---------- Sidebar operation items ---------- */

/* Accepted periwinkle deviation from the reference: each operation link is a
   two-column grid so the HTTP method sits as a small, right-aligned text
   mark in its method accent color. The reference sidebar shows only the nav
   title; adding the method here keeps the rail scannable without opening
   every disclosure. */
[data-pw-nav-item].pw-nav__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--pw-space-2);
}

.pw-nav__item-method {
  color: var(--pw-nav-item-method-color, var(--pw-text-faint));
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-code);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}

.pw-nav__item-method--get {
  --pw-nav-item-method-color: var(--pw-method-get);
}

.pw-nav__item-method--post {
  --pw-nav-item-method-color: var(--pw-method-post);
}

.pw-nav__item-method--put {
  --pw-nav-item-method-color: var(--pw-method-put);
}

.pw-nav__item-method--patch {
  --pw-nav-item-method-color: var(--pw-method-patch);
}

.pw-nav__item-method--delete {
  --pw-nav-item-method-color: var(--pw-method-delete);
}

.pw-nav__item-method--options,
.pw-nav__item-method--head {
  --pw-nav-item-method-color: var(--pw-method-get);
}

/* ---------- Chapters & entries ---------- */

.pw-chapter__header {
  display: flex;
  align-items: center;
  gap: var(--pw-docs-space-md);
  /* Reference `.api-content__chapter-header` (docs.css § api-content) indents
     free-standing chapter headers by --mc-card-content-inset so their text
     lines up with the copy inside the section's cards. */
  font-size: var(--pw-text-section);
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: var(--pw-space-5);
}

.pw-chapter__icon {
  /* Align the icon to the cap-mid of the H2 text. Barlow Condensed's line
     box carries ~2.5px of leading above the cap; without correction the
     line-box-centered icon lands below the cap-mid. Verified in Chrome by
     stepping the transform across candidate values against the range rect
     of the first heading text node. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pw-docs-heading-icon-scale);
  height: 1lh;
  color: var(--pw-accent);
  flex: none;
  transform: translateY(calc(0.034em + 1px));
}

.pw-chapter__icon svg,
.pw-chapter__icon > * {
  width: var(--pw-docs-heading-icon-scale);
  height: var(--pw-docs-heading-icon-scale);
}

.pw-chapter__lead {
  margin: 0 0 var(--pw-space-4);
  color: var(--pw-text-muted);
}

.pw-chapter__body {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-7);
}

/* The schema list is a dense reference index rather than a stack of full
   endpoint blocks, so its cards read better sitting a touch closer together. */
.pw-chapter__body:has(> .pw-schema-card) {
  gap: var(--pw-space-6);
}

.pw-entry__title {
  /* Reference `.api-content__entry-title` (docs.css § api-content) indents
     entry headings by the same card-content inset as the chapter headers. */
  font-size: var(--pw-text-subsection);
  font-weight: 500;
  margin-bottom: var(--pw-space-4);
}

/* ---------- Panels (guide & custom sections) ---------- */

/* Legacy custom-section panel (still used for non-guide custom sections).
   Kept as a plain surface with border so any consumer that renders a
   `.pw-panel` continues to look right. */
.pw-panel {
  background: var(--pw-surface);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  padding: var(--pw-space-card-row);
}

.pw-panel__title {
  font-size: var(--pw-text-body);
  font-weight: 600;
  margin-bottom: var(--pw-space-2);
}

.pw-panel .pw-markdown {
  color: var(--pw-text-muted);
}

/* ---------- ContentCard + ContentPanel (adopted from the reference) ---------- */

/* Reusable glass surface (reference `.surface-card`): the outer radius for
   structured technical content, the sidebar rail, and the dialogs. Compound
   components (ContentCard, the dialogs) add their own semantic markup
   without redefining this outer geometry. */
.surface-card {
  overflow: hidden;
  border-radius: var(--pw-radius);
  background: var(--pw-surface);
}

.content-card__header,
.content-card__footer {
  display: flex;
  align-items: center;
  gap: var(--pw-space-card-row);
  min-height: var(--pw-docs-header-min-height);
  padding: var(--pw-space-card-header);
  background: var(--pw-docs-card-chrome);
}

.content-card__header {
  justify-content: space-between;
  flex-wrap: wrap;
}

.content-card__title {
  padding-inline-start: var(--pw-card-content-inset);
  color: var(--pw-text);
  font-family: var(--pw-font-heading);
  font-size: var(--pw-text-card-title);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.content-card__header-addon {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  margin-left: auto;
}

.content-card__body {
  padding: var(--pw-space-card);
}

.content-card__body-intro,
.content-card__copy,
.content-card__body-stack {
  /* An explicit zero-minimum track prevents long Markdown and nested panels
     from expanding a card beyond its available inline space (reference
     `.content-card__body-*` set). */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.content-card__body-intro {
  gap: var(--pw-space-2);
  margin-bottom: var(--pw-space-6);
}

.content-card__copy {
  gap: var(--pw-space-6);
}

.content-card__body-stack {
  gap: var(--pw-space-6);
}

.content-card__footer {
  justify-content: space-between;
  color: var(--pw-text-muted);
  font-size: var(--pw-text-code);
}

/* Shared card primitive (see Card.tsx). One structure for every framed
   surface: builder settings sections, the builder preview, and the API-doc
   content panels. `--elevated` is the heavy card (border + solid surface);
   `--inset` is the light, semi-transparent panel embedded in endpoint blocks.
   The endpoint card variants (parameter, request-body, response) override the
   `--inset` surface by document order, so this base must precede them. */
.pw-card {
  min-width: 0;
  overflow: hidden;
}

.pw-card--elevated {
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  background: var(--pw-surface);
}

.pw-card--inset {
  border-radius: var(--pw-docs-content-panel-radius);
  background: color-mix(in srgb, var(--pw-surface-alt) 72%, transparent);
}

.pw-card__header {
  display: flex;
  align-items: center;
  gap: var(--pw-space-3);
  padding: var(--pw-space-3) var(--pw-space-4);
  background: var(--pw-docs-card-chrome);
}

/* Elevated card headers share one minimum height so sibling cards (the
   settings sections beside the preview) line up regardless of what their
   header content weighs. 60px is the taller of the two builder headers: the
   settings title (22px) versus the preview's filename (16px) plus buttons. */
.pw-card--elevated > .pw-card__header {
  min-height: 3.75rem;
}

.content-panel__header,
.content-panel__footer {
  background: var(--pw-docs-card-chrome);
}

.content-panel__header-title {
  color: var(--pw-text);
  font-family: var(--pw-font-heading);
  font-size: var(--pw-text-body);
  font-weight: 600;
  margin: 0;
}

.integration-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pw-space-3);
  min-width: 0;
}

.integration-panel .content-panel__header {
  padding: var(--pw-space-3) var(--pw-space-4) var(--pw-space-2);
}

.integration-panel .content-panel__content {
  padding: 0 var(--pw-space-4) var(--pw-space-3);
}

.integration-panel__stack {
  display: grid;
  gap: var(--pw-space-3);
}

.integration-panel .pw-markdown {
  color: var(--pw-text-muted);
}

.integration-panel .pw-markdown > p {
  margin: 0;
}

/* View OpenAPI contract trigger: adopted from the reference
   `.openapi-contract-dialog__trigger`. Compact chrome consistent with other
   inline controls, right-aligned in its content panel. */
.openapi-contract-dialog__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  min-height: var(--pw-size-control-compact);
  justify-self: end;
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  padding: 0 var(--pw-space-3);
  color: var(--pw-text);
  background: var(--pw-surface-alt);
  font-family: inherit;
  font-size: var(--pw-text-code);
  cursor: pointer;
  /* Only color transitions here; border-color transition caused a flash
     across the button border when the theme flipped light/dark. */
  transition: color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.openapi-contract-dialog__trigger:hover,
.openapi-contract-dialog__trigger:focus-visible {
  color: var(--pw-accent);
  border-color: var(--pw-accent);
}

.openapi-contract-dialog__trigger svg {
  width: var(--pw-size-icon-md);
  height: var(--pw-size-icon-md);
}

.content-link {
  color: var(--pw-link);
}

/* Below 40rem the integration grid, parameter cards, and response cards
   collapse to one column, matching the reference responsive rules. */
@media (max-width: 40rem) {
  .integration-panel-grid,
  .parameter-card {
    grid-template-columns: 1fr;
  }

  .response-card {
    grid-template-columns: 1fr;
    gap: var(--pw-space-2);
  }
}

/* ---------- Endpoint blocks ---------- */

.pw-endpoint {
  background: var(--pw-surface);
  border-radius: var(--pw-radius);
  overflow: hidden;
}

/* Per-method accent color for the header tint and the method text. Adopted
   verbatim from the reference `.endpoint-card__header--<method>` map: the
   header background is `color-mix(--request-method-color 12%, --color-surface)`
   and the method glyph inherits `--request-method-color`. */
.pw-endpoint__header {
  --pw-request-method-color: var(--pw-text-muted);
  display: flex;
  min-height: var(--pw-size-control);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pw-space-card-row);
  padding: var(--pw-space-card-header);
  padding-inline-start: calc(var(--pw-space-card-header) * 1.7);
  background: color-mix(in srgb, var(--pw-request-method-color) 12%, var(--pw-surface));
}

.pw-endpoint__header--get {
  --pw-request-method-color: var(--pw-method-get);
}

.pw-endpoint__header--post {
  --pw-request-method-color: var(--pw-method-post);
}

.pw-endpoint__header--put {
  --pw-request-method-color: var(--pw-method-put);
}

.pw-endpoint__header--patch {
  --pw-request-method-color: var(--pw-method-patch);
}

.pw-endpoint__header--delete {
  --pw-request-method-color: var(--pw-method-delete);
}

.pw-endpoint__header--options {
  --pw-request-method-color: var(--pw-method-get);
}

.pw-endpoint__header--head {
  --pw-request-method-color: var(--pw-method-get);
}

.pw-endpoint__request {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
  min-width: 0;
}

/* Reference `.endpoint-card__method` (docs.css § endpoint-card): the method
   glyph is a monospaced text mark in the method's accent color at the
   lead-text scale, not a pill. */
.pw-endpoint__method {
  color: var(--pw-request-method-color);
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-lead);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
}

.pw-endpoint__path {
  color: var(--pw-text);
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-body);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.pw-endpoint__deprecated {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pw-status-error);
  border: 1px solid var(--pw-status-error);
  border-radius: 999px;
  /* 1px extra bottom padding balances the uppercase glyphs (which crowd the
     top of the line box) so DEPRECATED reads vertically centered in the pill. */
  padding: 0.1em 0.6em calc(0.1em + 1px);
}

.pw-endpoint__access {
  display: inline-flex;
  min-height: var(--pw-size-control-compact);
  align-items: center;
  gap: var(--pw-space-1);
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  padding-inline: var(--pw-space-2);
  font-size: var(--pw-text-code);
  color: var(--pw-text-muted);
}

.pw-endpoint__access svg {
  width: var(--pw-size-icon-sm);
  height: var(--pw-size-icon-sm);
  color: var(--pw-accent);
}

.pw-endpoint__body {
  padding: var(--pw-space-card);
  /* Reference `.content-card__body-stack` (docs.css § content-card): explicit
     zero-minimum grid track. Without it, long Shiki lines widen the flex
     child and push the code frame beyond the card's rounded bottom edge. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: var(--pw-space-6);
}

/* Zero-minimum so long source lines never widen a section beyond the card. */
.pw-endpoint__section {
  min-width: 0;
}

.pw-endpoint__summary {
  margin: 0;
  font-weight: 550;
}

.pw-endpoint__description {
  color: var(--pw-text-muted);
}

.pw-endpoint__section {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-card-row);
}

.pw-endpoint__section-header {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  font-size: var(--pw-text-lead);
  font-weight: 400;
  line-height: 1.25;
  color: var(--pw-text);
}

.pw-endpoint__section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pw-docs-section-icon-size);
  height: 1lh;
  color: var(--pw-accent);
  flex: none;
  /* Same cap-mid alignment logic as the H2 chapter icon: the flex-row
     centering lands above the cap-mid, so lower the icon back onto it
     (verified in Chrome against the H4 text's range rect). Trimmed by 2px,
     which sat too low. */
  transform: translateY(calc(0.15em - 2px));
}

.pw-endpoint__section-icon svg,
.pw-endpoint__section-icon > * {
  width: var(--pw-docs-section-icon-size);
  height: var(--pw-docs-section-icon-size);
}

/* ---------- Parameter card (adopted from the reference) ----------
   Structure ported 1:1 from `apps/developer/src/components/docs/ParameterCard.tsx`
   + `.parameter-card*` and `.content-panel*` rules in docs.css. Values
   mapped onto periwinkle tokens (surface, surface-alt, accent, spacing). */

:root {
  --pw-docs-parameter-name-width: 10rem;
  --pw-docs-parameter-chip-padding-block-start: max(0px, calc(var(--pw-docs-space-xs) - 1px));
  --pw-docs-parameter-chip-padding-block-end: var(--pw-docs-space-xs);
  --pw-docs-code-bg: var(--pw-surface-alt);
  --pw-docs-code-fg: var(--pw-text);
}

.content-panel-list {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-3);
  margin: 0;
  padding: 0;
}

.parameter-card {
  display: grid;
  grid-template-columns:
    minmax(var(--pw-docs-parameter-name-width), 0.75fr)
    minmax(0, 1.25fr);
}

.parameter-card__header {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
  align-items: start;
  gap: var(--pw-space-2);
  padding: var(--pw-space-card-row);
  background: var(--pw-docs-code-bg);
  margin: 0;
}

/* Plain mono values shared across the card family (reference groups the
   same four selectors): parameter names, request-body media types, and the
   chip-less response meta values. */
.parameter-card__name,
.request-body-card__media-type,
.response-card__media-type,
.response-card__schema-name {
  color: var(--pw-docs-code-fg);
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-code);
}

.parameter-card__location,
.parameter-card__requirement {
  align-self: start;
  border-radius: calc(var(--pw-radius) / 2);
  padding: var(--pw-docs-parameter-chip-padding-block-start) var(--pw-docs-space-sm)
    var(--pw-docs-parameter-chip-padding-block-end);
  font-size: var(--pw-text-code);
  transform: translateY(
    calc(
      (
        var(--pw-docs-parameter-chip-padding-block-start) +
        var(--pw-docs-parameter-chip-padding-block-end)
      ) *
      -0.5
    )
  );
}

.parameter-card__location {
  box-shadow: inset 0 0 0 1px var(--pw-border);
  color: var(--pw-text-muted);
  background: var(--pw-surface);
}

.parameter-card__requirement {
  grid-column: 4;
  color: var(--pw-accent);
  background: color-mix(in srgb, var(--pw-accent) 12%, transparent);
}

.parameter-card__body {
  padding: var(--pw-space-card-row);
  margin: 0;
}

.pw-param__description {
  color: var(--pw-text-muted);
}

/* ---------- Request-body card (adopted from the reference) ---------- */

/* Media compound built on the shared ContentPanel surface (reference
   `RequestBodyCard`): header row with mono media type + schema link on the
   panel chrome, body slot carrying the example code block. */
.request-body-card__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
  padding: var(--pw-space-card-row);
}

.request-body-card__body {
  padding: var(--pw-space-card-row);
}

/* ---------- Response card (adopted from the reference) ---------- */

/* Tone-tinted inset-card variant (reference `.response-card`): the status
   unit (icon + code) sits left, the content column right. The surface
   override wins over the `.pw-card--inset` base by document order. */
.response-card {
  --pw-response-color: var(--pw-text-muted);
  /* One status line: the lead-size code at its 1.25 line height (reference
     `--mc-docs-response-line-size`). Status and summary share it so a
     single-line description centers against the icon/code unit. */
  --pw-docs-response-line-size: calc(var(--pw-text-lead) * 1.25);
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: var(--pw-space-3);
  padding: var(--pw-space-card-row);
  background: color-mix(
    in srgb,
    var(--pw-response-color) var(--pw-response-tint),
    var(--pw-surface)
  );
}

.response-card--success {
  --pw-response-color: var(--pw-method-post);
}

/* User-defined tone: 3xx responses read as a discreet accent (velvet) since
   blue is reserved for information notes elsewhere in the reference and its
   own success/warning/error triple already covers 2xx/4xx/5xx. */
.response-card--redirect {
  --pw-response-color: var(--pw-accent);
}

.response-card--client-error {
  --pw-response-color: var(--pw-method-put);
}

.response-card--server-error {
  --pw-response-color: var(--pw-method-delete);
}

.response-card__status {
  display: inline-grid;
  grid-template-columns: var(--pw-size-icon-lg) max-content;
  align-items: center;
  gap: var(--pw-space-2);
  min-height: var(--pw-docs-response-line-size);
}

.response-card__icon {
  width: var(--pw-size-icon-lg);
  height: var(--pw-size-icon-lg);
  color: var(--pw-response-color);
  /* Nudge the status icon 1px lower so it sits on the numeric code's
     cap-mid instead of a touch above it. */
  transform: translateY(1px);
}

.response-card__code {
  color: var(--pw-response-color);
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-lead);
  font-weight: 600;
  line-height: 1.25;
}

.response-card__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-docs-space-md);
  color: var(--pw-text-muted);
  min-width: 0;
}

/* Grid grows for multiline Markdown while retaining one-line centering
   against the indivisible response icon/code status unit (reference
   `.response-card__summary`). */
.response-card__summary {
  display: grid;
  block-size: max-content;
  min-height: var(--pw-docs-response-line-size);
  align-items: center;
}

.response-card__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-docs-space-md);
}

.response-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
  align-items: center;
}

.response-card__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--pw-space-1);
}

.response-card__meta-label {
  color: var(--pw-text-muted);
}

/* ---------- Schema cards ---------- */

/* Mono link mark used by schema field types and variant lists. */
.pw-schema-link {
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-code);
  font-weight: 600;
}

.pw-schema-card {
  background: var(--pw-surface);
  border-radius: var(--pw-radius);
  overflow: hidden;
}

.pw-schema-card__summary {
  display: flex;
  min-height: var(--pw-size-control);
  align-items: center;
  gap: var(--pw-space-card-row);
  padding: var(--pw-space-card-header);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.pw-schema-card__summary::-webkit-details-marker {
  display: none;
}

.pw-schema-card__summary:hover {
  background: var(--pw-surface-alt);
}

.pw-schema-card__chevron {
  position: relative;
  display: inline-flex;
  width: var(--pw-docs-nav-toggle-size);
  height: var(--pw-docs-nav-toggle-size);
  align-items: center;
  justify-content: center;
  flex: none;
  color: color-mix(in srgb, var(--pw-text-muted) var(--pw-icon-tone), var(--pw-icon-backdrop));
  pointer-events: none;
}

.pw-schema-card__chevron > .pw-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition:
    opacity var(--pw-nav-transition-duration) var(--pw-nav-transition-easing),
    transform var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
}

.pw-schema-card__title {
  flex: 1;
  color: var(--pw-text);
  font-family: var(--pw-font-heading);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
}

/* Schema-card tabs adopt the reference segmented control (see
   "Segmented control (adopted from the reference)" block below). Local slot
   sizing mirrors the reference `.schema-card { --segmented-control-* }` map,
   with derived radii keeping the switch flush inside the card. */
.pw-schema-card {
  --pw-schema-toggle-inset: var(--pw-docs-space-xs);
  --pw-schema-toggle-radius-trim: 1px;
  --pw-schema-toggle-radius: max(
    0px,
    calc(
      var(--pw-docs-content-panel-radius) -
      var(--pw-space-1) -
      var(--pw-schema-toggle-radius-trim)
    )
  );
  --pw-schema-toggle-tab-radius: max(
    0px,
    calc(var(--pw-schema-toggle-radius) - var(--pw-schema-toggle-inset))
  );
  --pw-schema-toggle-tab-height: calc(var(--pw-size-control-compact) - var(--pw-space-1));
  --segmented-control-inset: var(--pw-schema-toggle-inset);
  --segmented-control-radius: var(--pw-schema-toggle-radius);
  --segmented-control-item-radius: var(--pw-schema-toggle-tab-radius);
  --segmented-control-item-min-height: var(--pw-schema-toggle-tab-height);
  --segmented-control-item-padding-inline: var(--pw-space-3);
}

/* The switch keeps interaction active even though the card summary hosts it,
   matching the reference `.schema-card .segmented-control { pointer-events: auto; }`. */
.pw-schema-card__tabs {
  pointer-events: auto;
}

/* The card body is height/opacity-animated by the client. Same containment
   recipe as the sidebar section content, so long field tables don't
   invalidate the surrounding page layout during the animation. */
.pw-schema-card__body {
  padding: var(--pw-space-card);
  display: grid;
  gap: var(--pw-space-4);
  contain: layout paint;
  will-change: height, opacity;
}

.pw-schema-card__variants {
  display: flex;
  align-items: baseline;
  gap: var(--pw-space-2);
  flex-wrap: wrap;
}

.pw-schema-card__variants-title {
  font-size: var(--pw-text-body);
  font-weight: 500;
  color: var(--pw-text-muted);
}

.pw-schema-card__variants-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: var(--pw-space-3);
}

.pw-fields {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pw-text-code);
}

.pw-fields th {
  text-align: left;
  font-size: var(--pw-text-code);
  font-weight: 500;
  color: var(--pw-text-muted);
  padding: var(--pw-space-3);
  border-bottom: 1px solid var(--pw-border);
}

.pw-fields td {
  padding: var(--pw-space-3);
  border-bottom: 1px solid var(--pw-border);
  vertical-align: top;
}

.pw-fields tr:last-child td {
  border-bottom: none;
}

.pw-fields__row[data-depth="1"] .pw-fields__name {
  padding-left: calc(var(--pw-space-3) + var(--pw-space-5));
}

.pw-fields__name code {
  font-weight: 600;
}

.pw-fields__presence [data-presence="included"] {
  color: var(--pw-status-error);
  font-weight: 650;
  font-size: var(--pw-text-code);
}

.pw-fields__presence [data-presence="optional"] {
  color: var(--pw-text-faint);
  font-size: var(--pw-text-code);
}

.pw-fields__type code {
  color: var(--pw-accent);
  font-size: var(--pw-text-code);
}

.pw-fields__description {
  color: var(--pw-text-muted);
  font-size: var(--pw-text-body);
  line-height: 1.5;
}

/* ---------- Code blocks (adopted from the reference) ---------- */

/* Docs tokens the code-block compound consumes. Derivations are read
   verbatim from the reference (`docs.css` `.api-reference-shell`); the
   color-mix sources map --color-code-bg → --pw-background and
   --color-surface-raised → --pw-surface-alt, matching the search dialog's
   adopted surfaces. */
:root {
  --pw-docs-content-card-copy-inset: calc(var(--pw-radius) / 2);
  --pw-docs-content-panel-inset: var(--pw-space-1);
  --pw-docs-content-panel-radius: max(
    0px,
    calc(var(--pw-radius) - var(--pw-docs-content-panel-inset))
  );
  --pw-docs-code-surface: color-mix(in srgb, var(--pw-background) 84%, transparent);
  --pw-docs-code-gutter-surface: color-mix(
    in srgb,
    var(--pw-docs-code-surface) 88%,
    var(--pw-surface-alt) 12%
  );
}

/* Keep the scrollable code surface within every compound-card slot. Long
   source lines scroll inside this frame instead of widening or escaping it. */
.code-block,
.code-block__surface,
.code-block__frame {
  min-width: 0;
  max-width: 100%;
}

/* The reference zeroes paragraph margins via its preflight; periwinkle has
   no global reset, so the label drops its top margin here while the `mb-2`
   utility keeps the reference's bottom gap. */
.code-block__label {
  margin-top: 0;
  padding-inline: var(--pw-docs-content-card-copy-inset);
  color: var(--pw-text-muted);
}

.code-block__surface {
  --pw-code-copy-clearance: calc(var(--pw-size-control-compact) + var(--pw-space-5));
  position: relative;
}

.code-block__actions {
  position: absolute;
  top: var(--pw-space-2);
  right: var(--pw-space-2);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}

.code-block__copy {
  display: inline-flex;
  width: var(--pw-size-control-compact);
  min-height: var(--pw-size-control-compact);
  height: var(--pw-size-control-compact);
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--pw-text-muted);
  cursor: pointer;
  transition: color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.code-block__copy:hover {
  color: var(--pw-accent);
}

.code-block__copy-success {
  display: inline-flex;
  color: var(--pw-status-success);
  animation: code-copy-success var(--pw-motion-duration-slow) var(--pw-nav-transition-easing) both;
}

.code-block__copy-success[hidden] {
  display: none;
}

.code-block__copy-icon,
.code-block__copy-success-icon {
  width: var(--pw-size-icon-lg);
  height: var(--pw-size-icon-lg);
}

.code-block__frame {
  overflow: auto;
  background: var(--pw-docs-code-surface);
  font-size: var(--pw-text-code);
  line-height: var(--pw-code-line-height);
}

[data-code-vertical-scroll] .code-block__frame {
  max-block-size: calc(20lh + var(--pw-code-padding-block) + var(--pw-code-padding-block));
}

/* Text color comes from Shiki's dual-theme inline styles plus the dark
   override below; the frame owns the code surface, exactly like the
   reference. */
.code-block__frame pre.shiki {
  margin: 0;
  padding: var(--pw-code-padding-block) var(--pw-code-copy-clearance) var(--pw-code-padding-block)
    var(--pw-code-padding-inline);
  /* biome-ignore lint/complexity/noImportantStyles: Shiki inlines the light-theme background; only !important lets the frame surface show through, exactly like the reference. */
  background: transparent !important;
  font-family: var(--pw-font-mono);
  font-size: inherit;
  line-height: inherit;
}

/* A continuous gutter keeps line numbers visually separate without adding
   content to the selectable code node or the clipboard payload. */
[data-code-line-numbers] .code-block__frame pre.shiki {
  --code-line-number-column-width: calc(
    var(--pw-code-gutter-padding-inline) +
    var(--pw-code-gutter-number-width) +
    var(--pw-code-gutter-padding-inline)
  );
  padding-left: var(--pw-code-gutter-padding-inline);
  background: linear-gradient(
    to right,
    var(--pw-docs-code-gutter-surface) 0 var(--code-line-number-column-width),
    var(--pw-border) var(--code-line-number-column-width)
      calc(var(--code-line-number-column-width) + 1px),
    transparent calc(var(--code-line-number-column-width) + 1px)
  ) /* biome-ignore lint/complexity/noImportantStyles: Must beat the pre rule's `background: transparent !important` above, exactly like the reference gutter. */ !important;
}

/* Pseudo-elements keep visual line numbers out of the code node, so copy
   actions continue to return the exact source text. */
[data-code-line-numbers] code {
  counter-reset: code-line;
}

[data-code-line-numbers] .line {
  display: inline;
}

[data-code-line-numbers] .line::before {
  min-width: var(--pw-code-gutter-number-width);
  margin-right: calc(var(--pw-code-gutter-padding-inline) + var(--pw-code-gutter-code-gap));
  display: inline-block;
  color: var(--pw-text-faint);
  content: counter(code-line);
  counter-increment: code-line;
  text-align: right;
  user-select: none;
}

/* Shiki dual-theme switch. Unlike the old design the frame owns the code
   surface (see the transparent pre background above), so only the token
   colors flip in dark mode. */
[data-theme="dark"] .code-block__frame .shiki,
[data-theme="dark"] .code-block__frame .shiki span {
  /* biome-ignore lint/complexity/noImportantStyles: Shiki's documented dual-theme pattern; inline light-theme styles can only be overridden with !important. */
  color: var(--shiki-dark) !important;
}

@keyframes code-copy-success {
  from {
    opacity: 0;
    transform: scale(0.84);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Markdown ---------- */

.pw-markdown > :first-child {
  margin-top: 0;
}

.pw-markdown > :last-child {
  margin-bottom: 0;
}

.pw-markdown code,
.pw-markdown-inline code {
  background: var(--pw-surface-alt);
  border-radius: calc(var(--pw-radius) / 2);
  padding: 0.1em 0.35em;
  font-size: 0.9em; /* reference inline-code scale (--mc-docs-inline-code-scale) */
}

.pw-markdown ul {
  padding-left: var(--pw-space-5);
  margin: var(--pw-space-2) 0;
}

/* ---------- Footer ---------- */

.pw-footer {
  border-top: 1px solid var(--pw-border);
  padding-top: var(--pw-space-4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pw-space-4);
  color: var(--pw-text-faint);
}

.pw-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--pw-space-3);
}

.pw-footer__text {
  margin: 0;
}

/* ---------- Search dialog (adopted from the reference) ---------- */

/* Tokens only the adopted dialog block consumes; sizing and typography
   tokens live in the shared token block at the top of this file. Raw values
   are read verbatim from the reference theme (developer-theme.css /
   docs.css). */
:root {
  --pw-radius-keycap: 0.3125rem;
  --pw-content-link-radius: 0.25rem;
  --pw-shadow-color: rgba(0, 0, 0, 0.28);
  --pw-sky-top: #0d1b28;
  /* Card header chrome is derived from the current text color so the
     header always reads as noticeably darker in light mode and lifted in
     dark mode, without hardcoding either palette. */
  --pw-docs-card-chrome: color-mix(in srgb, var(--pw-text) 6%, var(--pw-surface));
  --pw-docs-search-dialog-max-width: 48rem;
  --pw-docs-search-dialog-min-height: 20rem;
  --pw-docs-search-dialog-top: calc(var(--pw-space-8) + var(--pw-space-6));
  --pw-docs-search-dialog-viewport-gap: var(--pw-space-5);
  --pw-docs-search-dialog-offset: var(--pw-space-3);
  --pw-docs-search-dialog-input-surface: color-mix(
    in srgb,
    var(--pw-background) 82%,
    var(--pw-surface-alt) 18%
  );
  --pw-docs-search-dialog-group-header-surface: color-mix(
    in srgb,
    var(--pw-docs-card-chrome) 84%,
    var(--pw-background) 16%
  );
  --pw-docs-search-highlight-color: #facc15;
  --pw-docs-search-highlight-padding-inline: calc(var(--pw-space-2) - 1px);
  --pw-docs-search-highlight-padding-block: 0;
  --pw-docs-search-highlight-notice-offset: var(--pw-space-5);
}

/* Visually hidden but accessible content (dialog title, live status). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Sizing and text utilities used by the adopted markup (Tailwind-equivalent
   values). */
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.text-body {
  font-size: var(--pw-text-body);
}

.text-code {
  font-size: var(--pw-text-code);
}

.text-fg-muted {
  color: var(--pw-text-muted);
}

.mb-2 {
  margin-bottom: var(--pw-space-2);
}

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

/* Icon aligns against the cap height of the first text line, rather than
   centering it against the complete wrapped paragraph. */
.icon-text-first-line {
  display: flex;
  align-items: flex-start;
}

.icon-text-first-line__icon {
  display: inline-flex;
  width: var(--pw-size-text-icon);
  height: 1lh;
  align-items: center;
  justify-content: center;
  flex: none;
  color: currentColor;
}

.icon-text-first-line__icon > .pw-icon,
.icon-text-first-line__icon > svg {
  width: var(--pw-size-text-icon);
  height: var(--pw-size-text-icon);
}

/* One semantic shortcut can contain several independently legible keys.
   The square surface deliberately contrasts with its parent, whether used
   inside transparent navigation or an already-raised card. */
.keycap {
  --pw-keycap-size: calc(1em + var(--pw-space-1));
  --pw-keycap-radius: var(--pw-radius-keycap);
  --pw-keycap-surface: color-mix(in srgb, var(--pw-surface-alt) 92%, var(--pw-text) 8%);

  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-1);
  color: var(--pw-text-muted);
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-code);
  line-height: 1;
  vertical-align: middle;
}

.keycap__key {
  display: inline-grid;
  width: var(--pw-keycap-size);
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: var(--pw-keycap-radius);
  color: inherit;
  background: var(--pw-keycap-surface);
}

/* Native modal search palette. The dialog itself is the surface card so no
   decorative card is nested inside another card. */
.api-dialog.surface-card {
  position: fixed;
  top: var(--pw-docs-search-dialog-top);
  inset-inline: 0;
  width: min(
    calc(100vw - var(--pw-page-padding) - var(--pw-page-padding)),
    var(--pw-docs-search-dialog-max-width)
  );
  max-width: none;
  min-height: var(--pw-docs-search-dialog-min-height);
  max-height: calc(
    100dvh -
    var(--pw-docs-search-dialog-top) -
    var(--pw-docs-search-dialog-viewport-gap)
  );
  margin: 0 auto;
  overflow: hidden;
  /* The reference resets element borders globally; periwinkle has no
     preflight, so the native dialog border is removed here. */
  border: 0;
  border-radius: var(--pw-radius);
  padding: 0;
  color: var(--pw-text);
  background: var(--pw-surface);
  box-shadow: 0 var(--pw-space-5) var(--pw-space-8)
    color-mix(in srgb, var(--pw-sky-top) 72%, transparent);
}

.api-dialog[open] {
  display: flex;
  flex-direction: column;
}

/* The reference darkens the search backdrop with `--color-sky-top`, an
   opaque navy that reads as a blue haze under the GitHub palette. Periwinkle
   swaps the tint source for the site's own `--pw-background` so the veil
   stays neutral (dark: near-black GitHub background; light: a soft off-white
   wash) without ever introducing a blue cast the palette does not carry. */
.api-dialog::backdrop {
  background: color-mix(in srgb, var(--pw-background) 44%, transparent);
  backdrop-filter: blur(var(--pw-space-2));
}

.search-dialog[data-state="open"] {
  animation: api-search-dialog-in var(--pw-nav-transition-duration) var(--pw-nav-transition-easing)
    both;
}

.search-dialog[data-state="open"]::backdrop {
  animation: api-search-backdrop-in var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

.search-dialog[data-state="closing"] {
  animation: api-search-dialog-out var(--pw-nav-transition-duration) var(--pw-nav-transition-easing)
    both;
}

.search-dialog[data-state="closing"]::backdrop {
  animation: api-search-backdrop-out var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

.api-dialog__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pw-space-3);
  padding: var(--pw-space-card-header);
  background: var(--pw-docs-card-chrome);
}

/* Shared with the sidebar's optional `.pw-nav__search` trigger, which
   deliberately mirrors this field so both search surfaces look identical. */
.search-dialog__header-search,
.pw-nav__search {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--pw-space-2);
  min-height: var(--pw-size-control);
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  padding-inline: var(--pw-space-3) var(--pw-space-2);
  color: var(--pw-text-muted);
  background: var(--pw-docs-search-dialog-input-surface);
}

.search-dialog__header-search:focus-within,
.pw-nav__search:focus-within {
  border-color: var(--pw-accent);
}

.search-dialog__header-search-icon {
  display: inline-flex;
  color: var(--pw-text-muted);
}

.search-dialog__header-search-input,
.pw-nav__search-input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--pw-text);
  background: transparent;
  font-family: inherit;
  font-size: var(--pw-text-body);
}

.search-dialog__header-search-input::placeholder,
.pw-nav__search-input::placeholder {
  color: var(--pw-text-faint);
}

.search-dialog__header-search-input::-webkit-search-cancel-button,
.pw-nav__search-input::-webkit-search-cancel-button {
  display: none;
}

.search-dialog__header-search-clear,
.search-dialog__header-close {
  display: inline-flex;
  width: var(--pw-size-control);
  min-height: var(--pw-size-control);
  height: var(--pw-size-control);
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  color: var(--pw-text-muted);
  background: transparent;
  cursor: pointer;
  transition: color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.search-dialog__header-search-clear {
  width: var(--pw-size-icon-lg);
  min-height: var(--pw-size-icon-lg);
  height: var(--pw-size-icon-lg);
}

.search-dialog__header-search-clear:hover,
.search-dialog__header-close:hover {
  color: var(--pw-accent);
}

.api-dialog__header-addon {
  display: flex;
  align-items: center;
}

.api-dialog__body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background: var(--pw-surface);
}

.search-dialog__results {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-block: var(--pw-space-2);
  scroll-padding-block: var(--pw-space-2);
}

.search-dialog__results[hidden] {
  display: none;
}

.search-dialog__group + .search-dialog__group {
  margin-top: var(--pw-space-2);
}

.search-dialog__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pw-space-3);
  padding: var(--pw-space-2) var(--pw-space-card-header);
  color: var(--pw-text-muted);
  background: var(--pw-docs-search-dialog-group-header-surface);
}

.search-dialog__group-header-title {
  font-size: var(--pw-text-body);
  font-weight: 600;
}

.search-dialog__group-header-addon {
  min-width: var(--pw-space-7);
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  padding: var(--pw-docs-space-xs) var(--pw-docs-space-sm);
  color: var(--pw-text-muted);
  text-align: center;
}

.search-dialog__group-items {
  display: grid;
  gap: var(--pw-space-1);
  padding: var(--pw-space-2);
}

.search-dialog__result {
  display: grid;
  grid-template-columns: var(--pw-size-text-icon) minmax(0, 1fr) max-content;
  align-items: start;
  gap: var(--pw-space-3);
  width: 100%;
  min-height: var(--pw-size-control);
  border: 0;
  border-radius: calc(var(--pw-radius) / 2);
  padding: var(--pw-space-3);
  color: var(--pw-text-muted);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--pw-text-body);
  text-align: left;
  transition:
    color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing),
    background-color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.search-dialog__result:hover,
.search-dialog__result[aria-selected="true"] {
  color: var(--pw-text);
  background: var(--pw-surface-alt);
}

.search-dialog__result[aria-selected="true"] {
  outline: 1px solid color-mix(in srgb, var(--pw-accent) 48%, transparent);
}

.search-dialog__result-icon {
  color: var(--pw-text);
}

.search-dialog__result-content {
  display: grid;
  min-width: 0;
  gap: var(--pw-space-1);
}

.search-dialog__result-title {
  color: var(--pw-text);
  font-size: inherit;
  font-weight: 600;
}

.search-dialog__result-snippet {
  display: -webkit-box;
  overflow: hidden;
  color: var(--pw-text-muted);
  font-size: var(--pw-text-code);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.search-dialog__result-addon {
  color: var(--pw-accent);
  font-size: var(--pw-text-code);
}

.search-dialog__match {
  border-radius: var(--pw-content-link-radius);
  padding-inline: var(--pw-docs-space-xs);
  color: var(--pw-text);
  background: color-mix(in srgb, var(--pw-accent) 26%, transparent);
}

.search-dialog__empty {
  display: grid;
  min-height: var(--pw-docs-search-dialog-min-height);
  flex: 1;
  place-items: center;
  padding: var(--pw-space-card);
  color: var(--pw-text-muted);
  font-size: var(--pw-text-body);
  text-align: center;
}

.search-dialog__empty[hidden] {
  display: none;
}

.api-dialog__footer {
  padding: var(--pw-space-2) var(--pw-space-card-header);
  color: var(--pw-text-faint);
  background: var(--pw-docs-card-chrome);
}

.search-dialog__footer-hints {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
}

.search-dialog__footer-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-code);
}

mark[data-api-search-highlight] {
  border-radius: var(--pw-content-link-radius);
  padding-inline: var(--pw-docs-search-highlight-padding-inline);
  padding-block: var(--pw-docs-search-highlight-padding-block);
  color: var(--pw-text);
  background: color-mix(in srgb, var(--pw-docs-search-highlight-color) 28%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pw-docs-search-highlight-color) 52%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: api-search-highlight-in var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

.api-search-highlight-notice {
  position: fixed;
  z-index: 20;
  top: calc(var(--pw-docs-search-highlight-notice-offset) + env(safe-area-inset-top));
  right: calc(var(--pw-docs-search-highlight-notice-offset) + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  max-width: calc(100vw - var(--pw-space-4));
  border: 1px solid color-mix(in srgb, var(--pw-docs-search-highlight-color) 56%, var(--pw-border));
  border-radius: var(--pw-radius);
  padding: var(--pw-space-2) var(--pw-space-3);
  color: var(--pw-text);
  background: color-mix(in srgb, var(--pw-docs-search-highlight-color) 18%, var(--pw-surface));
  box-shadow: 0 0.75rem 2rem var(--pw-shadow-color);
  animation: api-search-highlight-notice-in var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

/* The statically rendered notice stays in the DOM; `hidden` must win over
   the flex display above. */
.api-search-highlight-notice[hidden] {
  display: none;
}

.api-search-highlight-notice__text {
  min-width: 0;
  font-size: var(--pw-text-code);
  font-weight: 600;
}

.api-search-highlight-notice__dismiss {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--pw-size-control-compact);
  height: var(--pw-size-control-compact);
  margin: calc(var(--pw-space-1) * -1);
  border: 0;
  border-radius: calc(var(--pw-radius) / 2);
  color: var(--pw-text-muted);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing),
    background var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.api-search-highlight-notice__dismiss:hover,
.api-search-highlight-notice__dismiss:focus-visible {
  color: var(--pw-text);
  background: var(--pw-surface-alt);
}

@keyframes api-search-dialog-in {
  from {
    opacity: 0;
    transform: translateY(var(--pw-docs-search-dialog-offset)) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes api-search-dialog-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(var(--pw-docs-search-dialog-offset)) scale(0.98);
  }
}

@keyframes api-search-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes api-search-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes api-search-highlight-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes api-search-highlight-notice-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--pw-space-2) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 40rem) {
  :root {
    --pw-docs-search-dialog-top: max(
      var(--pw-space-5),
      calc(env(safe-area-inset-top) + var(--pw-space-3))
    );
  }

  .api-dialog.surface-card {
    width: calc(100vw - var(--pw-space-2) - var(--pw-space-2));
    min-height: min(var(--pw-docs-search-dialog-min-height), calc(100dvh - var(--pw-space-4)));
    max-height: calc(
      100dvh -
      var(--pw-docs-search-dialog-top) -
      var(--pw-docs-search-dialog-viewport-gap)
    );
  }

  .api-dialog__header {
    gap: var(--pw-space-2);
    padding: var(--pw-space-2);
  }

  .search-dialog__result {
    grid-template-columns: var(--pw-size-text-icon) minmax(0, 1fr);
  }

  .search-dialog__result-addon {
    grid-column: 2;
  }

  .api-dialog__footer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .api-dialog,
  .api-dialog::backdrop,
  .api-search-highlight-notice,
  mark[data-api-search-highlight],
  .code-block__copy-success,
  .openapi-contract-dialog__loading-spinner {
    animation: none;
  }

  .openapi-contract-dialog.surface-card {
    transition: none;
  }
}

.openapi-contract-dialog {
  animation: openapi-contract-dialog-out var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

.openapi-contract-dialog::backdrop {
  animation: openapi-contract-backdrop-out var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

.openapi-contract-dialog[data-state="open"] {
  animation: openapi-contract-dialog-in var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

.openapi-contract-dialog[data-state="open"]::backdrop {
  animation: openapi-contract-backdrop-in var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

.openapi-contract-dialog[data-state="closing"] {
  animation: openapi-contract-dialog-out var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

.openapi-contract-dialog[data-state="closing"]::backdrop {
  animation: openapi-contract-backdrop-out var(--pw-nav-transition-duration)
    var(--pw-nav-transition-easing) both;
}

@keyframes openapi-contract-dialog-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes openapi-contract-dialog-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@keyframes openapi-contract-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes openapi-contract-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ---------- OpenAPI contract dialog (adopted from the reference) ---------- */

:root {
  --pw-docs-contract-dialog-max-width: 72rem;
  --pw-docs-contract-dialog-viewport-gap: var(--pw-space-5);
  --pw-docs-contract-dialog-close-icon-size: calc(var(--pw-size-icon-lg) + 2px);
  --pw-docs-contract-dialog-header-block-size: calc(
    var(--pw-text-card-title) *
    1.25 +
    var(--pw-space-card-header) +
    var(--pw-space-card-header)
  );
  --pw-docs-contract-dialog-loading-height: calc(
    var(--pw-docs-contract-dialog-header-block-size) +
    var(--pw-space-card) +
    var(--pw-space-card) +
    var(--pw-size-icon-lg) +
    var(--pw-space-8) +
    var(--pw-space-8)
  );
}

.openapi-contract-dialog.surface-card {
  top: var(--pw-docs-contract-dialog-viewport-gap);
  width: min(
    calc(100vw - var(--pw-page-padding) - var(--pw-page-padding)),
    var(--pw-docs-contract-dialog-max-width)
  );
  height: calc(
    100dvh -
    var(--pw-docs-contract-dialog-viewport-gap) -
    var(--pw-docs-contract-dialog-viewport-gap)
  );
  min-height: 0;
  max-height: none;
  transition: height var(--pw-motion-duration-slow) var(--pw-nav-transition-easing);
}

.openapi-contract-dialog[data-openapi-contract-state="loading"] {
  height: var(--pw-docs-contract-dialog-loading-height);
}

.openapi-contract-dialog__header-title {
  padding-inline-start: var(--pw-card-content-inset);
  color: var(--pw-text);
  font-family: var(--pw-font-heading);
  font-size: var(--pw-text-card-title);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.openapi-contract-dialog__close {
  display: inline-flex;
  width: var(--pw-size-control);
  min-height: var(--pw-size-control);
  height: var(--pw-size-control);
  align-items: center;
  justify-content: center;
  flex: none;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--pw-text-muted);
  background: transparent;
  cursor: pointer;
  transition: color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
  box-shadow: none;
}

.openapi-contract-dialog__close:hover,
.openapi-contract-dialog__close:focus-visible {
  color: var(--pw-accent);
}

.openapi-contract-dialog__close-icon {
  width: var(--pw-docs-contract-dialog-close-icon-size);
  height: var(--pw-docs-contract-dialog-close-icon-size);
}

.openapi-contract-dialog .api-dialog__body {
  padding: var(--pw-space-card);
}

.openapi-contract-dialog__loading {
  display: none;
  padding-block: var(--pw-space-8);
}

.openapi-contract-dialog[data-openapi-contract-state="loading"] .api-dialog__body {
  display: grid;
  flex: none;
  place-items: center;
}

.openapi-contract-dialog[data-openapi-contract-state="loading"] [data-code-block] {
  display: none;
}

.openapi-contract-dialog[data-openapi-contract-state="loading"] .openapi-contract-dialog__loading {
  display: grid;
  place-items: center;
}

.openapi-contract-dialog__loading-spinner {
  width: var(--pw-size-icon-lg);
  height: var(--pw-size-icon-lg);
  border: var(--pw-docs-space-xs) solid color-mix(in srgb, var(--pw-text) 36%, transparent);
  border-top-color: var(--pw-text);
  border-radius: 999px;
  animation: openapi-contract-spinner var(--pw-motion-duration-slow) linear infinite;
}

.code-block[data-code-fill-available],
.code-block[data-code-fill-available] .code-block__surface,
.code-block[data-code-fill-available] .code-block__frame {
  display: flex;
  min-block-size: 0;
  flex: 1;
}

.code-block[data-code-fill-available] .code-block__frame {
  max-block-size: none;
}

@keyframes openapi-contract-spinner {
  to {
    transform: rotate(1turn);
  }
}

/* ---------- Segmented control (adopted from the reference) ---------- */

/* Reusable segmented control adopted verbatim from the reference
   (`components.css` `.segmented-control` block). Local slot sizing is fed
   from the consuming card through `--segmented-control-*` custom properties,
   so future call sites can reuse this surface without editing the shared
   rules. Color values are mapped to periwinkle's `--pw-*` tokens. */
.segmented-control {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-width: 0;
  border: 1px solid var(--pw-border);
  border-radius: var(--segmented-control-radius, calc(var(--pw-radius) / 2));
  padding: var(--segmented-control-inset, var(--pw-space-1));
  background: var(--pw-docs-code-surface, var(--pw-surface-alt));
}

/* Selection indicator that slides between selected items. Position and size
   come from `--segmented-control-indicator-*` custom properties written by
   the client controller when it wires the segmented control. */
.segmented-control::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--segmented-control-indicator-width, 0px);
  height: var(--segmented-control-indicator-height, 0px);
  border-radius: var(--segmented-control-item-radius, calc(var(--pw-radius) / 2));
  background: color-mix(in srgb, var(--pw-accent) 16%, var(--pw-surface-alt));
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate3d(
    var(--segmented-control-indicator-x, 0px),
    var(--segmented-control-indicator-y, 0px),
    0
  );
  transition:
    transform var(--pw-nav-transition-duration) var(--pw-nav-transition-easing),
    width var(--pw-nav-transition-duration) var(--pw-nav-transition-easing),
    height var(--pw-nav-transition-duration) var(--pw-nav-transition-easing),
    opacity var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.segmented-control[data-segmented-control-indicator-ready="true"]::before {
  opacity: 1;
}

.segmented-control__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--segmented-control-item-gap, var(--pw-space-2));
  min-height: var(--segmented-control-item-min-height, var(--pw-size-control-compact));
  border: 0;
  border-radius: var(--segmented-control-item-radius, calc(var(--pw-radius) / 2));
  padding-inline: var(--segmented-control-item-padding-inline, var(--pw-space-3));
  color: var(--pw-text-muted);
  background: transparent;
  font-family: var(--pw-font-base);
  font-size: var(--pw-text-code);
  cursor: pointer;
  transition:
    color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing),
    background-color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.segmented-control__item:hover,
.segmented-control__item:focus-visible {
  color: var(--pw-text);
}

.segmented-control__item[aria-selected="true"] {
  color: var(--pw-text);
  background: color-mix(in srgb, var(--pw-accent) 16%, var(--pw-surface-alt));
}

/* Once the indicator has taken over, the selected item's own background
   becomes transparent so the moving pill is the only lit surface. */
.segmented-control[data-segmented-control-indicator-ready="true"]
.segmented-control__item[aria-selected="true"] {
  background: transparent;
}

.segmented-control__item-icon {
  display: inline-flex;
  width: var(--segmented-control-item-icon-size, var(--pw-size-icon-md));
  height: var(--segmented-control-item-icon-size, var(--pw-size-icon-md));
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  border-radius: var(--segmented-control-item-icon-radius, 999px);
  background: var(--segmented-control-item-icon-background, var(--pw-surface-alt));
}

.segmented-control__item-icon > img,
.segmented-control__item-icon > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Responsive ---------- */

/* The reference collapses the two-column reference layout below 64rem and
   grows the compact nav controls to the full touch-target size. */
@media (max-width: 63.999rem) {
  .api-reference-layout,
  .pw-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .api-reference-nav,
  .pw-content {
    max-width: 100%;
  }

  .code-block__copy,
  .api-reference-nav__toggle-all,
  .pw-nav__icon-button,
  .api-reference-nav__toggle {
    width: var(--pw-size-control);
    min-height: var(--pw-size-control);
    height: var(--pw-size-control);
  }

  .api-reference-nav__count {
    height: var(--pw-size-control);
  }

  .code-block__surface {
    --pw-code-copy-clearance: calc(var(--pw-size-control) + var(--pw-space-5));
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .api-reference-nav__summary,
  .api-reference-nav__toggle-all svg,
  .pw-nav__icon-button svg,
  .pw-schema-card__chevron,
  .pw-chevron,
  .segmented-control::before,
  .segmented-control__item {
    transition: none;
  }
}

/* ---------- Config builder (standalone builder.html) ---------- */

/* Root wrapper for the builder page. Reuses the shared `.pw-app` (which
   publishes --pw-topnav-height when the top nav renders) and adds
   builder-specific layout on top. */
.pw-cb-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pw-cb__intro {
  padding: var(--pw-space-8) var(--pw-page-padding) 0;
  /* Text outside the cards is indented by half the card corner radius so it
     lines up with the rounded card edge (same as the column headings). */
  padding-inline-start: calc(var(--pw-page-padding) + var(--pw-radius) / 2);
  max-width: var(--pw-container-max-width);
  margin: 0 auto;
  width: 100%;
}

.pw-cb__title {
  font-size: var(--pw-text-hero);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 var(--pw-space-3);
}

.pw-cb__lead {
  color: var(--pw-text-muted);
  font-size: var(--pw-text-lead);
  /* Three separate paragraphs, each its own flowing block that runs the full
     content width instead of wrapping early inside a narrow measure. */
  margin: 0 0 var(--pw-space-4);
}

.pw-cb__meta {
  color: var(--pw-text-faint);
  font-size: var(--pw-text-body);
  margin-top: var(--pw-space-3);
}

.pw-cb__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pw-space-6);
  max-width: var(--pw-container-max-width);
  margin: 0 auto;
  padding: var(--pw-space-6) var(--pw-page-padding) var(--pw-space-page-bottom);
  width: 100%;
  flex: 1;
}
@media (max-width: 56rem) {
  .pw-cb__layout {
    grid-template-columns: 1fr;
  }
}

.pw-cb__form {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-4);
  min-width: 0;
}

/* Each grid column wraps a heading (icon + H2, plus the expand/collapse-all
   chevron on the form side) above its content. */
.pw-cb__column {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-4);
  min-width: 0;
}

.pw-cb__column-header {
  position: sticky;
  top: var(--pw-topnav-height, 0px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--pw-space-3);
  padding-block: var(--pw-space-4);
  /* Indent by half the card corner radius so the heading lines up with the
     rounded card edge below it. */
  padding-inline-start: calc(var(--pw-radius) / 2);
  /* Frosted backdrop like the top nav so content scrolling underneath does not
     show through the pinned heading. */
  background: color-mix(in srgb, var(--pw-background) 82%, transparent);
  -webkit-backdrop-filter: blur(var(--pw-space-4));
  backdrop-filter: blur(var(--pw-space-4));
}

.pw-cb__column-icon {
  /* Match the H2's own size so the mark reads as part of the heading. */
  width: var(--pw-text-section);
  height: var(--pw-text-section);
  /* Lifted a touch off the full accent so the marks read softer. */
  color: color-mix(in srgb, var(--pw-accent) 74%, var(--pw-background));
  flex: none;
}

.pw-cb__column-title {
  margin: 0;
  font-size: var(--pw-text-section);
  font-weight: 500;
  color: var(--pw-text);
}

.pw-cb__toggle-all {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pw-docs-nav-toggle-size);
  height: var(--pw-docs-nav-toggle-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pw-text-muted);
  cursor: pointer;
  flex: none;
}

.pw-cb__toggle-all:hover {
  color: var(--pw-accent);
}

.pw-cb__toggle-all-icon {
  width: var(--pw-docs-nav-toggle-size);
  height: var(--pw-docs-nav-toggle-size);
}

.pw-cb__toggle-all[data-pw-cb-all-expanded="true"].pw-chevron {
  transform: rotate(180deg);
}

/* Sticky preview column: the heading + card wrapper is pinned below the top
   nav (with a small gap) so the generated config stays visible while the user
   scrolls the form. */
.pw-cb__column--preview {
  position: sticky;
  top: var(--pw-topnav-height, 0px);
  align-self: start;
  max-height: calc(100dvh - var(--pw-topnav-height, 0px) - var(--pw-space-4));
}

/* The preview column pins as a whole, so the heading and card scroll together.
   The heading must not open a second sticky context here: with its own sticky
   top the card would slide up underneath the opaque heading. Keeping it static
   pins the whole column below the top nav with the card always beneath the
   heading. */
.pw-cb__column--preview .pw-cb__column-header {
  position: static;
}

/* Container chrome comes from `.pw-card--elevated`; only the column-fill
   layout (so the card stretches to the sticky column height) lives here. */
.pw-cb__preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
@media (max-width: 56rem) {
  .pw-cb__column--preview {
    position: static;
    max-height: none;
  }
}

/* Flex/padding/background come from `.pw-card__header`; only the toolbar
   specifics (push filename and actions apart, allow wrapping) live here. */
.pw-cb__preview-header {
  justify-content: space-between;
  border-bottom: 1px solid var(--pw-border);
  flex-wrap: wrap;
}

.pw-cb__preview-actions {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  flex-wrap: wrap;
}

.pw-cb__preview-filename {
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-code);
  color: var(--pw-text-muted);
}

/* Preview body: two-column grid (line-number gutter + code cell). The
   gutter is `position: sticky; left: 0` so horizontal scrolling never
   hides the line numbers. */
.pw-cb__preview-body {
  margin: 0;
  padding: var(--pw-space-3) 0;
  overflow: auto;
  font-family: var(--pw-font-mono);
  font-size: var(--pw-text-code);
  line-height: 1.6;
  background: var(--pw-background);
  flex: 1;
  tab-size: 2;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  column-gap: var(--pw-space-4);
  row-gap: 0;
}

.pw-cb__lineno {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: right;
  color: var(--pw-text-faint);
  padding-inline-start: var(--pw-space-4);
  border-right: 1px solid var(--pw-border);
  padding-inline-end: var(--pw-space-2);
  user-select: none;
  -webkit-user-select: none;
  white-space: pre;
  background: var(--pw-background);
}

.pw-cb__code {
  white-space: pre;
  padding-inline-end: var(--pw-space-4);
}

/* Syntax colors: reuse the palette accents so the preview matches the
   docs' code blocks visually. */
.pw-cb__tk-kw {
  color: var(--pw-accent);
  font-weight: 500;
}
.pw-cb__tk-str {
  color: var(--pw-method-post);
}
.pw-cb__tk-num {
  color: var(--pw-method-put);
}
.pw-cb__tk-com {
  color: var(--pw-text-faint);
  font-style: italic;
}
.pw-cb__tk-key {
  color: var(--pw-link);
}
.pw-cb__tk-boo {
  color: var(--pw-status-success);
  font-weight: 500;
}

/* Top-bar action buttons */
.pw-cb__action {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  min-height: var(--pw-size-control-compact);
  padding: 0 var(--pw-space-3);
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-surface);
  color: var(--pw-text);
  font-family: inherit;
  font-size: var(--pw-text-code);
  font-weight: 500;
  /* Collapse the line box to the glyph height so the label sits on the flex
     center with the icon instead of riding low in a taller line box. */
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing),
    border-color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.pw-cb__action:hover {
  color: var(--pw-accent);
  border-color: var(--pw-accent);
}

.pw-cb__action--accent {
  background: var(--pw-accent);
  border-color: var(--pw-accent);
  color: #fff;
}

.pw-cb__action--accent:hover {
  background: color-mix(in srgb, var(--pw-accent) 84%, var(--pw-text));
  border-color: color-mix(in srgb, var(--pw-accent) 84%, var(--pw-text));
  color: #fff;
}

.pw-cb__action--danger:hover {
  color: var(--pw-status-error);
  border-color: var(--pw-status-error);
}

.pw-cb__action svg {
  width: var(--pw-size-icon-sm);
  height: var(--pw-size-icon-sm);
}

/* Sections (the collapsible field blocks). Structure mirrors the sidebar
   details/summary pattern, but as a plain button + wrapper so the body
   animates open AND closed via the grid-template-rows trick. */
/* Container chrome (border, radius, surface, overflow) comes from
   `.pw-card--elevated`; only the collapsible-summary specifics live here. */
.pw-cb__form .section__summary {
  border: 0;
  border-bottom: 1px solid transparent;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}

.pw-cb__form .section[data-open="true"] > .section__summary {
  border-bottom-color: var(--pw-border);
}

.pw-cb__form .section__summary:focus-visible {
  outline: 2px solid var(--pw-accent);
  outline-offset: -2px;
}

.pw-cb__form .section__title {
  font-family: var(--pw-font-heading);
  font-size: var(--pw-text-card-title);
  font-weight: 600;
  color: var(--pw-text);
}

/* Plain-language description at the top of an open section body. No bottom
   padding: the body-inner's own top padding sets the gap to the fields. */
.pw-cb__form .section__description {
  margin: 0;
  padding: var(--pw-space-4) var(--pw-space-4) 0;
  color: var(--pw-text-muted);
  font-size: var(--pw-text-code);
  line-height: 1.5;
}

/* Per-section reset button, aligned to the end of the section body. */
.pw-cb__form .section__actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--pw-space-4) var(--pw-space-4);
}

.pw-cb__form .section__reset:hover {
  color: var(--pw-status-error);
  border-color: var(--pw-status-error);
}

.pw-cb__form .section__hint {
  margin-left: auto;
  color: var(--pw-text-faint);
  font-size: var(--pw-text-body);
}

.pw-cb__form .section__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--pw-text-muted);
  transition: transform var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
  flex: none;
}

.pw-cb__form .section[data-open="true"] > .section__summary .section__chevron {
  transform: rotate(90deg);
}

.pw-cb__form .section__icon {
  width: var(--pw-size-icon-md);
  height: var(--pw-size-icon-md);
  color: color-mix(in srgb, var(--pw-accent) 74%, var(--pw-background));
  flex: none;
}

/* Body wrapper: grid-template-rows 0fr ↔ 1fr transition animates the
   height in both directions. Padding lives on the innermost wrapper so
   the grid track really collapses to 0. */
.pw-cb__form .section__body-outer {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows var(--pw-motion-duration-slow) cubic-bezier(0.4, 0, 0.2, 1),
    opacity var(--pw-nav-transition-duration) ease;
  contain: layout paint style;
  will-change: grid-template-rows, opacity;
  opacity: 0;
}

.pw-cb__form .section[data-open="true"] > .section__body-outer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.pw-cb__form .section__body {
  min-height: 0;
  overflow: hidden;
}

.pw-cb__form .section__body-inner {
  padding: var(--pw-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .pw-cb__form .section__body-outer {
    transition: none;
  }
}

/* Reset confirmation dialog */
.pw-cb__dialog {
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius);
  background: var(--pw-surface);
  color: var(--pw-text);
  padding: 0;
  max-width: 28rem;
}

.pw-cb__dialog::backdrop {
  background: color-mix(in srgb, var(--pw-sky-top) 60%, transparent);
  backdrop-filter: blur(var(--pw-space-2));
}

.pw-cb__dialog-body {
  padding: var(--pw-space-5);
}

.pw-cb__dialog-title {
  font-family: var(--pw-font-heading);
  font-size: var(--pw-text-card-title);
  font-weight: 600;
  margin: 0 0 var(--pw-space-2);
}

.pw-cb__dialog-text {
  color: var(--pw-text-muted);
  font-size: var(--pw-text-body);
  margin: 0 0 var(--pw-space-4);
}

.pw-cb__dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--pw-space-2);
}

/* Toast notification (used by copy/save actions in step 4) */
.pw-cb__toast {
  position: fixed;
  bottom: var(--pw-space-6);
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  padding: var(--pw-space-2) var(--pw-space-5);
  background: var(--pw-text);
  color: var(--pw-background);
  border-radius: 999px;
  font-size: var(--pw-text-code);
  font-weight: 500;
  transition:
    transform var(--pw-nav-transition-duration) cubic-bezier(0.16, 1, 0.3, 1),
    opacity var(--pw-nav-transition-duration) ease;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}
.pw-cb__toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ---------- Config builder: field widgets ---------- */
/* Ported from the standalone builder's field styles, scoped under
   `.pw-cb__form` so the generic class names (.field, .slider, .palette,
   .toggle, .segmented, .list-item, previews) cannot collide with the
   docs page, and mapped onto the shared --pw-* token set. */

.pw-cb__form .fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pw-space-3);
}
@media (max-width: 40rem) {
  .pw-cb__form .fields {
    grid-template-columns: 1fr;
  }
}
.pw-cb__form .fields--single {
  grid-template-columns: 1fr;
}

.pw-cb__form .field {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-1);
  min-width: 0;
}
.pw-cb__form .field__label {
  display: flex;
  align-items: baseline;
  gap: var(--pw-space-2);
  padding-inline-start: 3px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pw-text);
}
.pw-cb__form .field__default {
  font-family: var(--pw-font-mono);
  font-size: 0.875rem;
  color: var(--pw-text-faint);
  font-weight: 400;
}
.pw-cb__form .field__hint {
  padding-inline-start: 3px;
  font-size: 0.9375rem;
  color: var(--pw-text-muted);
  line-height: 1.4;
}
.pw-cb__form .field__input {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-background);
  color: var(--pw-text);
  font-family: var(--pw-font-base);
  font-size: 0.9375rem;
  transition: border-color var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
}
.pw-cb__form .field__input:focus {
  outline: none;
  border-color: var(--pw-accent);
}
.pw-cb__form textarea.field__input {
  min-height: 5rem;
  resize: vertical;
  font-family: var(--pw-font-mono);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.pw-cb__form .field__row {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}
.pw-cb__form .field__row .field__input {
  flex: 1;
}
.pw-cb__form .field__color-swatch {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  cursor: pointer;
  background: transparent;
  overflow: hidden;
}
.pw-cb__form .field__color-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}
.pw-cb__form .field__color-swatch::-webkit-color-swatch {
  border: none;
}
.pw-cb__form .field__color-swatch::-moz-color-swatch {
  border: none;
}
.pw-cb__form .field__select {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-background);
  color: var(--pw-text);
  font-family: inherit;
  font-size: 0.9375rem;
}

.pw-cb__form .toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  padding: 0.375rem 0;
  cursor: pointer;
}
.pw-cb__form .toggle__box {
  appearance: none;
  -webkit-appearance: none;
  width: 2.5rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--pw-border);
  position: relative;
  transition: background var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
  flex: none;
}
.pw-cb__form .toggle__box::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 999px;
  background: #fff;
  transition: transform var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
}
.pw-cb__form .toggle__box:checked {
  background: var(--pw-accent);
}
.pw-cb__form .toggle__box:checked::before {
  transform: translateX(1.125rem);
}
.pw-cb__form .toggle__label {
  font-size: 0.9375rem;
  color: var(--pw-text);
}

.pw-cb__form .palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pw-space-4);
}
@media (max-width: 44rem) {
  .pw-cb__form .palette-grid {
    grid-template-columns: 1fr;
  }
}
.pw-cb__form .palette {
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  padding: var(--pw-space-3);
  background: var(--pw-background);
}
.pw-cb__form .palette__title {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
  font-family: var(--pw-font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--pw-space-3);
}
.pw-cb__form .palette__list {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-2);
}
.pw-cb__form .palette__row {
  display: grid;
  grid-template-columns: 8rem 2.25rem minmax(0, 1fr);
  gap: var(--pw-space-2);
  align-items: center;
}
.pw-cb__form .palette__row-label {
  font-size: 0.9375rem;
  color: var(--pw-text-muted);
}
.pw-cb__form .palette__row .field__input {
  font-family: var(--pw-font-mono);
  font-size: 0.9375rem;
}

.pw-cb__form .list-item {
  display: grid;
  gap: var(--pw-space-2);
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-background);
}
.pw-cb__form .list-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pw-cb__form .list-item__title {
  font-weight: 600;
  font-size: 0.9375rem;
}
.pw-cb__form .list-item__remove {
  border: 1px solid transparent;
  background: transparent;
  color: var(--pw-text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: calc(var(--pw-radius) / 2);
  font-size: 0.9375rem;
  cursor: pointer;
}
.pw-cb__form .list-item__remove:hover {
  color: var(--pw-status-error);
  border-color: var(--pw-status-error);
}
.pw-cb__form .add-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-1);
  padding: 0.375rem 0.75rem;
  border: 1px dashed var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  background: transparent;
  color: var(--pw-text-muted);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
}
.pw-cb__form .add-btn:hover {
  border-color: var(--pw-accent);
  color: var(--pw-accent);
  border-style: solid;
}

.pw-cb__form .slider {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-2);
  padding: 0.75rem 0.875rem 0.875rem;
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-background);
}
.pw-cb__form .slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pw-space-3);
}
.pw-cb__form .slider__label {
  padding-inline-start: 3px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--pw-text);
}
.pw-cb__form .slider__value {
  font-family: var(--pw-font-mono);
  font-size: 0.9375rem;
  color: var(--pw-accent);
  font-weight: 500;
}
.pw-cb__form .slider__input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--pw-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.pw-cb__form .slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--pw-accent);
  cursor: grab;
  transition: transform var(--pw-motion-duration-fast) var(--pw-nav-transition-easing);
  border: 2px solid var(--pw-background);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.pw-cb__form .slider__input::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--pw-accent);
  cursor: grab;
  border: 2px solid var(--pw-background);
}
.pw-cb__form .slider__input:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.1);
}
.pw-cb__form .slider__hint {
  padding-inline-start: 3px;
  font-size: 0.875rem;
  color: var(--pw-text-muted);
  line-height: 1.4;
}

.pw-cb__form .font-preview {
  min-height: 2rem;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-surface-alt);
  color: var(--pw-text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pw-cb__form .font-preview--heading {
  font-family: var(--pw-font-heading);
}
.pw-cb__form .font-preview--body {
  font-family: var(--pw-font-base);
}
.pw-cb__form .font-preview--mono {
  font-family: var(--pw-font-mono);
}

.pw-cb__form .length-preview {
  padding: 0.5rem;
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-surface-alt);
  overflow: hidden;
}
.pw-cb__form .length-preview__bar {
  height: 0.5rem;
  background: linear-gradient(
    90deg,
    var(--pw-accent),
    color-mix(in srgb, var(--pw-accent) 70%, var(--pw-text))
  );
  border-radius: 2px;
  max-width: 100%;
  transition: width var(--pw-nav-transition-duration) var(--pw-nav-transition-easing);
}

.pw-cb__form .motion-widget {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}
.pw-cb__form .motion-preview {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-surface-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pw-cb__form .motion-preview__track {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: 50%;
  height: 2px;
  background: var(--pw-border);
  transform: translateY(-50%);
}
.pw-cb__form .motion-preview__dot {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--pw-accent);
  z-index: 1;
  transform: translateX(0);
}
.pw-cb__form .motion-preview__dot--running {
  animation-name: pw-cb-motion-dot-move;
  animation-fill-mode: both;
}
@keyframes pw-cb-motion-dot-move {
  from {
    transform: translateX(0);
  }
  50% {
    transform: translateX(var(--track-length, 0px));
  }
  to {
    transform: translateX(0);
  }
}
.pw-cb__form .motion-preview__play {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-1);
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-background);
  color: var(--pw-text);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}
.pw-cb__form .motion-preview__play:hover {
  border-color: var(--pw-accent);
  color: var(--pw-accent);
}

.pw-cb__form .mix-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pw-space-1);
}
.pw-cb__form .mix-preview__swatch {
  height: 2.5rem;
  border-radius: calc(var(--pw-radius) / 2);
  border: 1px solid var(--pw-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pw-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
}

.pw-cb__form .lh-preview {
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-surface-alt);
  color: var(--pw-text);
  font-family: var(--pw-font-mono);
  font-size: 0.9375rem;
  white-space: pre;
}

.pw-cb__form .guide-item {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-2);
  padding: var(--pw-space-3);
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  background: var(--pw-background);
}
.pw-cb__form .guide-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pw-cb__form .guide-item__title {
  font-weight: 600;
  font-size: 0.9375rem;
}
.pw-cb__form .segmented {
  display: inline-flex;
  border: 1px solid var(--pw-border);
  border-radius: calc(var(--pw-radius) / 2);
  padding: 2px;
  background: var(--pw-surface);
}
.pw-cb__form .segmented__item {
  border: 0;
  background: transparent;
  color: var(--pw-text-muted);
  padding: 0.25rem 0.625rem;
  border-radius: max(0px, calc(var(--pw-radius) / 2 - 2px));
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}
.pw-cb__form .segmented__item[aria-pressed="true"] {
  background: var(--pw-accent);
  color: #fff;
}
html[data-theme="dark"] .pw-cb__form .segmented__item[aria-pressed="true"] {
  color: var(--pw-background);
}

.pw-cb__form .section__group-title {
  font-family: var(--pw-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--pw-text);
  margin-top: var(--pw-space-2);
  padding-bottom: var(--pw-space-2);
  border-bottom: 1px dashed var(--pw-border);
}