/*
 * Detent design tokens. This file is the hand-maintained source for every value,
 * light and dark. The YAML front matter in design/detent/DESIGN.md mirrors the
 * light-mode roles for tools and agents. No generator exists yet: change both by
 * hand, and keep them in step. showcase.html is regenerated from this file with
 * `node design/detent/build-showcase.mjs`.
 *
 * Deliberate deviation from the design-system skill's `--color-*` / `--type-*`
 * naming: these are the library's public theme API, so they keep the existing
 * `--detent-*` role names under the decided `--detent-` prefix (usability plan D5).
 * Adopting this file is not a cosmetic swap. New values (bg, surface,
 * radius-md 8 to 4, radius-lg 14 to 6, IBM Plex) restyle every row, and several
 * component fallbacks for radius-xl/2xl, duration-slow, easing-springy and
 * color-danger disagree with the roles defined here. See usability plan U5.
 *
 * The file adds no classes to a consumer's page and never loads a font. Dark mode
 * follows `prefers-color-scheme`, overridden by `data-detent-theme` on the root.
 * Reduced motion sets every duration to 0. The focus ring is derived from the
 * accent and raised-surface roles, so re-theming the accent re-themes focus.
 */

:root {
  color-scheme: light dark;

  /* Colour: housing, ink, signal */
  --detent-color-bg: #fafbfc;
  --detent-color-surface: #eff1f4;
  --detent-color-surface-raised: #ffffff;
  --detent-color-text: #101214;
  --detent-color-text-muted: #4a5058;
  --detent-color-border: #c8ccd2;
  --detent-color-border-strong: #7b828c;
  --detent-color-accent: #0052cc;
  --detent-color-accent-text: #ffffff;
  --detent-color-accent-soft: #e3ebfa;
  --detent-color-success-text: #1a6b35;
  --detent-color-success-surface: #e4f2e8;
  --detent-color-warning-text: #7a4f00;
  --detent-color-warning-surface: #fbefd3;
  --detent-color-danger: #b42318;
  --detent-color-danger-on: #ffffff;
  --detent-color-danger-text: #a51d16;
  --detent-color-danger-surface: #fae5e3;
  --detent-color-code-surface: #eceef1;
  --detent-color-inverse: #16191c;
  --detent-color-inverse-text: #f2f3f5;

  /* Chart: categorical in fixed order (validated), plus chart roles */
  --detent-chart-series-1: #2a78d6;
  --detent-chart-series-2: #eb6834;
  --detent-chart-series-3: #1baf7a;
  --detent-chart-series-4: #eda100;
  --detent-chart-series-5: #e87ba4;
  --detent-chart-series-6: #008300;
  --detent-chart-series-7: #6250d6;
  --detent-chart-series-8: #e34948;
  --detent-chart-surface: var(--detent-color-surface-raised);
  --detent-chart-text: var(--detent-color-text-muted);
  --detent-chart-muted: var(--detent-color-text-muted);
  --detent-chart-grid: var(--detent-color-border);
  --detent-chart-track: var(--detent-color-surface);
  --detent-chart-cell-empty: var(--detent-color-surface);
  --detent-chart-band: var(--detent-color-accent-soft);
  --detent-chart-heat: var(--detent-chart-seq-3);
  --detent-chart-radius: var(--detent-radius-md);
  --detent-chart-slice-width: 16px;
  --detent-chart-track-width: 16px;
  /* Sequential (one hue, light to dark) for heat and magnitude */
  --detent-chart-seq-1: #86b6ef;
  --detent-chart-seq-2: #5598e7;
  --detent-chart-seq-3: #2a78d6;
  --detent-chart-seq-4: #1c5cab;
  --detent-chart-seq-5: #104281;

  /* Typography: the library names the families and never loads them */
  --detent-font-sans:
    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --detent-font-mono:
    'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --detent-font-serif: Georgia, 'Times New Roman', serif;
  --detent-font-size-xs: 0.75rem;
  --detent-font-size-sm: 0.875rem;
  --detent-font-size-base: 1rem;
  --detent-font-size-lg: 1.125rem;
  --detent-font-size-xl: 1.5rem;
  --detent-font-size-2xl: 2rem;
  --detent-font-size-3xl: 3rem;
  --detent-font-size-4xl: 4rem;
  --detent-font-weight-light: 200;
  --detent-font-weight-regular: 400;
  --detent-font-weight-label: 500;
  --detent-font-weight-strong: 600;
  --detent-line-height-base: 1.55;
  --detent-line-height-tight: 1.2;
  --detent-line-height-display: 1.05;
  --detent-tracking-display: -0.025em;
  --detent-tracking-label: 0.14em;
  --detent-font-size-label: 0.6875rem;

  /* Space: 4px base, no other values */
  --detent-space-0-5: 0.125rem;
  --detent-space-1: 0.25rem;
  --detent-space-2: 0.5rem;
  --detent-space-3: 0.75rem;
  --detent-space-4: 1rem;
  --detent-space-5: 1.5rem;
  --detent-space-6: 2rem;
  --detent-space-7: 3rem;
  --detent-space-8: 4rem;
  --detent-space-9: 6rem;

  /* Shape: scale, then the role tokens components should use */
  --detent-radius-none: 0;
  --detent-radius-sm: 2px;
  --detent-radius-md: 4px;
  --detent-radius-lg: 6px;
  --detent-radius-xl: 8px;
  --detent-radius-2xl: 8px;
  --detent-radius-full: 9999px;
  --detent-radius-pill: 9999px;
  --detent-radius-housing: var(--detent-radius-sm);
  --detent-radius-control: var(--detent-radius-md);
  --detent-radius-grip: var(--detent-radius-full);
  --detent-border-width: 1px;

  /* Elevation: flat, with physical lift only */
  --detent-shadow-xs: none;
  --detent-shadow-sm: 0 1px 0 rgb(16 18 20 / 6%);
  --detent-shadow-md: 0 12px 32px -8px rgb(16 18 20 / 22%);
  --detent-shadow-lg: 0 20px 48px -12px rgb(16 18 20 / 28%);
  --detent-focus-ring:
    0 0 0 2px var(--detent-color-surface-raised), 0 0 0 4px var(--detent-color-accent);

  /* Motion */
  --detent-duration-fast: 120ms;
  --detent-duration-base: 200ms;
  --detent-duration-slow: 320ms;
  --detent-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --detent-easing-snap: cubic-bezier(0.34, 1.36, 0.64, 1);
  --detent-easing-springy: var(--detent-easing-snap);
}

