/* ============================================================================
   ATOMS
   ============================================================================
   Sub-component primitives: typography roles, buttons, tags, inputs, links,
   dividers, focus, theme toggle. Builds on tokens.css + reset.css.

   Class-name convention:
   - Type roles:    .t-display-xl, .t-title-l, .t-eyebrow, .t-mono
   - Buttons:       .button + .button-{primary|secondary|ghost|accent|icon}
   - Tags:          .tag + .tag-{accent|mono}
   - Inputs:        .input
   - Links:         .link, .link-quiet
   - Dividers:      .divider, .dot
   - Theme toggle:  .theme-toggle (with [data-theme-toggle] hook for JS)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PAGE BASE — applies when this stylesheet is loaded
   ---------------------------------------------------------------------------- */

html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body-l);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  transition: background-color var(--dur-base) var(--ease-quick),
              color var(--dur-base) var(--ease-quick);
}

/* ============================================================================
   TYPOGRAPHY ROLES
   ============================================================================
   Each role is a complete type contract (size, weight, line-height,
   tracking). Used as utility classes — never combine with another type role.
   ============================================================================ */

.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  text-wrap: balance;
}

.t-display-l {
  font-family: var(--font-display);
  font-size: var(--t-display-l);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  text-wrap: balance;
}

.t-title-xl {
  font-family: var(--font-display);
  font-size: var(--t-title-xl);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tighter);
  text-wrap: balance;
}

.t-title-l {
  font-family: var(--font-display);
  font-size: var(--t-title-l);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}

.t-title-m {
  font-family: var(--font-display);
  font-size: var(--t-title-m);
  font-weight: var(--w-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
}

.t-body-l {
  font-family: var(--font-text);
  font-size: var(--t-body-l);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--ink-soft);
}

.t-body-m {
  font-family: var(--font-text);
  font-size: var(--t-body-m);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-flat);
  color: var(--ink-soft);
}

.t-body-s {
  font-family: var(--font-text);
  font-size: var(--t-body-s);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-flat);
  color: var(--muted);
}

.t-eyebrow {
  font-family: var(--font-text);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono-m);
  font-weight: var(--w-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  font-variant-numeric: tabular-nums;
}

.t-mono-s {
  font-family: var(--font-mono);
  font-size: var(--t-mono-s);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Color modifiers (compose on top of type role) */
.t-ink     { color: var(--ink); }
.t-soft    { color: var(--ink-soft); }
.t-muted   { color: var(--muted); }
.t-accent  { color: var(--accent-text); }

/* ============================================================================
   BUTTONS
   ============================================================================
   Per Emil's framework: scale(0.97) on :active, transition only transform &
   color/background, custom ease-out, never animate `all`.
   ============================================================================ */

/* Button — uses Tier 3 component tokens (--button-*).
   Component tokens are defined in tokens.css and reference Tier 2 semantic
   tokens (--color-action, --color-text-primary, --r-3, etc.). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-icon-gap);
  position: relative;
  padding: var(--button-padding-y) var(--button-padding-x);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: var(--w-medium);
  letter-spacing: -0.005em;
  line-height: 1;
  text-transform: none;
  border-radius: var(--button-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  min-height: var(--button-min-height);
  min-width: var(--button-min-width);
  transition:
    transform var(--dur-press) var(--ease-spring),
    background-color var(--dur-quick) var(--ease-quick),
    border-color var(--dur-quick) var(--ease-quick),
    color var(--dur-quick) var(--ease-quick),
    box-shadow var(--dur-quick) var(--ease-quick);
}

.button:active {
  transform: scale(var(--button-active-scale));
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* — primary: ink fill, bg text — for unmissable CTAs.
   S39 adds a 1px inset highlight on the top edge ("shine") and a
   short drop-shadow for elevation. The visual weight signals "this
   is the action" without changing the silhouette. */
.button-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.08),
    0 1px 2px hsl(0 0% 0% / 0.15),
    0 4px 12px hsl(0 0% 0% / 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .button-primary:hover {
    background: var(--ink-soft);
    border-color: var(--ink-soft);
    box-shadow:
      inset 0 1px 0 hsl(0 0% 100% / 0.10),
      0 1px 2px hsl(0 0% 0% / 0.18),
      0 8px 18px hsl(0 0% 0% / 0.12);
  }
}

/* — accent: amber fill — used very sparingly, only for THE primary action
   on a page. Same shine/elevation pattern as primary; warmer drop shadow
   tinted with the accent hue so the elevation feels integrated. */
.button-accent {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.18),
    0 1px 2px hsl(38 95% 30% / 0.20),
    0 4px 14px hsl(38 95% 40% / 0.18);
}

@media (hover: hover) and (pointer: fine) {
  .button-accent:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow:
      inset 0 1px 0 hsl(0 0% 100% / 0.22),
      0 1px 2px hsl(38 95% 30% / 0.25),
      0 8px 22px hsl(38 95% 40% / 0.28);
  }
}

/* — secondary: hairline outline, ink text */
.button-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--hairline-strong);
}

@media (hover: hover) and (pointer: fine) {
  .button-secondary:hover {
    background: var(--surface-2);
    border-color: var(--ink-soft);
  }
}

/* — ghost: invisible until hover */
.button-ghost {
  background: transparent;
  color: var(--ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  .button-ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
  }
}

/* — icon: square, pill-shaped */
.button-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-full);
  border-color: var(--hairline);
  color: var(--ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  .button-icon:hover {
    border-color: var(--hairline-strong);
    color: var(--ink);
  }
}

/* — sizes (override component tokens with size-specific values) */
.button-sm {
  padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
  font-size: 13px;
  min-height: 32px;
  border-radius: var(--r-2);
}

.button-lg {
  padding: var(--button-padding-y-lg) var(--button-padding-x-lg);
  font-size: 15px;
  min-height: 48px;
}

/* button content (for blur-mask transition during state changes) */
.button-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    filter var(--dur-quick) var(--ease-quick),
    opacity var(--dur-quick) var(--ease-quick);
}

.button[data-loading="true"] .button-content {
  filter: blur(2px);
  opacity: 0.5;
}