/*
 * The dark values are repeated on purpose: CSS cannot apply one block from both a
 * media query and an attribute selector, and the explicit choice must win.
 */
:root[data-detent-theme='light'] {
  color-scheme: light;
}

:root[data-detent-theme='dark'] {
  color-scheme: dark;
  --detent-color-bg: #0e1012;
  --detent-color-surface: #16191c;
  --detent-color-surface-raised: #1c2024;
  --detent-color-text: #eceef0;
  --detent-color-text-muted: #a6adb5;
  --detent-color-border: #2e3339;
  --detent-color-border-strong: #6f7781;
  --detent-color-accent: #6ea0ff;
  --detent-color-accent-text: #08101f;
  --detent-color-accent-soft: #17243d;
  --detent-color-success-text: #7fd49b;
  --detent-color-success-surface: #12281a;
  --detent-color-warning-text: #f0c46a;
  --detent-color-warning-surface: #2d230c;
  --detent-color-danger: #f0645a;
  --detent-color-danger-on: #1a0604;
  --detent-color-danger-text: #ff9b92;
  --detent-color-danger-surface: #34140f;
  --detent-color-code-surface: #15181b;
  --detent-color-inverse: #eceef0;
  --detent-color-inverse-text: #101214;
  --detent-chart-series-1: #3987e5;
  --detent-chart-series-2: #d95926;
  --detent-chart-series-3: #199e70;
  --detent-chart-series-4: #c98500;
  --detent-chart-series-5: #d55181;
  --detent-chart-series-6: #008300;
  --detent-chart-series-7: #9085e9;
  --detent-chart-series-8: #e66767;
  --detent-chart-seq-1: #184f95;
  --detent-chart-seq-2: #256abf;
  --detent-chart-seq-3: #3987e5;
  --detent-chart-seq-4: #6da7ec;
  --detent-chart-seq-5: #b7d3f6;
  --detent-shadow-sm: 0 1px 0 rgb(0 0 0 / 40%);
  --detent-shadow-md: 0 12px 32px -8px rgb(0 0 0 / 60%);
  --detent-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / 70%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-detent-theme]) {
    color-scheme: dark;
    --detent-color-bg: #0e1012;
    --detent-color-surface: #16191c;
    --detent-color-surface-raised: #1c2024;
    --detent-color-text: #eceef0;
    --detent-color-text-muted: #a6adb5;
    --detent-color-border: #2e3339;
    --detent-color-border-strong: #6f7781;
    --detent-color-accent: #6ea0ff;
    --detent-color-accent-text: #08101f;
    --detent-color-accent-soft: #17243d;
    --detent-color-success-text: #7fd49b;
    --detent-color-success-surface: #12281a;
    --detent-color-warning-text: #f0c46a;
    --detent-color-warning-surface: #2d230c;
    --detent-color-danger: #f0645a;
    --detent-color-danger-on: #1a0604;
    --detent-color-danger-text: #ff9b92;
    --detent-color-danger-surface: #34140f;
    --detent-color-code-surface: #15181b;
    --detent-color-inverse: #eceef0;
    --detent-color-inverse-text: #101214;
    --detent-chart-series-1: #3987e5;
    --detent-chart-series-2: #d95926;
    --detent-chart-series-3: #199e70;
    --detent-chart-series-4: #c98500;
    --detent-chart-series-5: #d55181;
    --detent-chart-series-6: #008300;
    --detent-chart-series-7: #9085e9;
    --detent-chart-series-8: #e66767;
    --detent-chart-seq-1: #184f95;
    --detent-chart-seq-2: #256abf;
    --detent-chart-seq-3: #3987e5;
    --detent-chart-seq-4: #6da7ec;
    --detent-chart-seq-5: #b7d3f6;
    --detent-shadow-sm: 0 1px 0 rgb(0 0 0 / 40%);
    --detent-shadow-md: 0 12px 32px -8px rgb(0 0 0 / 60%);
    --detent-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --detent-duration-fast: 0ms;
    --detent-duration-base: 0ms;
    --detent-duration-slow: 0ms;
  }
}
/* Self-hosted IBM Plex (OFL, see site/fonts/OFL.txt). The library only names the
   families; the documentation site is the one place that ships the binaries. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/detent/ibm-plex-sans.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/detent/ibm-plex-mono-400.woff2') format('woff2');
}

/*
 * Documentation site stylesheet.
 *
 * Consumes only `--detent-*` theme tokens (src/theme/tokens.css) and keeps every
 * rule local to the site shell. No reset, no utility framework, no global
 * element rules that would leak into consumer content beyond the site pages.
 * The components themselves never depend on this file (PC-1.3, PC-9.2).
 */

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