/* ============================================================================
   TAGS / PILLS
   ============================================================================ */

/* Tag — uses Tier 3 component tokens (--tag-*). */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--tag-padding-y) var(--tag-padding-x);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: -0.003em;
  line-height: 1.4;
  background: var(--tag-bg);
  color: var(--tag-text);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--tag-radius);
  white-space: nowrap;
  transition:
    background-color var(--dur-quick) var(--ease-quick),
    opacity var(--dur-base) var(--ease-out);
}

.tag-accent {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: transparent;
}

.tag-mono {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.tag-outline {
  background: transparent;
  border-color: var(--hairline);
}

.tag-pill {
  border-radius: var(--r-full);
  padding: 4px 12px;
}

/* ============================================================================
   INPUTS
   ============================================================================ */

/* Input — uses Tier 3 component tokens (--input-*). */
.input {
  display: block;
  width: 100%;
  min-height: var(--input-min-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: var(--font-text);
  font-size: var(--t-body-m);
  font-weight: var(--w-regular);
  line-height: 1.4;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: var(--input-border);
  border-radius: var(--input-radius);
  transition:
    border-color var(--dur-quick) var(--ease-quick),
    box-shadow var(--dur-quick) var(--ease-quick),
    background-color var(--dur-quick) var(--ease-quick);
}

.input::placeholder {
  color: var(--color-text-placeholder);
}

@media (hover: hover) and (pointer: fine) {
  .input:hover {
    border-color: var(--color-border-strong);
  }
}

.input:focus,
.input:focus-visible {
  outline: none;
  border: var(--input-border-focus);
  box-shadow: var(--input-focus-ring);
}

.input-sm {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: var(--r-2);
}

/* ============================================================================
   LINKS
   ============================================================================
   Two patterns:
   1. .link — accent text with animated underline (use sparingly, for editorial)
   2. .link-quiet — ink-soft with subtle underline on hover (for body copy)
   ============================================================================ */

.link {
  color: var(--accent-text);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition:
    background-size var(--dur-quick) var(--ease-out),
    color var(--dur-quick) var(--ease-quick);
}

@media (hover: hover) and (pointer: fine) {
  .link:hover {
    background-size: 100% 1px;
    color: var(--accent-text-hover);
  }
}

.link-quiet {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  transition: border-color var(--dur-quick) var(--ease-quick);
}

@media (hover: hover) and (pointer: fine) {
  .link-quiet:hover {
    border-bottom-color: var(--ink);
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-text);
  font-weight: var(--w-medium);
  font-size: 14px;
  transition: gap var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-quick);
}

.link-arrow::after {
  content: "→";
  transition: transform var(--dur-quick) var(--ease-out);
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover {
    gap: 8px;
    color: var(--accent-text-hover);
  }

  .link-arrow:hover::after {
    transform: translateX(2px);
  }
}

/* ============================================================================
   DIVIDERS
   ============================================================================ */

.divider {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

.divider-strong {
  background: var(--hairline-strong);
}

.divider-vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
}

.dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--muted);
}

.dot-accent { background: var(--accent); }
.dot-ink    { background: var(--ink); }

/* ============================================================================
   FOCUS RING — keyboard-only
   ============================================================================
   R11: canonical :focus-visible lives in reset.css (S29 outline halo —
   2px accent stroke + 3px offset, matches Rauno detail). The block
   that used to be here was a competing box-shadow pattern that
   conflicted with reset. Removed — reset rule now applies to all
   keyboard-focusable elements without override.
   .button / .input / .tag / .theme-toggle keep their own focus
   styles below where the halo radius needs to match the element's
   own border-radius. */

/* ============================================================================
   THEME TOGGLE
   ============================================================================
   Small icon button. Two icons inside (sun + moon), conditionally shown.
   The actual toggle behavior is wired via inline JS (see base.gohtml).
   ============================================================================ */

.theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    border-color var(--dur-quick) var(--ease-quick),
    color var(--dur-quick) var(--ease-quick),
    background-color var(--dur-quick) var(--ease-quick),
    transform var(--dur-press) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover {
    border-color: var(--hairline-strong);
    color: var(--ink);
    background: var(--surface-2);
  }
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--dur-instant) var(--ease-quick),
              transform var(--dur-base) var(--ease-out);
}

/* Default: show sun (we're in light), hide moon */
.theme-toggle [data-icon="moon"] {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}

.theme-toggle [data-icon="sun"] {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Dark mode (via OS preference, no explicit override) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle [data-icon="sun"] {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
  }

  :root:not([data-theme="light"]) .theme-toggle [data-icon="moon"] {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Dark mode (explicit override) */
:root[data-theme="dark"] .theme-toggle [data-icon="sun"] {
  opacity: 0;
  transform: rotate(90deg) scale(0.8);
}

:root[data-theme="dark"] .theme-toggle [data-icon="moon"] {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* ============================================================================
   STACK & CLUSTER — atomic layout primitives
   ============================================================================
   Stack: vertical flow with consistent spacing
   Cluster: horizontal flow that wraps with consistent spacing
   ============================================================================ */

.stack { display: flex; flex-direction: column; }
.stack-1  { gap: var(--s-1); }
.stack-2  { gap: var(--s-2); }
.stack-3  { gap: var(--s-3); }
.stack-4  { gap: var(--s-4); }
.stack-5  { gap: var(--s-5); }
.stack-6  { gap: var(--s-6); }
.stack-7  { gap: var(--s-7); }
.stack-8  { gap: var(--s-8); }
.stack-9  { gap: var(--s-9); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.cluster-1 { gap: var(--s-1); }
.cluster-2 { gap: var(--s-2); }
.cluster-3 { gap: var(--s-3); }
.cluster-4 { gap: var(--s-4); }
.cluster-5 { gap: var(--s-5); }
.cluster-6 { gap: var(--s-6); }

/* ============================================================================
   KBD — keyboard key visual
   ============================================================================ */

kbd, .kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  line-height: 1;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
  border-radius: var(--r-1);
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================================
   CODE — inline + preformatted
   ============================================================================ */

code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: var(--w-regular);
  letter-spacing: 0;
  padding: 1px 5px;
  background: var(--surface-2);
  color: var(--ink);
  border-radius: var(--r-1);
  border: 1px solid var(--hairline-faint);
  font-feature-settings: "tnum", "kern";
}

pre.code-block,
.code-block {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  font-weight: var(--w-regular);
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  overflow-x: auto;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}

pre.code-block code,
.code-block code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.code-block .code-comment { color: var(--muted); }
.code-block .code-prop    { color: var(--ink); }
.code-block .code-value   { color: var(--accent-text); }
.code-block .code-string  { color: var(--accent-text); }

/* ============================================================================
   SWITCH — toggle control
   ============================================================================ */

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  background: var(--hairline-strong);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-quick);
  border: 0;
  padding: 0;
  flex-shrink: 0;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--surface);
  border-radius: var(--r-full);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
  transition: transform var(--dur-quick) var(--ease-out);
}

.switch[aria-checked="true"],
.switch.is-on {
  background: var(--accent);
}

.switch[aria-checked="true"]::after,
.switch.is-on::after {
  transform: translateX(16px);
}

.switch:active::after {
  transform: scale(0.95);
}

.switch[aria-checked="true"]:active::after {
  transform: translateX(16px) scale(0.95);
}

.switch:disabled,
.switch[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   SPINNER — loading indicator
   ============================================================================
   Uses border-trick for a spinning ring. Faster spinner makes load feel
   faster (Emil's perceived-performance principle).
   ============================================================================ */

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--hairline-strong);
  border-top-color: var(--ink);
  border-radius: var(--r-full);
  animation: spinner-rotate 700ms linear infinite;
  flex-shrink: 0;
}

.spinner-sm { width: 12px; height: 12px; border-width: 1.25px; }
.spinner-lg { width: 24px; height: 24px; border-width: 2px; }
.spinner-accent { border-top-color: var(--accent); }

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.4s; }
}

/* ============================================================================
   SKELETON — loading placeholder
   ============================================================================ */

/* S42: separated base + sweep so the shimmer reads as a directional
   highlight crossing a solid surface, not as the surface itself
   color-shifting. The diagonal angle (100deg) keeps the streak from
   feeling mechanical, and the spring ease (cubic-bezier .65,0,.35,1)
   gives the sweep a soft start/end at the edges. */
.skeleton {
  display: block;
  position: relative;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  border-radius: var(--r-1);
  overflow: hidden;
  isolation: isolate;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    color-mix(in srgb, var(--ink) 5%, transparent) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 220% 0;
  animation: skeleton-sweep 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes skeleton-sweep {
  to { background-position: -120% 0; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skeleton::after {
    background: linear-gradient(
      100deg,
      transparent 0%,
      transparent 38%,
      color-mix(in srgb, var(--ink) 12%, transparent) 50%,
      transparent 62%,
      transparent 100%
    );
    background-size: 220% 100%;
  }
}
:root[data-theme="dark"] .skeleton::after {
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    color-mix(in srgb, var(--ink) 12%, transparent) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
    opacity: 0.4;
  }
}

.skeleton-text {
  height: 0.9em;
  border-radius: var(--r-1);
}

.skeleton-circle {
  border-radius: var(--r-full);
  aspect-ratio: 1;
}

/* ============================================================================
   CONTAINER UTILITIES
   ============================================================================ */

.container {
  width: 100%;
  max-width: var(--w-default);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container-narrow {
  max-width: var(--w-narrow);
}

.container-wide {
  max-width: var(--w-wide);
}

/* ============================================================================
   DESIGN SYSTEM PAGE — chrome reset
   ============================================================================
   Hide all legacy site chrome on /design-system so the page renders as a
   pure system reference. The page provides its own minimal header/footer
   built from the new atoms.
   ============================================================================ */

.page-design-system .site-header,
.page-design-system .site-footer,
.page-design-system .component-dock,
.page-design-system .scroll-indicator,
.page-design-system .texture-overlay,
.page-design-system .intro-curtain {
  display: none !important;
}

.page-design-system #main {
  padding: 0;
  max-width: none;
  margin: 0;
}

/* Color swatch tile (used in token reference) */
.swatch {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-3);
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--surface);
}

.swatch-fill {
  height: 88px;
  width: 100%;
}

.swatch-meta {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Type specimen row */
.type-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}

.type-row:first-child {
  border-top: 0;
}

@media (max-width: 720px) {
  .type-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

.type-row-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Component example block */
.example {
  padding: var(--s-6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

/* R8 Rasmus foundation: .example modifiers absorb 24+ inline style
   patches in design-system.gohtml. Each modifier replaces one
   recurring inline-style pattern. */

/* Vertical stack of full-width children (14 inline patches) */
.example--column {
  flex-direction: column;
  align-items: stretch;
}

/* Vertical stack of left-aligned children (7 inline patches) */
.example--stack {
  flex-direction: column;
  align-items: flex-start;
}

/* Bare frame: no chrome, just a layout container (6 inline patches).
   Used when example wraps real organisms like .o-process, .o-outcome
   that bring their own padding/borders. */
.example--bare {
  padding: 0;
  background: var(--bg);
  border: 0;
  border-radius: 0;
}

.example + .example-code {
  margin-top: var(--s-2);
}

.example-code {
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  overflow-x: auto;
  white-space: pre;
}

/* Section divider on design-system page */
.ds-section {
  /* P2 Paco product polish: DS section padding 64/64 → 48/48. Aligns
     with .o-section default (also 48). Docs page has 14+ sections;
     trimming 16px each = 220px reclaimed scroll height. The hairline
     + ds-section-head margin still reads as a clear section break
     without the extra 16. */
  padding: var(--s-7) 0;
  border-top: 1px solid var(--hairline);
}

/* Anchor offset — keeps sections clear of the sticky header on jump */
.ds-section[id],
.ds-component-doc[id] {
  scroll-margin-top: 80px;
}

/* DS hero-title — looser line-height than .t-display-l default; descenders
   in "design system" need breathing room at 64px. */
.ds-hero-title {
  line-height: 1.06;
}

/* ─── Audience block — "who this is for" ───────────────────── */
.ds-audience {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-left: 2px solid var(--color-action);
  background: var(--color-bg-tinted);
  border-radius: 0 var(--r-3) var(--r-3) 0;
  max-width: 60ch;
}
.ds-audience-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--s-3);
  align-items: start;
}
.ds-audience-tag {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  font-weight: var(--w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-action-text);
  padding-top: 4px;
}
.ds-audience-row p {
  margin: 0;
  color: var(--color-text-body);
}
@media (max-width: 600px) {
  .ds-audience-row { grid-template-columns: 1fr; gap: 4px; }
  .ds-audience-tag { padding-top: 0; }
}

/* ─── Quickstart block — three card primer ────────────────── */
/* S58.4 LOCKED — 4 Quickstart cards always 2+2 at desktop, no matter
   how wide the viewport gets. Visual stability beats responsive
   "spread to fit". Phone collapses to 1-col. */
.ds-quickstart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 720px) {
  .ds-quickstart {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ds-quickstart-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-4);
  /* CRITICAL: without this the inner <pre class="code-block"> (which is
     width:100% but contains no-wrap text) pushes the grid 1fr column
     wider than the parent allows, overflowing the page. min-width:0
     lets the grid track shrink below intrinsic content width and the
     code block's overflow-x: auto takes over inside. */
  min-width: 0;
}