/*
 * `[hidden]` must beat the layout rules below (grid/flex items would otherwise
 * stay visible). This is the documented reason for the only `!important` here.
 */
[hidden] {
  display: none !important;
}

html {
  background-color: var(--detent-color-bg, #ffffff);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--detent-color-bg, #ffffff);
  color: var(--detent-color-text, #15171c);
  font-family: var(--detent-font-sans, system-ui, sans-serif);
  font-size: var(--detent-font-size-base, 1rem);
  line-height: var(--detent-line-height-base, 1.55);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--detent-color-accent, #1a4bd4);
  outline-offset: 2px;
  border-radius: var(--detent-radius-sm, 4px);
}

code,
pre {
  font-family: var(--detent-font-mono, ui-monospace, monospace);
  font-size: 0.9375em;
}

code {
  background-color: var(--detent-color-code-surface, #f2f4f8);
  /* Code chips must stay legible on their own surface even inside muted copy. */
  color: var(--detent-color-text, #15171c);
  border-radius: var(--detent-radius-sm, 4px);
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

pre {
  margin: 0;
  padding: var(--detent-space-4, 1rem);
  overflow-x: auto;
  background-color: var(--detent-color-code-surface, #f2f4f8);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border, #cfd4dd);
  border-radius: var(--detent-radius-md, 8px);
}

pre code {
  background: none;
  padding: 0;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: var(--detent-line-height-tight, 1.2);
  margin-top: 0;
}

h1 {
  font-size: var(--detent-font-size-3xl, 2.75rem);
  margin-bottom: var(--detent-space-3, 0.75rem);
}

h2 {
  font-size: var(--detent-font-size-xl, 1.5rem);
  margin-top: var(--detent-space-7, 3rem);
  margin-bottom: var(--detent-space-3, 0.75rem);
}

h3 {
  font-size: var(--detent-font-size-lg, 1.125rem);
  margin-top: var(--detent-space-5, 1.5rem);
  margin-bottom: var(--detent-space-2, 0.5rem);
}

p,
ul,
ol,
dl {
  margin-top: 0;
  margin-bottom: var(--detent-space-4, 1rem);
}

.skip-link {
  position: absolute;
  left: var(--detent-space-4, 1rem);
  top: -4rem;
  z-index: 10;
  padding: var(--detent-space-2, 0.5rem) var(--detent-space-3, 0.75rem);
  background-color: var(--detent-color-accent, #1a4bd4);
  color: var(--detent-color-accent-text, #ffffff);
  border-radius: var(--detent-radius-sm, 4px);
}

.skip-link:focus {
  top: var(--detent-space-4, 1rem);
}

.site-brand {
  font-weight: 700;
  font-size: var(--detent-font-size-lg, 1.125rem);
  color: var(--detent-color-text, #15171c);
  text-decoration: none;
}

.site-brand span {
  font-weight: 500;
  color: var(--detent-color-text-muted, #4a505c);
}

/*
 * Pre-upgrade navigation. `detent-glass-navbar` renders its own links from the
 * `items` property; until the element is defined (including with JavaScript
 * disabled) this light-DOM list is what the page shows.
 */
.site-nav-fallback ul,
detent-site-footer ul,
.breadcrumb ol,
.related,
.pagination ol,
.stats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-fallback ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--detent-space-2, 0.5rem) var(--detent-space-4, 1rem);
}

.site-nav-fallback a {
  color: var(--detent-color-text, #15171c);
  text-decoration: none;
}

.site-actions__link {
  color: var(--detent-color-text, #15171c);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-main {
  flex: 1 0 auto;
  width: min(72rem, 100%);
  margin: 0 auto;
  padding: var(--detent-space-6, 2rem) var(--detent-space-5, 1.5rem) var(--detent-space-8, 4rem);
}

detent-site-footer ul {
  display: grid;
  gap: var(--detent-space-1, 0.25rem);
}

detent-site-footer a {
  color: inherit;
}

/* The brand slot is styled as a wordmark; the sentence below it is copy. */
.site-footer__brand p {
  margin: 0;
  font-size: var(--detent-font-size-sm, 0.875rem);
  font-weight: 400;
  line-height: var(--detent-line-height-base, 1.55);
  color: var(--detent-color-text-muted, #4a505c);
}

.site-footer__brand {
  display: grid;
  gap: var(--detent-space-2, 0.5rem);
  max-width: 40ch;
}

.site-footer__brand a {
  font-weight: 700;
  color: var(--detent-color-text, #15171c);
  text-decoration: none;
}

.site-footer__brand p {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--detent-space-3, 0.75rem);
  width: 100%;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--detent-space-7, 3rem);
  align-items: center;
  margin-block: var(--detent-space-5, 1.5rem) var(--detent-space-8, 4rem);
}

.hero-copy {
  min-width: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--detent-space-3, 0.75rem);
  margin-top: var(--detent-space-5, 1.5rem);
}

.hero-action {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--detent-space-4, 1rem);
  border: 1px solid var(--detent-color-border-strong, #7b828c);
  border-radius: var(--detent-radius-control, 4px);
  color: var(--detent-color-text, #101214);
  font-weight: 500;
  text-decoration: none;
}

.hero-action:hover {
  background: var(--detent-color-surface, #eff1f4);
}

.hero-action--primary {
  border-color: var(--detent-color-accent, #0052cc);
  background: var(--detent-color-accent, #0052cc);
  color: var(--detent-color-accent-text, #ffffff);
}

.hero-action--primary:hover {
  background: color-mix(in oklab, var(--detent-color-accent, #0052cc) 88%, black);
}

.hero-demo {
  display: grid;
  gap: var(--detent-space-3, 0.75rem);
  margin: 0;
  padding: var(--detent-space-5, 1.5rem);
  border: 1px solid var(--detent-color-border, #c8ccd2);
  border-radius: var(--detent-radius-housing, 2px);
  background: var(--detent-color-surface-raised, #ffffff);
}

.hero-demo__stage {
  display: grid;
  justify-items: stretch;
  gap: var(--detent-space-3, 0.75rem);
  min-width: 0;
}

.hero-demo figcaption {
  color: var(--detent-color-text-muted, #4a5058);
  font-family: var(--detent-font-mono, ui-monospace, monospace);
  font-size: var(--detent-font-size-xs, 0.75rem);
  font-variant-numeric: tabular-nums;
}

.component-card--feature {
  grid-column: span 2;
}

.component-card--feature .component-card__preview {
  height: 12rem;
}

.lede {
  font-size: var(--detent-font-size-lg, 1.125rem);
  color: var(--detent-color-text-muted, #4a505c);
  max-width: 65ch;
}

.eyebrow {
  font-size: var(--detent-font-size-sm, 0.875rem);
  color: var(--detent-color-text-muted, #4a505c);
  margin-bottom: var(--detent-space-2, 0.5rem);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--detent-space-2, 0.5rem);
  font-size: var(--detent-font-size-sm, 0.875rem);
  margin-bottom: var(--detent-space-5, 1.5rem);
}

.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--detent-space-2, 0.5rem);
  color: var(--detent-color-text-muted, #4a505c);
}

.status {
  display: inline-block;
  padding: var(--detent-space-2, 0.5rem) var(--detent-space-3, 0.75rem);
  border-radius: var(--detent-radius-md, 8px);
  background-color: var(--detent-color-surface, #f5f6f8);
  color: var(--detent-color-text, #15171c);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border, #cfd4dd);
  max-width: 70ch;
}

/* The badge carries the tone; the box only groups the sentence. */
.status detent-badge {
  vertical-align: middle;
  margin-inline-end: var(--detent-space-1, 0.25rem);
}

.badge {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: var(--detent-radius-pill, 999px);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border-strong, #9aa2b1);
  background-color: var(--detent-color-surface, #f5f6f8);
  color: var(--detent-color-text-muted, #4a505c);
  font-size: var(--detent-font-size-sm, 0.875rem);
  font-weight: 600;
}

.component__tag {
  font-size: var(--detent-font-size-base, 1rem);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--detent-space-3, 0.75rem);
  padding: var(--detent-space-4, 1rem);
  background-color: var(--detent-color-surface, #f5f6f8);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border, #cfd4dd);
  border-radius: var(--detent-radius-md, 8px);
}

.facts__item dt {
  font-size: var(--detent-font-size-sm, 0.875rem);
  color: var(--detent-color-text-muted, #4a505c);
  margin-bottom: var(--detent-space-1, 0.25rem);
}

.facts__item dd {
  margin: 0;
  font-weight: 600;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--detent-space-3, 0.75rem);
  margin: var(--detent-space-5, 1.5rem) 0 var(--detent-space-6, 2rem);
}

.stats li {
  padding: var(--detent-space-4, 1rem);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border, #cfd4dd);
  border-radius: var(--detent-radius-md, 8px);
  background-color: var(--detent-color-surface-raised, #ffffff);
  box-shadow: var(--detent-shadow-sm, none);
}

.stats span {
  display: block;
  font-size: var(--detent-font-size-2xl, 2rem);
  font-weight: 700;
}

/* Panel switcher: readable as plain stacked sections without JavaScript. */
.panel-switcher {
  margin-top: var(--detent-space-5, 1.5rem);
}

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--detent-space-1, 0.25rem);
  border-bottom: var(--detent-border-width, 1px) solid var(--detent-color-border, #cfd4dd);
  margin-bottom: var(--detent-space-4, 1rem);
}

.tab {
  appearance: none;
  border: var(--detent-border-width, 1px) solid transparent;
  border-bottom: none;
  background: none;
  color: var(--detent-color-text-muted, #4a505c);
  font: inherit;
  font-weight: 600;
  padding: var(--detent-space-2, 0.5rem) var(--detent-space-4, 1rem);
  border-radius: var(--detent-radius-sm, 4px) var(--detent-radius-sm, 4px) 0 0;
  cursor: pointer;
}

.tab[aria-selected='true'] {
  color: var(--detent-color-text, #15171c);
  background-color: var(--detent-color-surface-raised, #ffffff);
  border-color: var(--detent-color-border, #cfd4dd);
  box-shadow: inset 0 3px 0 var(--detent-color-accent, #1a4bd4);
}

.panel {
  padding: var(--detent-space-4, 1rem) 0;
}

.snippet {
  position: relative;
  margin-bottom: var(--detent-space-4, 1rem);
}

.snippet .copy {
  margin-bottom: var(--detent-space-2, 0.5rem);
}

.copy {
  appearance: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: var(--detent-space-1, 0.25rem) var(--detent-space-3, 0.75rem);
  border-radius: var(--detent-radius-sm, 4px);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border-strong, #9aa2b1);
  background-color: var(--detent-color-surface, #f5f6f8);
  color: var(--detent-color-text, #15171c);
}

[data-copy-status],
[data-search-status] {
  min-height: 1.5em;
  font-size: var(--detent-font-size-sm, 0.875rem);
  color: var(--detent-color-text-muted, #4a505c);
}

.notice {
  padding: var(--detent-space-3, 0.75rem) var(--detent-space-4, 1rem);
  border-left: 4px solid var(--detent-color-border-strong, #9aa2b1);
  background-color: var(--detent-color-surface, #f5f6f8);
  border-radius: var(--detent-radius-sm, 4px);
  max-width: 75ch;
}

.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--detent-space-5, 1.5rem);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--detent-font-size-sm, 0.875rem);
}

caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: var(--detent-space-2, 0.5rem);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--detent-space-2, 0.5rem) var(--detent-space-3, 0.75rem);
  border-bottom: var(--detent-border-width, 1px) solid var(--detent-color-border, #cfd4dd);
}

th {
  background-color: var(--detent-color-surface, #f5f6f8);
  white-space: nowrap;
}

.source-list {
  padding-left: var(--detent-space-5, 1.5rem);
}

.source-list li {
  margin-bottom: var(--detent-space-2, 0.5rem);
}

.search {
  margin: var(--detent-space-4, 1rem) 0 var(--detent-space-5, 1.5rem);
}

.search__field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--detent-space-2, 0.5rem);
  align-items: center;
}

.search input {
  font: inherit;
  padding: var(--detent-space-2, 0.5rem) var(--detent-space-3, 0.75rem);
  border-radius: var(--detent-radius-sm, 4px);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border-strong, #9aa2b1);
  background-color: var(--detent-color-bg, #ffffff);
  color: var(--detent-color-text, #15171c);
  inline-size: min(24rem, 100%);
}

/* Preview chrome shared by fragments: readable on any preview surface. */
.easy-preview-pill {
  display: inline-block;
  margin: 0;
  padding: 0.15em 0.6em;
  border-radius: var(--detent-radius-pill, 999px);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border-strong, #9aa2b1);
  background-color: var(--detent-color-surface, #f5f6f8);
  color: var(--detent-color-text, #15171c);
  font-size: var(--detent-font-size-sm, 0.875rem);
  font-weight: 600;
}

.easy-preview-hint code {
  color: var(--detent-color-text, #15171c);
}

.component-grid {
  list-style: none;
  margin: 0 0 var(--detent-space-6, 2rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--detent-space-4, 1rem);
}

/*
 * The list item is only the grid cell: the card surface comes from
 * `detent-content-card`, so no border, padding or shadow is duplicated here.
 */
.component__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--detent-space-3, 0.75rem);
}

.component__title-row h1 {
  margin: 0;
}

.catalog-status,
.port-status,
.behaviour-details,
.alias-routes {
  margin-block: var(--detent-space-4, 1rem);
}

.port-status > summary,
.behaviour-details > summary,
.alias-routes > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--detent-color-text, #15171c);
}

.behaviour-details > ul,
.alias-routes > ul {
  margin-block: var(--detent-space-2, 0.5rem) 0;
}

.component-card {
  display: block;
  min-width: 0;
}

/* Cards in a row share a height; the card fills its cell. */
.component-card > detent-content-card {
  block-size: 100%;
}

/* The whole card opens the component: the title link's pseudo-element covers
   the card, so the card keeps one link, one focus stop and one accessible name.
   The preview is inert with pointer-events: none, so a click lands on the link. */
.component-card > detent-content-card {
  position: relative;
  cursor: pointer;
}

.component-card a[slot='link']::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.component-card:hover a[slot='link'] {
  text-decoration: underline;
}

.component-card:has(a[slot='link']:focus-visible) > detent-content-card {
  outline: 2px solid var(--detent-color-accent, #1a4bd4);
  outline-offset: 2px;
}

/* The card's title link is content, not a floating link: keep the ink colour
   and use the underline for hover instead. */
detent-content-card a[slot='link'] {
  color: var(--detent-color-text, #15171c);
  text-decoration: none;
}

/* Preview frame: never let a component force its panel wider than the page. */
.preview-live > * {
  max-width: 100%;
}

.cost {
  margin: 0.75rem 0 0;
  font-size: var(--detent-font-size-sm, 0.875rem);
  color: var(--detent-color-text-muted, #4a505c);
}

#related {
  margin-block-start: var(--detent-space-7, 3rem);
}

detent-content-card a[slot='link']:hover {
  color: var(--detent-color-accent, #1a4bd4);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-actions {
  display: flex;
  align-items: center;
  gap: var(--detent-space-3, 0.75rem);
}

.component-group {
  margin-block: var(--detent-space-6, 2rem);
}

.component-group__count {
  color: var(--detent-color-text-muted, #4a505c);
  font-weight: 400;
}

.component-group__count::before {
  content: '·';
  margin-inline: 0.5em;
}

/* The footer keeps the same 72rem content axis as the main column. */
detent-site-footer::part(footer) {
  max-width: min(72rem, 100%);
  margin-inline: auto;
  width: 100%;
}

.component-card h2,
.component-card h3 {
  font-size: var(--detent-font-size-lg, 1.125rem);
  margin: 0;
}

.component-card p {
  margin: 0;
}

.component-card__tagline {
  color: var(--detent-color-text-muted, #4a505c);
  font-size: var(--detent-font-size-sm, 0.875rem);
}

.component-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--detent-space-2, 0.5rem);
  align-items: center;
  font-size: var(--detent-font-size-sm, 0.875rem);
  color: var(--detent-color-text-muted, #4a505c);
}

.pagination {
  margin-top: var(--detent-space-6, 2rem);
}

.pagination ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--detent-space-1, 0.25rem);
}

.pagination a,
.pagination span {
  display: inline-block;
  min-width: 2.25rem;
  text-align: center;
  padding: var(--detent-space-1, 0.25rem) var(--detent-space-2, 0.5rem);
  border-radius: var(--detent-radius-sm, 4px);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border, #cfd4dd);
}

.pagination [aria-current='page'] {
  background-color: var(--detent-color-accent, #1a4bd4);
  color: var(--detent-color-accent-text, #ffffff);
  border-color: var(--detent-color-accent, #1a4bd4);
  font-weight: 700;
}

.related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--detent-space-2, 0.5rem);
}

.related li {
  padding: var(--detent-space-2, 0.5rem) var(--detent-space-3, 0.75rem);
  border: var(--detent-border-width, 1px) solid var(--detent-color-border, #cfd4dd);
  border-radius: var(--detent-radius-sm, 4px);
  background-color: var(--detent-color-surface-raised, #ffffff);
}

.related__reason {
  display: block;
  font-size: var(--detent-font-size-sm, 0.875rem);
  color: var(--detent-color-text-muted, #4a505c);
}

.prose {
  max-width: 70ch;
}

@media (max-width: 40rem) {
  h1 {
    font-size: var(--detent-font-size-2xl, 2rem);
  }

  .site-main {
    padding: var(--detent-space-5, 1.5rem) var(--detent-space-3, 0.75rem)
      var(--detent-space-7, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Live preview panel: the component renders here without any site reset. */
.easy-preview-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--detent-space-4, 1rem);
  min-width: 0;
}

.easy-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--detent-space-4, 1rem);
  min-width: 0;
}

.easy-preview-row > * {
  flex: 1 1 min(100%, 18rem);
  min-width: 0;
  max-width: 100%;
}

.preview-live {
  display: grid;
  place-items: center;
  min-block-size: 18rem;
  margin: 0 0 var(--detent-space-3, 0.75rem);
  padding: var(--detent-space-6, 2rem);
  border: 1px solid var(--detent-color-border, #cfd4dd);
  border-radius: var(--detent-radius-housing, 2px);
  background: var(--detent-color-surface-raised, #ffffff);
}

.preview-variants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--detent-space-4, 1rem);
  align-items: flex-start;
  margin: 0 0 var(--detent-space-5, 1.5rem);
}

/* Same clamp as the stage: a variant never forces the page wider than the viewport. */
.preview-variants > * {
  max-width: 100%;
  min-width: 0;
}

/* Side-by-side demo rows stack instead of squeezing labels into one word. */
@media (max-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--detent-space-5, 1.5rem);
  }

  .component-card--feature {
    grid-column: auto;
  }

  .component-card--feature .component-card__preview {
    height: 8.5rem;
  }
}

@media (max-width: 40rem) {
  .site-brand span {
    display: none;
  }

  .site-actions__link {
    display: none;
  }

  .site-actions {
    gap: var(--detent-space-2, 0.5rem);
  }

  detent-theme-switcher::part(label),
  detent-theme-switcher::part(option-label) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .easy-preview-row {
    flex-direction: column;
  }

  .easy-preview-row > * {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Top-level preview children are flex items too. Letting them share a line
     shrinks the component beside its own hint text; stack them instead. */
  .preview-live {
    padding: var(--detent-space-4, 1rem);
  }

  .preview-live > * {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
}

.state-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--detent-space-3, 0.75rem);
  margin: var(--detent-space-2, 0.5rem) 0 var(--detent-space-3, 0.75rem);
  padding: 0;
}

.state-cell {
  display: flex;
  flex-direction: column;
  gap: var(--detent-space-2, 0.5rem);
  align-items: center;
  margin: 0;
  padding: var(--detent-space-3, 0.75rem);
  border: 1px solid var(--detent-color-border, #cfd4dd);
  border-radius: var(--detent-radius-housing, 2px);
  background: var(--detent-color-surface-raised, #ffffff);
  min-width: 0;
}

.state-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 4.5rem;
  min-width: 0;
}

.state-cell figcaption {
  color: var(--detent-color-text-muted, #4a505c);
  font-family: var(--detent-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
}

.state-words {
  margin: 0 0 var(--detent-space-3, 0.75rem);
}

.state-word {
  color: var(--detent-color-text-muted, #4a505c);
  font-size: var(--detent-font-size-sm, 0.875rem);
}

.panel .hint {
  margin: 0 0 var(--detent-space-4, 1rem);
  font-size: var(--detent-font-size-sm, 0.875rem);
  color: var(--detent-color-text-muted, #4a505c);
}

/* Directory card thumbnails: a scaled-down live render of a ported component.
   The stage is inert and aria-hidden in the markup, so duplicate landmarks and
   headings from a preview never reach the accessibility tree. */
.component-card__preview {
  overflow: hidden;
  height: 8.5rem;
  margin: 0 0 var(--detent-space-3, 0.75rem);
  border: 1px solid var(--detent-color-border, #cfd4dd);
  border-radius: var(--detent-radius-md, 8px);
  background: var(--detent-color-surface, #f5f6f8);
  pointer-events: none;
}

.component-card__stage {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
  padding: var(--detent-space-4, 1rem);
  display: grid;
  justify-items: center;
  /* Tall components (chat, data-table, pricing) start at the top instead of
     spilling off both edges; short ones sit in the middle. */
  align-items: safe center;
}