.ds-quickstart-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.ds-quickstart-card-num {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--color-action);
  color: var(--color-action-fg);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
}
.ds-quickstart-card-title {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--color-text-primary);
}
.ds-quickstart-card-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: var(--s-4);
  background: var(--color-bg-tinted);
  border-radius: var(--r-3);
}
.ds-quickstart-card pre.code-block {
  margin: 0;
  font-size: 12px;
  max-width: 100%;
  min-width: 0;
}

/* Section variant: no top border (used right after the audience block) */
.ds-section--no-border {
  border-top: 0;
  padding-top: 0;
}

/* ─── Business case card (Why Plot exists) ────────────────── */
.ds-business-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-4);
}
.ds-business-card--accent {
  border-color: var(--color-action);
  background: var(--color-action-soft);
}
.ds-business-card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  font-weight: var(--w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ds-business-card--accent .ds-business-card-eyebrow {
  color: var(--color-action-text);
}
.ds-business-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--w-semibold, 600);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}
.ds-business-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-body);
}
.ds-business-card-list li {
  padding-left: var(--s-3);
  position: relative;
}
.ds-business-card-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--color-action-text);
  font-weight: var(--w-medium);
}

/* ─── Tutorial steps (Education) ─────────────────────────── */
.ds-tutorial {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  counter-reset: tutorial;
}
.ds-tutorial-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
}
.ds-tutorial-num {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--color-text-primary);
  color: var(--color-action-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--w-medium);
}
.ds-tutorial-body { display: flex; flex-direction: column; gap: var(--s-2); }
.ds-tutorial-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--w-semibold, 600);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--color-text-primary);
}
.ds-tutorial-body p {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-body);
  margin: 0;
}

/* ─── FAQ (Education) ────────────────────────────────────── */
.ds-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ds-faq-item {
  border-bottom: 1px solid var(--color-border-faint);
}
.ds-faq-item:first-child { border-top: 1px solid var(--color-border-faint); }
.ds-faq-q {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--w-semibold, 600);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
}
.ds-faq-q::-webkit-details-marker { display: none; }
.ds-faq-q::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--color-text-muted);
  width: 20px;
  text-align: center;
  transition: transform var(--dur-quick) var(--ease-out);
}
.ds-faq-item[open] > .ds-faq-q::before {
  content: "−";
}
.ds-faq-a {
  padding: 0 0 var(--s-4) 32px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-body);
  max-width: 70ch;
}
.ds-faq-a p { margin: 0 0 var(--s-2); }
.ds-faq-a p:last-child { margin: 0; }

/* ─── Component health strip (in .ds-component-doc head) ──────
   Six measurements per component: Usage / Variants / States / A11y /
   Last touched / Bus factor. Renders as a thin compact strip beneath
   the import code line. */
.ds-component-health {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--color-border-faint);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--color-text-muted);
}
@media (max-width: 720px) {
  .ds-component-health { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .ds-component-health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ds-component-health-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.ds-component-health-label {
  font-size: 9px;
  font-weight: var(--w-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ds-component-health-value {
  font-size: 13px;
  font-weight: var(--w-medium);
  color: var(--color-text-primary);
  letter-spacing: 0;
}
.ds-component-health-value--good { color: var(--color-good-text); }
.ds-component-health-value--warn { color: hsl(43 100% 32%); }

/* ─── Anti-pattern visual gallery ───────────────────────────
   Two-column visual ✓/✗ pair. Helps consumers see what wrong looks
   like, not just read about it. */
.ds-antipattern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 720px) {
  .ds-antipattern { grid-template-columns: 1fr; }
}
.ds-antipattern-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-3);
  border: 1px solid var(--color-border);
}
.ds-antipattern-card--do {
  border-color: hsl(142 50% 70%);
  background: hsl(142 50% 98%);
}
.ds-antipattern-card--dont {
  border-color: hsl(0 60% 80%);
  background: hsl(0 60% 98%);
}
.ds-antipattern-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ds-antipattern-card--do .ds-antipattern-card-head { color: hsl(142 76% 28%); }
.ds-antipattern-card--dont .ds-antipattern-card-head { color: hsl(0 70% 38%); }
.ds-antipattern-card-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  min-height: 60px;
  padding: var(--s-3);
  background: var(--color-surface);
  border-radius: var(--r-2);
}
.ds-antipattern-card-note {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-body);
}

@media (prefers-color-scheme: dark) {
  .ds-antipattern-card--do {
    border-color: hsl(142 30% 30%);
    background: hsl(142 30% 12%);
  }
  .ds-antipattern-card--dont {
    border-color: hsl(0 30% 30%);
    background: hsl(0 30% 12%);
  }
}

/* Body ledes — text-wrap pretty avoids orphaned last words */
.ds-section-head .t-body-m,
.ds-component-doc-intro {
  text-wrap: pretty;
}

.ds-section:first-of-type {
  border-top: 0;
  padding-top: var(--s-6);
}

.ds-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  /* S52 Paco pass: head-to-content gap was 48px. With section padding
     also at 48 (after S46), that compounded to 96+ at every section
     transition. Drop to 24 — head reads as "owned by this section",
     not "floating above it". */
  margin-bottom: var(--s-5);
  max-width: 60ch;
}

.ds-grid {
  display: grid;
  gap: var(--s-3);
}

/* S58.3 systematic responsive logic — designed so NO grid ever
   produces an "orphan row" (single card alone on the last row) at any
   viewport, including ultrawide.

   Strategy by class:
   ─ .ds-grid-2 : variable count (work groups: 2-4). Use [data-count]
                  on the parent for orphan-aware tuning. Default 2-col
                  is the safe fallback.
   ─ .ds-grid-3 : 5-card archetype on home. 3-col → 3+2 (clean), 5-col
                  at ≥1500 → 5+0 (one row, MacBook full / external).
   ─ .ds-grid-4 : 4-card grids → 4-col default. Tablet collapses to
                  2-col (4=2+2 stays clean). */

.ds-grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* S58.4 LOCKED — .ds-grid-3 stays 3-col at every desktop width. 5
   children = 3+2 forever (no expand to 5+0 at ≥1500). Visual
   stability across viewports beats "spread to fit". */

/* Tablet portrait (600-880): 4-card grid collapses to 2x2. Archetype
   stays 3-col (3+2 still works at this width). Work groups stay 2-col. */
@media (max-width: 880px) {
  .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phablet (≤600): everything stacks. 5-archetype goes 1-col (5 stack)
   instead of 2-col (which would orphan). */
@media (max-width: 600px) {
  .ds-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .ds-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .ds-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ───── Per-group orphan-aware (data-count) ─────────────────────
   Variable-count groups (work) declare data-count="N" on the grid,
   CSS picks the layout that DIVIDES N exactly so there's no orphan.

   Card count → desktop layout:
     2 → 2-col (2+0)         3 → 3-col (3+0)
     4 → 2-col (2+2)         5 → 3-col (3+2) — best symmetric
     6 → 3-col (3+3)

   At ≥1500 (MacBook full), counts that fit one row do so:
     3 → 3-col, 4 → 4-col, 5 → 5-col, 6 → 3-col (3+3 reads better
     than 6 narrow tracks at this width). */
.ds-grid-2[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-2[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-2[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-2[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-2[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* S58.4 LOCKED — work groups stay at their data-count layout at every
   desktop width. 4 cards = 2+2 forever, 5 = 3+2 forever, 6 = 3+3
   forever. No "spread to fit" at ultrawide. */

@media (max-width: 880px) {
  .ds-grid-2[data-count="3"],
  .ds-grid-2[data-count="5"],
  .ds-grid-2[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-grid-2[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .ds-grid-2[data-count] { grid-template-columns: minmax(0, 1fr); }
}

/* ─── DS docs molecules — used inside the system showcase page ───────────
   These styles document the system. They are not part of the system itself.
   Naming prefix: .ds-* keeps them quarantined to /design-system. */

.ds-tier {
  /* Visual grouping for tier-of-tokens block */
}

.ds-tier-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  max-width: 60ch;
}

.ds-tier-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: var(--r-1);
  background: var(--color-bg-tinted);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ds-tier-badge--accent {
  background: var(--color-action-soft);
  color: var(--color-action-text);
}
.ds-tier-badge--muted {
  background: var(--color-bg-tinted);
  color: var(--color-text-muted);
}
.ds-tier-badge--deprecated {
  background: var(--color-bg-tinted);
  color: var(--color-text-body);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-placeholder);
}

/* Token chain — visual cascade from primitive → semantic → component */
.ds-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--color-bg-tinted);
  border: 1px solid var(--color-border);
  border-radius: var(--r-4);
  padding: var(--s-6);
  font-family: var(--font-mono);
  font-size: 13px;
}

.ds-chain-step {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
  padding: var(--s-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2);
}

.ds-chain-step .ds-chain-tier {
  grid-column: 1;
  grid-row: 1 / span 3;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  align-self: start;
}

.ds-chain-name {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--color-text-primary);
}

.ds-chain-value {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-action-text);
}

.ds-chain-note {
  grid-column: 2;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-body);
}

.ds-chain-arrow {
  list-style: none;
  align-self: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--color-text-muted);
  user-select: none;
}

@media (max-width: 600px) {
  .ds-chain-step {
    grid-template-columns: 1fr;
  }
  .ds-chain-step .ds-chain-tier {
    grid-row: auto;
  }
  .ds-chain-name,
  .ds-chain-value,
  .ds-chain-note {
    grid-column: 1;
  }
}

/* Collapsible details block (Tier 1 primitives, legacy aliases) */
.ds-details {
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  padding: var(--s-4) var(--s-5);
  background: var(--color-surface);
}
.ds-details[open] {
  background: var(--color-bg-tinted);
}
.ds-details-summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ds-details-summary::-webkit-details-marker {
  display: none;
}
.ds-details-summary::before {
  content: "▶";
  font-size: var(--t-tiny);
  color: var(--color-text-muted);
  transition: transform var(--dur-quick) var(--ease-out);
}
.ds-details[open] > .ds-details-summary::before {
  transform: rotate(90deg);
}

/* Token reference table — used for legacy alias mapping */
.ds-token-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-text);
  font-size: 13px;
}
.ds-token-table th,
.ds-token-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--color-border-faint);
}
.ds-token-table th {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--w-medium);
  background: var(--color-bg-tinted);
}
.ds-token-table code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-primary);
  background: transparent;
  padding: 0;
}
.ds-token-table tbody tr:hover {
  background: var(--color-bg-tinted);
}

/* Minimal header for the design-system page */
.ds-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px clamp(16px, 4vw, 32px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.ds-header-left {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.ds-mark {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* ============================================================================
   UTILITIES (.u-*)
   ============================================================================
   Single-purpose helper classes for the patterns the system reaches for
   most often — typically inside the design-system showcase page. Brad
   Frost rule: a DS page that uses inline styles has lost the plot.
   Promote the patterns. Eat your own dogfood.

   Naming: .u-<property>-<value-from-token-scale>
   Use sparingly outside the showcase — atoms / molecules / organisms
   should compose via their own block class, not utility soup.
   ============================================================================ */

/* — Spacing: margin-bottom — */
.u-mb-1  { margin-bottom: var(--s-1); }
.u-mb-2  { margin-bottom: var(--s-2); }
.u-mb-3  { margin-bottom: var(--s-3); }
.u-mb-4  { margin-bottom: var(--s-4); }
.u-mb-5  { margin-bottom: var(--s-5); }
.u-mb-6  { margin-bottom: var(--s-6); }
.u-mb-7  { margin-bottom: var(--s-7); }
.u-mb-8  { margin-bottom: var(--s-8); }
.u-mb-9  { margin-bottom: var(--s-9); }

/* — Spacing: margin-top — */
.u-mt-1  { margin-top: var(--s-1); }
.u-mt-2  { margin-top: var(--s-2); }
.u-mt-3  { margin-top: var(--s-3); }
.u-mt-4  { margin-top: var(--s-4); }
.u-mt-5  { margin-top: var(--s-5); }
.u-mt-6  { margin-top: var(--s-6); }
.u-mt-7  { margin-top: var(--s-7); }
.u-mt-8  { margin-top: var(--s-8); }

/* — Reading width caps — */
.u-max-w-20    { max-width: 20ch; }
.u-max-w-22    { max-width: 22ch; }
.u-max-w-40    { max-width: 40ch; }
.u-max-w-60    { max-width: 60ch; }
.u-max-w-72    { max-width: 72ch; }
.u-max-w-narrow { max-width: var(--w-narrow); }

/* — Layout: stretch flex column (already covered by .stack but spelled
   out for the showcase examples that previously used inline flex) — */
.u-col-stretch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* — Color text helpers — */
.u-text-muted { color: var(--color-text-muted); }
.u-text-body  { color: var(--color-text-body); }


/* ============================================================================
   .ds-page  — wrapper that holds sticky ToC + main showcase content
   ============================================================================ */

.ds-page {
  display: grid;
  /* S52 Paco pass: TOC was 240px + 48px gap. Linear's left rail is
     200-220 + 24 gap. Tightening reclaims ~70px for content column. */
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-6);
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4.4vw, 48px);
}

@media (max-width: 1024px) {
  .ds-page {
    display: block;
    padding-inline: clamp(16px, 4vw, 32px);
  }
}

/* ─── Sticky ToC sidebar ─── */
.ds-toc {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-block: var(--s-3);
  border-right: 1px solid var(--color-border-faint);
  padding-right: var(--s-4);
  font-family: var(--font-text);
  font-size: 13px;
  /* S52 Paco pass: TOC line-height 1.5 → 1.4. Sticky nav lists are
     dense — 1.5 reads as "editorial body", 1.4 reads as "navigation
     list". Linear's left rail is 1.4. */
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .ds-toc { display: none; }
}

.ds-toc-head {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.ds-toc-shortcut {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  padding: 1px 6px;
  background: var(--color-bg-tinted);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--r-1);
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.ds-toc-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.ds-toc-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-toc-group-label {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  font-weight: var(--w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 2px 8px;
  margin-bottom: 2px;
}

.ds-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ds-toc-list li ul {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ds-toc-link {
  display: block;
  padding: 4px 8px;
  border-radius: var(--r-1);
  text-decoration: none;
  color: var(--color-text-body);
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: background-color var(--dur-quick) var(--ease-quick), border-left-color var(--dur-quick) var(--ease-quick), color var(--dur-quick) var(--ease-quick);
}

.ds-toc-link:hover {
  background: var(--color-bg-tinted);
  color: var(--color-text-primary);
}

.ds-toc-link.is-active {
  border-left-color: var(--color-action);
  color: var(--color-text-primary);
  font-weight: var(--w-medium);
  background: var(--color-bg-tinted);
}

.ds-toc-link--child {
  font-size: 12px;
  color: var(--color-text-muted);
}
.ds-toc-link--child.is-active {
  color: var(--color-text-primary);
}

.ds-toc-num {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  margin-right: 6px;
  color: var(--color-text-muted);
}

/* Mobile "Jump to…" chip — opens the ⌘K palette on small screens
   where the desktop ToC is hidden */
.ds-mobile-jump {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: var(--z-sticky);
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: var(--w-medium);
  color: var(--color-action-fg);
  background: var(--color-text-primary);
  border: 0;
  border-radius: var(--r-full);
  box-shadow: 0 6px 20px hsl(0 0% 0% / 0.18);
  cursor: pointer;
  transition:
    transform var(--dur-press) var(--ease-spring),
    opacity var(--dur-quick) var(--ease-out);
}
.ds-mobile-jump:active {
  transform: scale(0.96);
}
@media (max-width: 1024px) {
  .ds-mobile-jump { display: inline-flex; }
}

/* ─── ⌘K palette overlay ─── */
.ds-palette[hidden] { display: none !important; }

.ds-palette {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  padding-inline: var(--s-4);
  background: hsl(0 0% 0% / 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ds-palette-fade var(--dur-quick) var(--ease-out);
}

@keyframes ds-palette-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ds-palette-panel {
  width: 100%;
  max-width: 560px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-4);
  box-shadow: 0 24px 64px hsl(0 0% 0% / 0.35);
  overflow: hidden;
  animation: ds-palette-rise var(--dur-base) var(--ease-out);
}

@keyframes ds-palette-rise {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ds-palette-input {
  display: block;
  width: 100%;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-faint);
  outline: none;
}
.ds-palette-input::placeholder {
  color: var(--color-text-placeholder);
}

.ds-palette-list {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0;
  max-height: 50vh;
  overflow-y: auto;
}

.ds-palette-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color 60ms var(--ease-quick);
}

.ds-palette-item.is-active,
.ds-palette-item:hover {
  background: var(--color-bg-tinted);
}

.ds-palette-item-num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--color-text-muted);
}

.ds-palette-item-name {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: var(--w-medium);
  color: var(--color-text-primary);
}

.ds-palette-item-tier {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-1);
  background: var(--color-bg-tinted);
}
/* Tier-coded backgrounds — tells the user the structure as they search */
.ds-palette-item-tier--get-started { color: hsl(38 100% 30%); background: hsl(38 95% 90%); }
.ds-palette-item-tier--foundation { color: hsl(220 60% 40%); background: hsl(220 70% 96%); }
.ds-palette-item-tier--atom       { color: hsl(38 100% 30%);  background: hsl(38 95% 95%);  }
.ds-palette-item-tier--molecule   { color: hsl(280 50% 40%); background: hsl(280 60% 96%); }
.ds-palette-item-tier--organism   { color: hsl(160 50% 30%); background: hsl(160 60% 95%); }
.ds-palette-item-tier--template   { color: hsl(340 60% 40%); background: hsl(340 70% 97%); }
.ds-palette-item-tier--reference  { color: hsl(0 0% 35%); background: hsl(0 0% 95%); }
.ds-palette-item-tier--governance { color: hsl(0 0% 100%); background: hsl(0 0% 18%); }

@media (prefers-color-scheme: dark) {
  .ds-palette-item-tier--foundation { color: hsl(220 70% 80%); background: hsl(220 50% 15%); }
  .ds-palette-item-tier--atom       { color: hsl(38 100% 75%); background: hsl(38 50% 18%); }
  .ds-palette-item-tier--molecule   { color: hsl(280 70% 80%); background: hsl(280 40% 18%); }
  .ds-palette-item-tier--organism   { color: hsl(160 60% 75%); background: hsl(160 40% 14%); }
  .ds-palette-item-tier--template   { color: hsl(340 70% 80%); background: hsl(340 40% 18%); }
  .ds-palette-item-tier--reference  { color: hsl(0 0% 75%); background: hsl(0 0% 16%); }
  .ds-palette-item-tier--governance { color: hsl(0 0% 95%); background: hsl(0 0% 28%); }
}

.ds-palette-empty {
  padding: var(--s-5);
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
}

.ds-palette-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--color-border-faint);
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.ds-palette-foot kbd {
  margin: 0 4px;
}


/* Footer */
.ds-footer {
  padding: var(--s-7) clamp(16px, 4vw, 32px);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}


/* ============================================================================
   .ds-component-doc — the canonical component documentation block
   ============================================================================
   Every documented component on the DS page renders inside this molecule.
   Consistent shape across all atoms, molecules, organisms.

   Sections (top to bottom):
     1. Head      → tier badge + status + name + intro + import handle
     2. Live      → real component instance(s)
     3. Anatomy   → diagram + part labels
     4. Variants  → matrix table (when, why, example)
     5. States    → matrix table (visual + trigger)
     6. Sizes     → optional, when component has size variants
     7. A11y      → receipts (target, contrast, keyboard, ARIA, motion)
     8. Behavior  → interaction notes
     9. Code      → HTML snippet with canonical class names
    10. Tokens    → token chain — which tokens this component reads
    11. Do/Don't  → usage rules (filled in S6)

   Each section is optional but order is fixed.
   ============================================================================ */

.ds-component-doc {
  display: flex;
  flex-direction: column;
  /* P3 Paco product polish: was 48/48 padding + 48 between-section
     gap. Each component doc had ~9 sections (live, anatomy, variants,
     states, sizes, a11y, code, do/don't, health). 9 × 48 = 432px of
     pure section gap per component. Trimmed to 32 — sections still
     read separately, page is 100+ px shorter per doc. */
  gap: var(--s-6);
  padding: var(--s-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-4);
}

@media (max-width: 600px) {
  .ds-component-doc {
    padding: var(--s-4);
    gap: var(--s-5);
  }
}

/* — Head — */
.ds-component-doc-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  /* P3: head separator padding 24 → 16. The hairline + 32 gap-to-
     first-section is enough visual separation. */
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--color-border-faint);
}

.ds-component-doc-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.ds-component-doc-name {
  font-family: var(--font-display);
  font-size: var(--t-title-l);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-tighter);
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0;
}

.ds-component-doc-intro {
  font-family: var(--font-text);
  font-size: var(--t-body-l);
  line-height: 1.5;
  color: var(--color-text-body);
  max-width: 60ch;
  margin: 0;
}

.ds-component-doc-import {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-bg-tinted);
  padding: 3px 8px;
  border-radius: var(--r-1);
  align-self: flex-start;
}

/* — Section wrapper inside the doc — */
.ds-component-doc-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.ds-component-doc-section-head {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* — Status pill — */
.ds-component-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
}

/* ─── Sparkline (S38) ───────────────────────────────────────
   Tiny 80×18 inline SVG line chart for adoption/trend cells.
   Server-side rendered via the {{sparkline variant values...}}
   helper in main.go. Variants color the stroke + end-dot:
     up      growth (green)
     flat    no change (muted)
     new     just-introduced (accent)
   Use -1 in the values to mean "missing" — that point is
   skipped, the line picks up at the next present index.
   ──────────────────────────────────────────────────────────── */
.ds-sparkline {
  display: inline-block;
  width: 64px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  overflow: visible;
}

.ds-sparkline-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ds-sparkline-dot {
  fill: currentColor;
  stroke: var(--surface);
  stroke-width: 0.75;
}

.ds-sparkline--up      { color: var(--color-good-text); }
.ds-sparkline--flat    { color: var(--muted); }
.ds-sparkline--new     { color: var(--accent-text); }
/* R7: dark-mode override removed — --color-good-text already swaps
   per theme in tokens.css. */
/* S39: replace the unicode ● with a CSS-drawn dot + soft halo.
   Halo uses a fractional outline of currentColor so each variant's
   color drives both the dot AND its glow through one inheritance.
   Halo radius is small enough to read as "live indicator" without
   bleeding out of the pill's padding. */
.ds-component-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  flex-shrink: 0;
}
.ds-component-status--stable {
  background: hsl(142 70% 95%);
  color: hsl(142 76% 28%);
}
.ds-component-status--beta {
  background: hsl(48 100% 95%);
  color: hsl(43 100% 32%);
}
.ds-component-status--experimental {
  background: var(--color-bg-tinted);
  color: var(--color-text-muted);
}
.ds-component-status--deprecated {
  background: hsl(0 80% 96%);
  color: hsl(0 70% 42%);
}

/* Live "stable" pulses gently — the only one that pulses, because it's
   the "production-ready" signal. Other states are static. */
@media (prefers-reduced-motion: no-preference) {
  .ds-component-status--stable::before {
    animation: ds-status-pulse 2.4s var(--ease-in-out) infinite;
  }
}

@keyframes ds-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
  50%      { box-shadow: 0 0 0 4.5px color-mix(in srgb, currentColor 28%, transparent); }
}

/* — Anatomy diagram (left = ASCII-ish diagram, right = part list) — */
.ds-anatomy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
}

@media (max-width: 720px) {
  .ds-anatomy { grid-template-columns: 1fr; }
}

.ds-anatomy-diagram {
  background: var(--color-bg-tinted);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--r-3);
  padding: var(--s-5);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-body);
  white-space: pre-wrap;
  overflow-x: auto;
}

.ds-anatomy-parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
}

.ds-anatomy-parts li {
  padding-left: var(--s-3);
  position: relative;
  color: var(--color-text-body);
}

.ds-anatomy-parts li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--color-action-text);
  font-weight: var(--w-medium);
}

.ds-anatomy-parts strong {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--w-medium);
  color: var(--color-text-primary);
  margin-right: var(--s-2);
}

/* — Matrix tables (variants, states, sizes) — */
.ds-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
}

.ds-matrix th,
.ds-matrix td {
  text-align: left;
  /* S47 Paco pass: matrix cells were 12/16 — too generous for dense
     reference tables. Drop to 8/12 so 14-row tables fit on a screen. */
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--color-border-faint);
  vertical-align: top;
}

.ds-matrix thead th {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  font-weight: var(--w-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-tinted);
  border-bottom-color: var(--color-border);
}

.ds-matrix tbody tr:hover {
  background: var(--color-bg-tinted);
}

.ds-matrix .ds-matrix-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--w-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.ds-matrix .ds-matrix-example {
  text-align: right;
  white-space: nowrap;
}

/* — Accessibility receipts list — */
.ds-a11y-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
}

.ds-a11y-list li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--color-border-faint);
  color: var(--color-text-body);
}

.ds-a11y-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ds-a11y-list strong {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  align-self: start;
  padding-top: 2px;
}

@media (max-width: 600px) {
  .ds-a11y-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* — Tokens-used list — */
.ds-token-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ds-token-list li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  background: var(--color-bg-tinted);
  border: 1px solid var(--color-border-faint);
  border-bottom: 0;
}
.ds-token-list li:first-child {
  border-top-left-radius: var(--r-2);
  border-top-right-radius: var(--r-2);
}
.ds-token-list li:last-child {
  border-bottom: 1px solid var(--color-border-faint);
  border-bottom-left-radius: var(--r-2);
  border-bottom-right-radius: var(--r-2);
}

.ds-token-list .ds-token-from {
  color: var(--color-text-primary);
}
.ds-token-list .ds-token-arrow {
  color: var(--color-text-muted);
  font-size: var(--t-micro);
}
.ds-token-list .ds-token-to {
  color: var(--color-action-text);
  text-align: right;
}

@media (max-width: 600px) {
  .ds-token-list li {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .ds-token-list .ds-token-to,
  .ds-token-list .ds-token-arrow {
    text-align: left;
  }
}

/* — Composition trail (atomic-design map for organisms) — */
.ds-composition {
  margin: 0;
  padding: var(--s-5);
  background: var(--color-bg-tinted);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--r-3);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: var(--lh-prose);
  color: var(--color-text-body);
  white-space: pre;
  overflow-x: auto;
}

.ds-composition .ds-comp-block { color: var(--color-text-primary); font-weight: var(--w-medium); }
.ds-composition .ds-comp-slot  { color: var(--color-text-muted); }
.ds-composition .ds-comp-atom  { color: var(--color-action-text); }
.ds-composition .ds-comp-mol   { color: hsl(220 70% 45%); }
.ds-composition .ds-comp-note  { color: var(--color-text-muted); font-style: italic; }

/* — Do / Don't grid (filled in S6) — */
.ds-dodont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

@media (max-width: 720px) {
  .ds-dodont { grid-template-columns: 1fr; }
}

.ds-dodont-col {
  padding: var(--s-5);
  border-radius: var(--r-3);
  border: 1px solid var(--color-border);
}
.ds-dodont-col--do {
  border-color: hsl(142 50% 80%);
  background: hsl(142 50% 98%);
}
.ds-dodont-col--dont {
  border-color: hsl(0 60% 85%);
  background: hsl(0 60% 98%);
}

.ds-dodont-col-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.ds-dodont-col--do .ds-dodont-col-head { color: hsl(142 76% 30%); }
.ds-dodont-col--dont .ds-dodont-col-head { color: hsl(0 70% 40%); }

.ds-dodont-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-body);
}

@media (prefers-color-scheme: dark) {
  .ds-component-status--stable {
    background: hsl(142 50% 18%);
    color: hsl(142 70% 70%);
  }
  .ds-component-status--beta {
    background: hsl(43 50% 18%);
    color: hsl(48 100% 70%);
  }
  .ds-component-status--deprecated {
    background: hsl(0 50% 18%);
    color: hsl(0 80% 75%);
  }
  .ds-dodont-col--do {
    border-color: hsl(142 30% 30%);
    background: hsl(142 30% 12%);
  }
  .ds-dodont-col--dont {
    border-color: hsl(0 30% 30%);
    background: hsl(0 30% 12%);
  }
}