/* Generated from tokens/ by scripts/generate.mjs. Do not edit.
   Roles are the contract; primitives (--color-primitive-*) are exposed for
   inspection only. */

:root {
  --color-primitive-ink-0: #000000;
  --color-primitive-ink-15: #0a0707;
  --color-primitive-ink-20: #0c0909;
  --color-primitive-ink-25: #100909;
  --color-primitive-ink-30: #160b0b;
  --color-primitive-ink-40: #1c0a09;
  --color-primitive-ink-52: #241010;
  --color-primitive-ink-60: #2b0e0d;
  --color-primitive-red-50: #420f0c;
  --color-primitive-red-100: #531310;
  --color-primitive-red-150: #630f0d;
  --color-primitive-red-200: #7d1310;
  --color-primitive-red-250: #8c1212;
  --color-primitive-red-300: #871f19;
  --color-primitive-red-350: #911410;
  --color-primitive-red-400: #9e231f;
  --color-primitive-red-450: #ab1612;
  --color-primitive-red-500: #ad2721;
  --color-primitive-red-550: #ae1914;
  --color-primitive-red-650: #c81a1a;
  --color-primitive-red-750: #dc282e;
  --color-primitive-red-760: #e0292f;
  --color-primitive-red-770: #e82132;
  --color-primitive-red-800: #e53935;
  --color-primitive-red-850: #f73f35;
  --color-primitive-rose-300: #8a5559;
  --color-primitive-rose-320: #9e474a;
  --color-primitive-rose-350: #a3676b;
  --color-primitive-rose-450: #ad7175;
  --color-primitive-rose-550: #b37175;
  --color-primitive-rose-600: #bd787d;
  --color-primitive-rose-650: #d4868b;
  --color-primitive-rose-700: #e99499;
  --color-primitive-rose-800: #ffa2a7;
  --color-primitive-paper-90: #f4eeee;
  --color-primitive-paper-100: #f9faf9;
  --color-primitive-amber-500: #c9973f;
  --color-primitive-amber-600: #d6a24b;
  --color-primitive-amber-tint: #1f1a0c;
  --color-primitive-green-500: #86a46f;
  --color-primitive-green-600: #7fbf7a;
  --color-primitive-green-tint: #0f1a0e;
  --color-primitive-blue-500: #7e9ebb;
  --color-primitive-blue-600: #9ab3c9;
  --color-primitive-blue-tint: #0f141c;
  --color-primitive-alpha-transparent: rgb(0 0 0 / 0%);
  --color-primitive-alpha-black-55: rgb(0 0 0 / 55%);
  --color-primitive-alpha-black-65: rgb(0 0 0 / 65%);
  --color-primitive-alpha-red-6: rgb(145 20 16 / 6%);
  --color-primitive-alpha-red-12: rgb(145 20 16 / 12%);
  --color-primitive-ansi-0: #0c0909;
  --color-primitive-ansi-1: #c81a1a;
  --color-primitive-ansi-2: #bd787d;
  --color-primitive-ansi-3: #d4868b;
  --color-primitive-ansi-4: #8c1212;
  --color-primitive-ansi-5: #f73f35;
  --color-primitive-ansi-6: #9e474a;
  --color-primitive-ansi-7: #ffa2a7;
  --color-primitive-ansi-8: #7d1310;
  --color-primitive-ansi-9: #ab1612;
  --color-primitive-ansi-10: #ad2721;
  --color-primitive-ansi-11: #b37175;
  --color-primitive-ansi-12: #871f19;
  --color-primitive-ansi-13: #e82132;
  --color-primitive-ansi-14: #e0292f;
  --color-primitive-ansi-15: #a3676b;
  --color-surface-desktop: #000000;
  --color-surface-canvas: #0c0909;
  --color-surface-chrome: #100909;
  --color-surface-chrome-alt: #1c0a09;
  --color-surface-sunken: #0a0707;
  --color-surface-default: #160b0b;
  --color-surface-raised: #241010;
  --color-surface-overlay: #241010;
  --color-surface-input: #0c0909;
  --color-surface-backdrop: rgb(0 0 0 / 65%);
  --color-surface-code: #0c0909;
  --color-surface-terminal: #0c0909;
  --color-text-default: #e99499;
  --color-text-bright: #ffa2a7;
  --color-text-prose: #f4eeee;
  --color-text-muted: #bd787d;
  --color-text-subtle: #ad7175;
  --color-text-disabled: #8a5559;
  --color-text-placeholder: #bd787d;
  --color-text-accent: #e53935;
  --color-text-accent-strong: #f73f35;
  --color-text-link: #ffa2a7;
  --color-text-link-underline: #dc282e;
  --color-text-link-hover: #f4eeee;
  --color-text-on-selection: #f4eeee;
  --color-text-on-action: #f4eeee;
  --color-text-on-danger: #f9faf9;
  --color-text-on-light: #0c0909;
  --color-text-inverse: #0c0909;
  --color-border-divider: #2b0e0d;
  --color-border-default: #531310;
  --color-border-strong: #9e231f;
  --color-border-control: #a3676b;
  --color-border-active: #e53935;
  --color-border-overlay: #e53935;
  --color-border-disabled: #7d1310;
  --color-border-selected-indicator: #e53935;
  --color-border-selected-indicator-inactive: #9e231f;
  --color-interaction-focus-ring: #e53935;
  --color-interaction-focus-ring-container: #ffa2a7;
  --color-interaction-selection-bg: #911410;
  --color-interaction-selection-text: #f4eeee;
  --color-interaction-selection-inactive-bg: #420f0c;
  --color-interaction-selection-inactive-text: #e99499;
  --color-interaction-text-selection-bg: #911410;
  --color-interaction-text-selection-text: #f4eeee;
  --color-interaction-hover-bg: #1c0a09;
  --color-interaction-hover-bg-strong: #630f0d;
  --color-interaction-pressed-bg: #420f0c;
  --color-interaction-disabled-bg: #160b0b;
  --color-interaction-marquee: rgb(145 20 16 / 12%);
  --color-interaction-drop-target: #e53935;
  --color-interaction-scrollbar-track: #0c0909;
  --color-interaction-scrollbar-thumb: #420f0c;
  --color-interaction-scrollbar-thumb-hover: #911410;
  --color-action-primary-bg: #871f19;
  --color-action-primary-text: #f4eeee;
  --color-action-primary-hover-bg: #911410;
  --color-action-primary-pressed-bg: #630f0d;
  --color-action-primary-border: #9e231f;
  --color-action-secondary-bg: rgb(0 0 0 / 0%);
  --color-action-secondary-text: #ffa2a7;
  --color-action-secondary-border: #a3676b;
  --color-action-secondary-hover-bg: #630f0d;
  --color-action-secondary-pressed-bg: #420f0c;
  --color-action-tertiary-text: #e99499;
  --color-action-tertiary-hover-bg: #1c0a09;
  --color-action-destructive-text: #f73f35;
  --color-action-destructive-border: #e53935;
  --color-action-destructive-hover-bg: #dc282e;
  --color-action-destructive-hover-text: #f9faf9;
  --color-action-destructive-pressed-bg: #ae1914;
  --color-action-destructive-filled-bg: #dc282e;
  --color-action-destructive-filled-text: #f9faf9;
  --color-status-danger-text: #f73f35;
  --color-status-danger-fill: #dc282e;
  --color-status-danger-on-fill: #f9faf9;
  --color-status-danger-tint: #2b0e0d;
  --color-status-danger-border: #e53935;
  --color-status-warning-text: #c9973f;
  --color-status-warning-fill: #c9973f;
  --color-status-warning-on-fill: #0c0909;
  --color-status-warning-tint: #1f1a0c;
  --color-status-warning-border: #c9973f;
  --color-status-success-text: #86a46f;
  --color-status-success-fill: #86a46f;
  --color-status-success-on-fill: #0c0909;
  --color-status-success-tint: #0f1a0e;
  --color-status-success-border: #86a46f;
  --color-status-info-text: #7e9ebb;
  --color-status-info-fill: #7e9ebb;
  --color-status-info-on-fill: #0c0909;
  --color-status-info-tint: #0f141c;
  --color-status-info-border: #7e9ebb;
  --color-status-neutral-text: #bd787d;
  --color-status-neutral-fill: #a3676b;
  --color-status-neutral-on-fill: #000000;
  --color-status-neutral-tint: #241010;
  --color-status-neutral-border: #a3676b;
  --color-code-bg: #0c0909;
  --color-code-current-line: #1c0a09;
  --color-code-gutter-bg: #0c0909;
  --color-code-line-number: #ad7175;
  --color-code-line-number-active: #e99499;
  --color-code-gutter-rule: #2b0e0d;
  --color-code-caret: #e99499;
  --color-code-selection-bg: #420f0c;
  --color-code-search-match-bg: #630f0d;
  --color-code-search-current-bg: #ffa2a7;
  --color-code-search-current-text: #0c0909;
  --color-code-bracket-match: #e53935;
  --color-code-indent-guide: #531310;
  --color-code-whitespace: #7d1310;
  --color-code-syntax-keyword: #f73f35;
  --color-code-syntax-string: #bd787d;
  --color-code-syntax-comment: #ad7175;
  --color-code-syntax-number: #d4868b;
  --color-code-syntax-constant: #d4868b;
  --color-code-syntax-function: #ffa2a7;
  --color-code-syntax-variable: #e99499;
  --color-code-syntax-type: #b37175;
  --color-code-syntax-operator: #e99499;
  --color-code-syntax-punctuation: #e99499;
  --color-code-syntax-property: #e53935;
  --color-code-syntax-heading: #e53935;
  --color-code-syntax-tag: #f73f35;
  --color-code-syntax-attribute: #d4868b;
  --color-code-syntax-escape: #d4868b;
  --color-code-syntax-invalid: #e53935;
  --color-code-syntax-deprecated: #ad7175;
  --color-diagnostic-error-underline: #e53935;
  --color-diagnostic-error-text: #f73f35;
  --color-diagnostic-error-stripe: #e53935;
  --color-diagnostic-error-bg: #2b0e0d;
  --color-diagnostic-warning-underline: #c9973f;
  --color-diagnostic-warning-text: #c9973f;
  --color-diagnostic-warning-stripe: #c9973f;
  --color-diagnostic-info-underline: #7e9ebb;
  --color-diagnostic-info-text: #7e9ebb;
  --color-diagnostic-hint-underline: #ad7175;
  --color-diagnostic-unused-text: #bd787d;
  --color-diff-added-bg: #0f1a0e;
  --color-diff-added-gutter: #86a46f;
  --color-diff-added-emphasis: #86a46f;
  --color-diff-removed-bg: #2b0e0d;
  --color-diff-removed-gutter: #e53935;
  --color-diff-removed-emphasis: #e53935;
  --color-diff-modified-bg: #1f1a0c;
  --color-diff-modified-gutter: #c9973f;
  --color-diff-conflict-border: #f73f35;
  --color-diff-header-bg: #241010;
  --color-terminal-bg: #0c0909;
  --color-terminal-fg: #e99499;
  --color-terminal-cursor: #e99499;
  --color-terminal-selection-bg: #911410;
  --color-terminal-selection-text: #f4eeee;
  --color-terminal-ansi-0: #0c0909;
  --color-terminal-ansi-1: #c81a1a;
  --color-terminal-ansi-2: #bd787d;
  --color-terminal-ansi-3: #d4868b;
  --color-terminal-ansi-4: #8c1212;
  --color-terminal-ansi-5: #f73f35;
  --color-terminal-ansi-6: #9e474a;
  --color-terminal-ansi-7: #ffa2a7;
  --color-terminal-ansi-8: #7d1310;
  --color-terminal-ansi-9: #ab1612;
  --color-terminal-ansi-10: #ad2721;
  --color-terminal-ansi-11: #b37175;
  --color-terminal-ansi-12: #871f19;
  --color-terminal-ansi-13: #e82132;
  --color-terminal-ansi-14: #e0292f;
  --color-terminal-ansi-15: #a3676b;
  --color-chart-series-1: #ffa2a7;
  --color-chart-series-2: #f73f35;
  --color-chart-series-3: #bd787d;
  --color-chart-series-4: #a3676b;
  --color-chart-axis: #9e231f;
  --color-chart-grid: #2b0e0d;
  --color-chart-label: #bd787d;
  --color-icon-default: #e99499;
  --color-icon-decorative: #a3676b;
  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --border-width-default: 1px;
  --border-width-emphasis: 2px;
  --radius-none: 0px;
  --font-family-mono: "SauceCodePro NFM", "Source Code Pro", "Cascadia Mono", "Consolas", "Liberation Mono", "DejaVu Sans Mono", monospace;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-size-ui-sm: 12px;
  --font-size-ui-md: 13px;
  --font-size-ui-lg: 14px;
  --font-size-reading: 15px;
  --font-size-code: 13px;
  --font-size-terminal: 13px;
  --font-size-h1: 20px;
  --font-size-h2: 16px;
  --font-size-h3: 13px;
  --font-size-caption: 11px;
  --font-line-height-ui-sm: 16px;
  --font-line-height-ui-md: 18px;
  --font-line-height-ui-lg: 20px;
  --font-line-height-reading: 24px;
  --font-line-height-code: 19px;
  --font-line-height-terminal: 19px;
  --font-line-height-h1: 28px;
  --font-line-height-h2: 24px;
  --font-line-height-h3: 18px;
  --font-line-height-caption: 16px;
  --font-letter-spacing-terminal: -0.5px;
  --density-compact-control-height: 24px;
  --density-compact-row-height: 28px;
  --density-compact-control-padding-x: 8px;
  --density-compact-icon: 16px;
  --density-compact-gap: 2px;
  --density-comfortable-control-height: 32px;
  --density-comfortable-row-height: 36px;
  --density-comfortable-control-padding-x: 12px;
  --density-comfortable-icon: 16px;
  --density-comfortable-gap: 4px;
  --focus-ring: 1px dashed #e53935;
  --focus-ring-container: 2px solid #ffa2a7;
  --focus-offset: -2px;
  --focus-offset-container: -3px;
  --focus-offset-invalid: -4px;
  --motion-duration-fast: 80ms;
  --motion-duration-base: 120ms;
  --motion-duration-slow: 150ms;
  --shadow-floating: 0px 6px 22px 0px rgb(0 0 0 / 55%);
  --layout-measure: 72;
  --layout-content-max: 680px;
  --layout-app-max: 1440px;
  --breakpoint-xs: 320px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1280px;
  --icon-size-sm: 12px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-stroke: 1.5px;
  --z-canvas: 0;
  --z-raised: 1;
  --z-popover: 10;
  --z-drawer: 20;
  --z-dialog: 30;
  --z-toast: 40;
  --z-skip-link: 1000;
}

[data-profile="heritage-ansi"] {
  --color-text-subtle: #a3676b;
  --color-border-overlay: #ae1914;
  --color-status-neutral-on-fill: #0c0909;
  --color-code-line-number: #7d1310;
  --color-code-syntax-comment: #7d1310;
  --color-code-syntax-variable: #ab1612;
  --color-code-syntax-operator: #ffa2a7;
  --color-code-syntax-punctuation: #d4868b;
}

[data-profile="extended"] {
  --color-code-syntax-string: #86a46f;
  --color-code-syntax-number: #c9973f;
  --color-code-syntax-constant: #c9973f;
  --color-code-syntax-type: #7e9ebb;
  --color-terminal-ansi-1: #e53935;
  --color-terminal-ansi-2: #86a46f;
  --color-terminal-ansi-3: #c9973f;
  --color-terminal-ansi-4: #7e9ebb;
  --color-terminal-ansi-5: #b37175;
  --color-terminal-ansi-6: #bd787d;
  --color-terminal-ansi-7: #e99499;
  --color-terminal-ansi-8: #ad7175;
  --color-terminal-ansi-9: #f73f35;
  --color-terminal-ansi-10: #7fbf7a;
  --color-terminal-ansi-11: #d6a24b;
  --color-terminal-ansi-12: #9ab3c9;
  --color-terminal-ansi-13: #d4868b;
  --color-terminal-ansi-14: #ffa2a7;
  --color-terminal-ansi-15: #f4eeee;
  --color-chart-series-2: #86a46f;
  --color-chart-series-3: #c9973f;
  --color-chart-series-4: #7e9ebb;
}

[data-density="compact"] {
  --density-control-height: 24px;
  --density-row-height: 28px;
  --density-control-padding-x: 8px;
  --density-icon: 16px;
  --density-gap: 2px;
}
[data-density="comfortable"] {
  --density-control-height: 32px;
  --density-row-height: 36px;
  --density-control-padding-x: 12px;
  --density-icon: 16px;
  --density-gap: 4px;
}

/* Base: the page is itself an implementation of the theme. Every colour is a
   token variable from tokens.generated.css; raw literals are banned here by
   tests/dist/consistency.test.js. */

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

html {
  color-scheme: dark;
  background: var(--color-surface-canvas);
  color: var(--color-text-default);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--color-interaction-scrollbar-thumb) var(--color-interaction-scrollbar-track);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--color-surface-canvas);
  min-width: 320px;
}

::selection {
  background: var(--color-interaction-text-selection-bg);
  color: var(--color-interaction-text-selection-text);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-interaction-scrollbar-thumb);
  border: 2px solid var(--color-interaction-scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-interaction-scrollbar-thumb-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-bright);
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--font-line-height-h1);
  color: var(--color-text-prose);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--font-line-height-h2);
  color: var(--color-text-prose);
}

h3 {
  font-size: var(--font-size-ui-lg);
  line-height: var(--font-line-height-ui-lg);
  color: var(--color-text-bright);
}

h4,
h5,
h6 {
  font-size: var(--font-size-h3);
  line-height: var(--font-line-height-h3);
  color: var(--color-text-accent);
}

p,
ul,
ol,
table,
pre,
blockquote,
dl {
  margin: 0 0 var(--space-12);
}

p,
li,
dd,
td,
th {
  overflow-wrap: anywhere;
}

.prose {
  color: var(--color-text-prose);
  font-size: var(--font-size-reading);
  line-height: var(--font-line-height-reading);
  max-width: var(--layout-content-max);
}

.prose p,
.prose li {
  max-width: 72ch;
}

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-color: var(--color-text-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-text-link-hover);
  background: var(--color-interaction-hover-bg-strong);
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
  outline: 0;
}

code,
kbd,
pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);
}

code {
  color: var(--color-text-bright);
}

pre {
  padding: var(--space-8);
  border: var(--border-width-default) solid var(--color-border-default);
  background: var(--color-surface-code);
  overflow-x: auto;
  line-height: var(--font-line-height-code);
}

pre code {
  color: var(--color-text-default);
}

kbd {
  padding: 0 var(--space-4);
  border: var(--border-width-default) solid var(--color-border-control);
  color: var(--color-text-bright);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-ui-md);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-4) var(--space-8);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

th {
  color: var(--color-text-bright);
  border-bottom: var(--border-width-emphasis) solid var(--color-border-strong);
}

tbody tr:hover {
  background: var(--color-interaction-hover-bg);
}

blockquote {
  padding: var(--space-8) var(--space-12);
  border-left: var(--border-width-emphasis) solid var(--color-border-strong);
  color: var(--color-text-prose);
}

hr {
  border: 0;
  border-top: var(--border-width-default) solid var(--color-border-divider);
  margin: var(--space-24) 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  border-radius: var(--radius-none);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.table-scroll {
  position: relative; /* contains absolutely positioned descendants of demos, so they cannot widen the page */
  overflow-x: auto;
}

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

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline-color: Highlight;
  }
}

/* Page chrome: header, table of contents, sections, token tables, state
   matrices, inspector, controls. Token variables only. */

.skip-link {
  position: absolute;
  left: var(--space-8);
  top: calc(-1 * var(--space-48));
  z-index: var(--z-skip-link);
  padding: var(--space-4) var(--space-8);
  background: var(--color-surface-raised);
  color: var(--color-text-bright);
  border: var(--border-width-default) solid var(--color-border-overlay);
}

.skip-link:focus-visible {
  top: var(--space-8);
}

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 100vh;
}

.site-header {
  border-bottom: var(--border-width-default) solid var(--color-border-strong);
  border-top: var(--border-width-emphasis) solid var(--color-interaction-focus-ring);
  background: var(--color-surface-chrome);
  padding: var(--space-16);
}

.site-header .lede {
  color: var(--color-text-prose);
  font-size: var(--font-size-reading);
  line-height: var(--font-line-height-reading);
  max-width: 72ch;
  margin: var(--space-8) 0 0;
}

.stamp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  margin: var(--space-8) 0 0;
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
  color: var(--color-text-muted);
}

.stamp code {
  color: var(--color-text-default);
}

.banner {
  margin: var(--space-12) 0 0;
  padding: var(--space-8) var(--space-12);
  border: var(--border-width-default) solid var(--color-status-warning-border);
  background: var(--color-status-warning-tint);
  color: var(--color-status-warning-text);
  max-width: 88ch;
}

.banner::before {
  content: "! ";
  font-weight: var(--font-weight-bold);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: end;
  margin-top: var(--space-12);
}

.controls label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-muted);
}

.controls input[type="search"],
.controls select {
  min-height: var(--density-control-height, 28px);
  padding: 0 var(--space-8);
  background: var(--color-surface-input);
  color: var(--color-text-default);
  border: var(--border-width-default) solid var(--color-border-control);
}

.controls input[type="search"]:hover,
.controls select:hover {
  background: var(--color-interaction-hover-bg);
}

.controls input[type="search"]:focus-visible,
.controls select:focus-visible {
  border-color: var(--color-border-active);
}

.controls fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-4) var(--space-8);
  border: var(--border-width-default) solid var(--color-border-divider);
}

.controls legend {
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-muted);
  padding: 0 var(--space-4);
}

.controls fieldset label {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  color: var(--color-text-default);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--density-control-height, 28px);
  padding: 0 var(--space-12);
  border: var(--border-width-default) solid var(--color-border-control);
  background: var(--color-action-secondary-bg);
  color: var(--color-action-secondary-text);
  cursor: pointer;
}

.btn:hover {
  background: var(--color-action-secondary-hover-bg);
}

.btn:active {
  background: var(--color-action-secondary-pressed-bg);
  border-color: var(--color-border-active);
}

.btn-quiet {
  border-color: transparent;
  color: var(--color-action-tertiary-text);
}

.btn-quiet:hover {
  background: var(--color-action-tertiary-hover-bg);
}

.live-count {
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-muted);
}

.js-only {
  display: none;
}

html.js .js-only {
  display: revert;
}

html.js .controls.js-only {
  display: flex;
}

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

@media (min-width: 900px) {
  .layout {
    grid-template-columns: 17rem minmax(0, 1fr);
  }
}

.toc {
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
  background: var(--color-surface-chrome);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

@media (min-width: 900px) {
  .toc {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    border-bottom: 0;
    border-right: var(--border-width-default) solid var(--color-border-divider);
  }
}

.toc summary,
.toc .toc-title {
  padding: var(--space-8) var(--space-12);
  color: var(--color-text-bright);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  list-style: none;
}

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

.toc summary::before {
  content: "▸ ";
  color: var(--color-text-accent);
}

.toc details[open] summary::before {
  content: "▾ ";
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-8);
}

.toc li {
  margin: 0;
}

.toc a {
  display: block;
  padding: var(--space-2) var(--space-12);
  color: var(--color-text-default);
  text-decoration: none;
  border-left: var(--border-width-emphasis) solid transparent;
}

.toc a:hover {
  color: var(--color-text-link-hover);
  background: var(--color-interaction-hover-bg-strong);
}

.toc a[aria-current="true"] {
  border-left-color: var(--color-border-selected-indicator);
  color: var(--color-text-bright);
}

.toc .toc-family {
  padding: var(--space-8) var(--space-12) var(--space-2);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--font-size-caption);
}

.toc ol ol a {
  padding-left: var(--space-24);
}

main {
  padding: var(--space-16);
  max-width: var(--layout-app-max);
  min-width: 0;
}

.doc,
.family,
.component,
.specimen,
.block {
  margin: 0 0 var(--space-48);
  scroll-margin-top: var(--space-16);
}

.doc > h2,
.family > h2,
.block > h2 {
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-16);
  border-bottom: var(--border-width-emphasis) solid var(--color-border-strong);
}

.family-description {
  color: var(--color-text-muted);
  max-width: 88ch;
}

.component {
  padding: var(--space-16);
  border: var(--border-width-default) solid var(--color-border-default);
  background: var(--color-surface-default);
}

.component > h3 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: baseline;
}

.component > h3 code {
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-muted);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-12);
  margin: var(--space-4) 0 var(--space-12);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-muted);
}

.meta code {
  color: var(--color-text-default);
}

.tag {
  display: inline-block;
  padding: 0 var(--space-4);
  border: var(--border-width-default) solid var(--color-border-strong);
  color: var(--color-text-bright);
  font-size: var(--font-size-caption);
  line-height: var(--font-line-height-caption);
}

.tag-proposed {
  border-color: var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.tag-proposed::before {
  content: "! ";
}

.tag-heritage {
  border-color: var(--color-border-control);
  color: var(--color-text-muted);
}

.tag-deprecated {
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
  text-decoration: line-through;
}

.swatch {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.3em;
  margin-right: var(--space-4);
  border: var(--border-width-default) solid var(--color-border-control);
}

.swatch-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-8);
  align-items: stretch;
  border: var(--border-width-default) solid var(--color-border-divider);
  margin-bottom: var(--space-4);
  min-height: 2.75rem;
}

.swatch-row .paint {
  border-right: var(--border-width-default) solid var(--color-border-divider);
}

.swatch-row .label {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.swatch-row .label code {
  display: block;
}

.swatch-row .label .value {
  color: var(--color-text-muted);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-4) var(--space-12);
}

.token-table td:first-child {
  white-space: nowrap;
}

[data-token] {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.copy-target {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
}

.copy-button {
  padding: 0 var(--space-4);
  min-height: 1.5em;
  border: var(--border-width-default) solid var(--color-border-divider);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-caption);
}

.copy-button:hover {
  color: var(--color-text-bright);
  background: var(--color-interaction-hover-bg);
}

.copy-button[data-copied="true"] {
  color: var(--color-status-success-text);
  border-color: var(--color-status-success-border);
}

.matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: auto;
  min-width: 100%;
}

/* child combinators so nested demo tables keep their own component styles */
.matrix > thead > tr > th {
  background: var(--color-surface-raised);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}

.matrix > tbody > tr > td {
  vertical-align: middle;
  min-width: 12rem;
  padding: var(--space-8);
  background: var(--color-surface-canvas);
}

.matrix > tbody > tr:hover {
  background: transparent;
}

.matrix > tbody > tr > th[scope="row"] {
  white-space: nowrap;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-default);
  position: static;
  background: var(--color-surface-default);
}

.demo {
  min-width: 0;
}

/* disabled cells sit in a disabled fieldset so the whole clone is genuinely inert */
.matrix-disabled {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.inspector {
  position: fixed;
  z-index: var(--z-popover);
  max-width: 24rem;
  padding: var(--space-8) var(--space-12);
  border: var(--border-width-default) solid var(--color-border-overlay);
  background: var(--color-surface-raised);
  color: var(--color-text-default);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.inspector[hidden] {
  display: none;
}

.inspector dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-8);
  margin: 0;
}

.inspector dt {
  color: var(--color-text-muted);
}

.inspector dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.site-footer {
  border-top: var(--border-width-default) solid var(--color-border-divider);
  padding: var(--space-16);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
  color: var(--color-text-muted);
}

.export-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-4) var(--space-16);
  padding: 0;
  list-style: none;
}

.export-links li {
  padding: var(--space-4) 0;
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.ledger td:nth-child(n + 4),
.ledger th:nth-child(n + 4) {
  text-align: center;
}

.status-pass {
  color: var(--color-status-success-text);
}

.status-fail {
  color: var(--color-status-danger-text);
  font-weight: var(--font-weight-bold);
}

.status-waived {
  color: var(--color-status-warning-text);
}

.status-pass::before {
  content: "✓ ";
}

.status-fail::before {
  content: "✕ ";
}

.status-waived::before {
  content: "! ";
}

/* No !important: a component's forced-state selector may reveal a [hidden] part (e.g. a table's empty row). */
[hidden] {
  display: none;
}

/* admin-form — composed specimen. Breadcrumbs, a heading, the wizard step
   list, an alert, a field grid built from the text-field, select,
   date-picker, file-input, textarea and checkbox components, and a button
   row; the review variant swaps the grid for a table of values with an Edit
   button per row. The composed components keep their own classes and CSS;
   this file adds layout and the forced-state selectors the state matrix
   emits, which are also the runtime hooks a host sets on the root
   (data-state-invalid, data-state-busy, data-state-disabled). Because the
   matrix marks every field in a cell, the invalid state names the two
   representative fields and holds the rest at rest. Token variables only. */

.admin-form {
  container-type: inline-size;
  container-name: admin-form;
  display: grid;
  gap: var(--space-16);
  width: 56rem;
  max-width: 100%;
  min-width: 0;
  padding: var(--space-16);
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

.admin-form-title {
  margin: calc(-1 * var(--space-8)) 0 0;
  color: var(--color-text-bright);
  font-size: var(--font-size-h2);
  line-height: var(--font-line-height-h2);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

/* layout rules carry the root class so they outrank the components' own
   root rules whatever the stylesheet order */
.admin-form .admin-form-steps {
  max-width: none;
}

/* the danger summary exists in every fragment and shows only when the form is invalid */
.admin-form .admin-form-summary {
  display: none;
}

.admin-form-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-16) var(--space-24);
  align-items: start;
  min-width: 0;
}

.admin-form .admin-form-fields > * {
  max-width: none;
}

.admin-form-notes {
  grid-column: 1 / -1;
}

.admin-form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-8);
  padding-top: var(--space-12);
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

/* below 600px the button row stacks and every button spans the row */
@container admin-form (width < 600px) {
  .admin-form-footer {
    flex-direction: column-reverse;
  }

  .admin-form-footer .button {
    width: 100%;
  }
}

/* review: a description-style table; the row header is the field name */
.admin-form-review {
  min-width: 0;
}

.admin-form .admin-form-review .admin-form-review-key {
  width: 30%;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  text-align: start;
  white-space: nowrap;
}

.admin-form .admin-form-review .admin-form-review-actions {
  width: 1%;
  text-align: end;
  white-space: nowrap;
}

/* invalid: the name and hostname fields carry the 2px danger border and
   their messages, the wizard marks the current step ✕, and the danger
   summary replaces the notice; the fields the matrix also marked stay at rest.
   These carry one more class than the components own :has([aria-invalid])
   rules so they win whatever the stylesheet order. */
[data-state-invalid] .admin-form .admin-form-summary {
  display: flex;
}

[data-state-invalid] .admin-form .admin-form-notice {
  display: none;
}

[data-state-invalid] .admin-form .admin-form-fields .select .select-root,
[data-state-invalid] .admin-form .admin-form-fields .date-picker .date-picker-root,
[data-state-invalid] .admin-form .admin-form-fields .textarea .textarea-root,
[data-state-invalid] .admin-form .admin-form-fields .checkbox .checkbox-input {
  border-color: var(--color-border-control);
  border-width: var(--border-width-default);
}

[data-state-invalid] .admin-form .admin-form-fields .file-input .file-input-button {
  border-color: var(--color-action-secondary-border);
  border-width: var(--border-width-default);
}

[data-state-invalid] .admin-form .admin-form-fields .select .select-message,
[data-state-invalid] .admin-form .admin-form-fields .date-picker .date-picker-message,
[data-state-invalid] .admin-form .admin-form-fields .file-input .file-input-message,
[data-state-invalid] .admin-form .admin-form-fields .textarea .textarea-message,
[data-state-invalid] .admin-form .admin-form-fields .checkbox .checkbox-message {
  display: none;
}

[data-state-invalid] .admin-form .admin-form-fields .select .select-help,
[data-state-invalid] .admin-form .admin-form-fields .date-picker .date-picker-help,
[data-state-invalid] .admin-form .admin-form-fields .file-input .file-input-help,
[data-state-invalid] .admin-form .admin-form-fields .textarea .textarea-help {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

[data-state-invalid] .admin-form .admin-form-fields .textarea .textarea-count {
  color: var(--color-text-muted);
}

/* busy: Continue shows the static ⋯ glyph; aria-busy sits on the form */
.admin-form[aria-busy="true"] .admin-form-continue .button-loading,
[data-state-busy] .admin-form-continue .button-loading {
  display: inline;
}

.admin-form[aria-busy="true"] .admin-form-continue,
[data-state-busy] .admin-form-continue {
  cursor: progress;
}

/* disabled: the whole form is inert while saving; every composed control
   takes its own disabled treatment and the review keys dim with them */
[data-state-disabled] .admin-form .admin-form-review .admin-form-review-key {
  color: var(--color-text-disabled);
}

[data-state-disabled] .admin-form-fields,
[data-state-disabled] .admin-form-footer {
  cursor: not-allowed;
}

@media (forced-colors: active) {
  .admin-form {
    border-color: CanvasText;
  }
}

/* alert — reference CSS. Status tint behind a 1px status border with the
   mandatory glyph; only the optional close button is interactive. Every real
   pseudo-class is paired with the forced-state attribute the state matrix
   emits. Token variables only. */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-8) var(--space-12);
  border: var(--border-width-default) solid;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

.alert-danger {
  background: var(--color-status-danger-tint);
  border-color: var(--color-status-danger-border);
  --_status-text: var(--color-status-danger-text);
}

.alert-warning {
  background: var(--color-status-warning-tint);
  border-color: var(--color-status-warning-border);
  --_status-text: var(--color-status-warning-text);
}

.alert-success {
  background: var(--color-status-success-tint);
  border-color: var(--color-status-success-border);
  --_status-text: var(--color-status-success-text);
}

.alert-info {
  background: var(--color-status-info-tint);
  border-color: var(--color-status-info-border);
  --_status-text: var(--color-status-info-text);
}

.alert-neutral {
  background: var(--color-status-neutral-tint);
  border-color: var(--color-status-neutral-border);
  --_status-text: var(--color-status-neutral-text);
}

.alert-glyph {
  flex: 0 0 auto;
  min-width: var(--icon-size-md);
  color: var(--_status-text);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.alert-body {
  flex: 1 1 auto;
  min-width: 0;
}

.alert-title {
  display: block;
  color: var(--_status-text);
  font-weight: var(--font-weight-bold);
}

.alert-text {
  margin: 0;
  overflow-wrap: anywhere;
}

.alert-close {
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-4)) 0 0;
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-action-tertiary-text);
  font: inherit;
  cursor: pointer;
}

/* hover: only the close button reacts */
.alert-close:hover,
[data-state-hover] .alert-close {
  background: var(--color-action-tertiary-hover-bg);
}

/* focus-visible */
.alert-close:focus-visible,
[data-state-focus-visible] .alert-close {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (hover: none) {
  .alert-close:hover {
    background: transparent;
  }
}

@media (forced-colors: active) {
  .alert {
    border-color: CanvasText;
  }

  .alert-close:focus-visible,
  [data-state-focus-visible] .alert-close {
    outline-color: Highlight;
  }
}

/* badge — reference CSS. A square caption-type label; the status classes
   pick the fill, on-fill text and border roles. The empty state collapses
   the badge to a named dot. Token variables only. */

.badge {
  --_fill: var(--color-status-neutral-fill);
  --_on-fill: var(--color-status-neutral-on-fill);
  --_text: var(--color-status-neutral-text);
  --_border: var(--color-status-neutral-border);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  vertical-align: middle;
  padding: var(--space-2) var(--space-8);
  box-sizing: border-box;
  background: var(--_fill);
  border: var(--border-width-default) solid var(--_fill);
  border-radius: var(--radius-none);
  color: var(--_on-fill);
  font-size: var(--font-size-caption);
  line-height: var(--font-line-height-caption);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  user-select: none;
}

.badge-danger {
  --_fill: var(--color-status-danger-fill);
  --_on-fill: var(--color-status-danger-on-fill);
  --_text: var(--color-status-danger-text);
  --_border: var(--color-status-danger-border);
}

.badge-warning {
  --_fill: var(--color-status-warning-fill);
  --_on-fill: var(--color-status-warning-on-fill);
  --_text: var(--color-status-warning-text);
  --_border: var(--color-status-warning-border);
}

.badge-success {
  --_fill: var(--color-status-success-fill);
  --_on-fill: var(--color-status-success-on-fill);
  --_text: var(--color-status-success-text);
  --_border: var(--color-status-success-border);
}

.badge-info {
  --_fill: var(--color-status-info-fill);
  --_on-fill: var(--color-status-info-on-fill);
  --_text: var(--color-status-info-text);
  --_border: var(--color-status-info-border);
}

.badge-neutral {
  --_fill: var(--color-status-neutral-fill);
  --_on-fill: var(--color-status-neutral-on-fill);
  --_text: var(--color-status-neutral-text);
  --_border: var(--color-status-neutral-border);
}

.badge-count {
  --_fill: var(--color-action-primary-bg);
  --_on-fill: var(--color-action-primary-text);
  --_text: var(--color-text-bright);
  --_border: var(--color-action-primary-border);
  min-width: calc(var(--font-line-height-caption) + var(--space-4));
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.badge-glyph {
  flex: 0 0 auto;
}

.badge-text {
  flex: 0 0 auto;
}

/* the hidden unit of a count badge */
.badge-unit {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* outline: no fill, the status text and border */
.badge-outline {
  background: transparent;
  border-color: var(--_border);
  color: var(--_text);
}

/* empty: a named dot; the glyph and the text stay for assistive technology */
.badge-empty,
[data-state-empty] .badge {
  width: var(--space-8);
  height: var(--space-8);
  min-width: 0;
  padding: 0;
  gap: 0;
}

.badge-empty .badge-glyph,
.badge-empty .badge-text,
[data-state-empty] .badge-glyph,
[data-state-empty] .badge-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (forced-colors: active) {
  .badge {
    forced-color-adjust: none;
  }
}

/* breadcrumbs — reference CSS. Inline links separated by an aria-hidden
   slash; logical properties so RTL mirrors the trail. Every pseudo-class is
   paired with the forced-state attribute the state matrix emits. */

.breadcrumbs {
  min-width: 0;
  color: var(--color-text-default);
  background: var(--color-surface-default);
}

.breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  min-height: var(--density-control-height, 32px);
}

.breadcrumbs-item[hidden] {
  display: none;
}

.breadcrumbs-separator {
  padding-inline: var(--space-8);
  color: var(--color-text-muted);
  user-select: none;
}

.breadcrumbs-link {
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-color: var(--color-text-link-underline);
  text-decoration-thickness: var(--border-width-default);
  text-underline-offset: var(--space-2);
  border-radius: var(--radius-none);
}

.breadcrumbs-ellipsis {
  min-width: var(--density-control-height, 32px);
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  cursor: pointer;
}

/* hover: links take the strong hover fill and the underline thickens */
.breadcrumbs-link:hover,
[data-state-hover] .breadcrumbs-link-demo-target {
  background: var(--color-interaction-hover-bg-strong);
  color: var(--color-text-link-hover);
  text-decoration-thickness: var(--border-width-emphasis);
}

.breadcrumbs-ellipsis:hover {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible */
.breadcrumbs-link:focus-visible,
.breadcrumbs-ellipsis:focus-visible,
[data-state-focus-visible] .breadcrumbs-link-demo-target {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.breadcrumbs-link:focus:not(:focus-visible),
.breadcrumbs-ellipsis:focus:not(:focus-visible) {
  outline: 0;
}

/* current: bright, no underline, no hover */
.breadcrumbs-link[aria-current="page"],
[data-state-current] .breadcrumbs-current {
  color: var(--color-text-bright);
  text-decoration: none;
}

.breadcrumbs-link[aria-current="page"]:hover,
[data-state-current] .breadcrumbs-current:hover {
  background: transparent;
  color: var(--color-text-bright);
}

/* truncated: the collapsible levels hide behind the ellipsis button */
[data-state-truncated] .breadcrumbs-item-collapsible {
  display: none;
}

[data-state-truncated] .breadcrumbs-item-ellipsis {
  display: inline-flex;
}

.breadcrumbs-item-ellipsis:has(.breadcrumbs-ellipsis[aria-expanded="true"]) ~ .breadcrumbs-item-collapsible {
  display: inline-flex;
}

@media (hover: none) {
  .breadcrumbs-link:hover {
    background: transparent;
    color: var(--color-text-link);
    text-decoration-thickness: var(--border-width-default);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .breadcrumbs-link {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .breadcrumbs-link:focus-visible,
  [data-state-focus-visible] .breadcrumbs-link-demo-target {
    outline-color: Highlight;
  }
}

/* button — reference CSS. Each tone sets the private colour slots; each
   state rewrites the slots, and every real pseudo-class is paired with the
   forced-state attribute the state matrix emits. Token variables only. */

.button {
  --_bg: var(--color-action-primary-bg);
  --_fg: var(--color-action-primary-text);
  --_border: var(--color-action-primary-border);
  --_bg-hover: var(--color-action-primary-hover-bg);
  --_fg-hover: var(--color-action-primary-text);
  --_bg-active: var(--color-action-primary-pressed-bg);
  --_border-active: var(--color-action-primary-border);
  --_ring: var(--color-interaction-focus-ring-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  margin: 0;
  background: var(--_bg);
  color: var(--_fg);
  border: var(--border-width-default) solid var(--_border);
  border-radius: var(--radius-none);
  font: inherit;
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
}

.button-secondary {
  --_bg: var(--color-action-secondary-bg);
  --_fg: var(--color-action-secondary-text);
  --_border: var(--color-action-secondary-border);
  --_bg-hover: var(--color-action-secondary-hover-bg);
  --_fg-hover: var(--color-action-secondary-text);
  --_bg-active: var(--color-action-secondary-pressed-bg);
  --_border-active: var(--color-border-active);
  --_ring: var(--color-interaction-focus-ring);
}

.button-tertiary {
  --_bg: transparent;
  --_fg: var(--color-action-tertiary-text);
  --_border: transparent;
  --_bg-hover: var(--color-action-tertiary-hover-bg);
  --_fg-hover: var(--color-action-tertiary-text);
  --_bg-active: var(--color-interaction-pressed-bg);
  --_border-active: var(--color-border-active);
  --_ring: var(--color-interaction-focus-ring);
}

.button-destructive {
  --_bg: transparent;
  --_fg: var(--color-action-destructive-text);
  --_border: var(--color-action-destructive-border);
  --_bg-hover: var(--color-action-destructive-hover-bg);
  --_fg-hover: var(--color-action-destructive-hover-text);
  --_bg-active: var(--color-action-destructive-pressed-bg);
  --_border-active: var(--color-action-destructive-border);
  --_ring: var(--color-interaction-focus-ring);
}

/* the filled destructive tone is reserved for confirm dialogs */
.button-destructive-filled {
  --_bg: var(--color-action-destructive-filled-bg);
  --_fg: var(--color-action-destructive-filled-text);
  --_border: var(--color-action-destructive-border);
  --_bg-hover: var(--color-action-destructive-hover-bg);
  --_fg-hover: var(--color-action-destructive-hover-text);
  --_bg-active: var(--color-action-destructive-pressed-bg);
  --_border-active: var(--color-action-destructive-border);
  --_ring: var(--color-action-destructive-filled-text);
}

.button-icon {
  flex: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: currentColor;
  fill: none;
}

.button-loading {
  display: none;
  flex: none;
}

.button-label {
  min-width: 0;
}

/* hover: fills and borders only, on hover-capable pointers */
@media (hover: hover) {
  .button:hover {
    --_bg: var(--_bg-hover);
    --_fg: var(--_fg-hover);
  }

  .button-destructive:hover {
    --_ring: var(--color-action-destructive-hover-text);
  }
}

[data-state-hover] .button {
  --_bg: var(--_bg-hover);
  --_fg: var(--_fg-hover);
}

[data-state-hover] .button-destructive {
  --_ring: var(--color-action-destructive-hover-text);
}

/* active: a darker fill and the active border; nothing moves */
.button:active,
[data-state-active] .button {
  --_bg: var(--_bg-active);
  --_fg: var(--_fg-hover);
  --_border: var(--_border-active);
}

/* focus-visible: the dashed ring in the on-fill colour of whatever fill is showing */
.button:focus-visible,
[data-state-focus-visible] .button {
  outline: var(--border-width-default) dashed var(--_ring);
  outline-offset: var(--focus-offset);
}

/* loading: the glyph takes the icon slot; the size does not change */
.button[aria-busy="true"] .button-loading,
[data-state-loading] .button-loading {
  display: inline;
}

.button[aria-busy="true"] .button-icon,
[data-state-loading] .button-icon {
  display: none;
}

.button[aria-busy="true"],
[data-state-loading] .button {
  cursor: progress;
}

/* disabled: the same three roles for every tone; no hover, no opacity */
.button:disabled,
[data-state-disabled] .button {
  --_bg: var(--color-interaction-disabled-bg);
  --_fg: var(--color-text-disabled);
  --_border: var(--color-border-disabled);
  --_bg-hover: var(--color-interaction-disabled-bg);
  --_fg-hover: var(--color-text-disabled);
  --_bg-active: var(--color-interaction-disabled-bg);
  --_border-active: var(--color-border-disabled);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .button:focus-visible,
  [data-state-focus-visible] .button {
    outline-color: Highlight;
  }
}

/* card — reference CSS. A bordered panel with no shadow and no radius;
   only link and selectable cards react to the pointer. Every pseudo-class
   is paired with the forced-state attribute the state matrix emits. */

.card {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  padding: var(--density-control-padding-x, 12px);
  box-sizing: border-box;
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-none);
  box-shadow: none;
  color: var(--color-text-default);
  text-decoration: none;
}

.card-title {
  margin: 0;
  color: var(--color-text-bright);
  font-size: var(--font-size-h3);
  line-height: var(--font-line-height-h3);
  font-weight: var(--font-weight-bold);
}

.card-body {
  margin: 0;
  color: var(--color-text-default);
}

.card-meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.card-link,
.card-selectable {
  cursor: pointer;
}

.card-group {
  display: grid;
  gap: var(--density-gap, 4px);
  min-width: 0;
}

/* hover: link and selectable cards only */
.card-link:hover,
.card-selectable:hover,
[data-state-hover] .card-demo-target {
  background: var(--color-interaction-hover-bg);
  border-color: var(--color-border-control);
}

/* focus-visible: the container ring */
.card-link:focus-visible,
.card-selectable:focus-visible,
[data-state-focus-visible] .card-demo-target {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

.card-link:focus:not(:focus-visible),
.card-selectable:focus:not(:focus-visible) {
  outline: 0;
}

/* selected: the fill; every line takes the on-fill text */
.card-selectable[aria-selected="true"],
[data-state-selected] .card-demo-target {
  background: var(--color-interaction-selection-bg);
  border-color: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.card-selectable[aria-selected="true"] .card-title,
.card-selectable[aria-selected="true"] .card-body,
.card-selectable[aria-selected="true"] .card-meta,
[data-state-selected] .card-demo-target .card-title,
[data-state-selected] .card-demo-target .card-body,
[data-state-selected] .card-demo-target .card-meta {
  color: var(--color-interaction-selection-text);
}

.card-selectable[aria-selected="true"]:hover,
[data-state-selected] .card-demo-target:hover {
  background: var(--color-interaction-selection-bg);
  border-color: var(--color-interaction-selection-bg);
}

/* selected + focus-visible: the fill and the container ring together */
.card-selectable[aria-selected="true"]:focus-visible,
[data-state-selected][data-state-focus-visible] .card-demo-target {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

@media (hover: none) {
  .card-link:hover,
  .card-selectable:hover {
    background: var(--color-surface-default);
    border-color: var(--color-border-default);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .card-link,
  .card-selectable {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .card-link:focus-visible,
  .card-selectable:focus-visible,
  [data-state-focus-visible] .card-demo-target {
    outline-color: Highlight;
  }

  .card-selectable[aria-selected="true"],
  [data-state-selected] .card-demo-target {
    background: Highlight;
    color: HighlightText;
  }
}

/* checkbox — reference CSS. The native input, appearance none, is the box;
   the ✓ and – SVGs stack over it in the same 16px cell. Every real
   pseudo-class is paired with the forced-state attribute the state matrix
   emits. Token variables only. */

.checkbox {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text-default);
}

.checkbox-legend {
  padding: 0;
  margin-bottom: var(--space-4);
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.checkbox-required {
  display: none;
  color: var(--color-status-danger-text);
}

.checkbox-option {
  display: grid;
  grid-template-columns: var(--icon-size-md) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
  min-height: var(--space-24);
  padding: var(--space-4) 0;
  cursor: pointer;
}

.checkbox-control {
  display: inline-grid;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  color: var(--color-action-primary-text);
}

.checkbox-control > * {
  grid-area: 1 / 1;
}

.checkbox-input {
  appearance: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  margin: 0;
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  cursor: pointer;
  outline: 0;
}

.checkbox-check,
.checkbox-dash {
  display: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: currentColor;
  fill: none;
  pointer-events: none;
}

.checkbox-text {
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

.checkbox-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover: the box fill only, on hover-capable pointers */
@media (hover: hover) {
  .checkbox-option:hover .checkbox-input:not(:disabled) {
    background: var(--color-interaction-hover-bg);
  }

  .checkbox-option:hover .checkbox-input:checked:not(:disabled),
  .checkbox-option:hover .checkbox-input:indeterminate:not(:disabled) {
    background: var(--color-action-primary-hover-bg);
  }
}

[data-state-hover] .checkbox-input {
  background: var(--color-interaction-hover-bg);
}

/* checked: the primary fill and the ✓ glyph; the border stays border.control */
.checkbox-input:checked,
[data-state-checked] .checkbox-input {
  background: var(--color-action-primary-bg);
}

.checkbox-input:checked ~ .checkbox-check,
[data-state-checked] .checkbox-check {
  display: block;
}

/* mixed: the same fill with the – glyph; the host mirrors the indeterminate property */
.checkbox-input:indeterminate,
[data-state-mixed] .checkbox-input {
  background: var(--color-action-primary-bg);
}

.checkbox-input:indeterminate ~ .checkbox-check,
[data-state-mixed] .checkbox-check {
  display: none;
}

.checkbox-input:indeterminate ~ .checkbox-dash,
[data-state-mixed] .checkbox-dash {
  display: block;
}

[data-state-hover][data-state-checked] .checkbox-input,
[data-state-hover][data-state-mixed] .checkbox-input {
  background: var(--color-action-primary-hover-bg);
}

/* focus-visible */
.checkbox-input:focus-visible,
[data-state-focus-visible] .checkbox-input {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* checked + focus-visible: the ring takes the on-fill colour */
.checkbox-input:checked:focus-visible,
.checkbox-input:indeterminate:focus-visible,
[data-state-checked][data-state-focus-visible] .checkbox-input,
[data-state-mixed][data-state-focus-visible] .checkbox-input {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* required */
.checkbox:has(.checkbox-input:required) .checkbox-required,
[data-state-required] .checkbox-required {
  display: inline;
}

/* invalid */
.checkbox-input[aria-invalid="true"],
[data-state-invalid] .checkbox-input {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.checkbox:has(.checkbox-input[aria-invalid="true"]) .checkbox-message,
[data-state-invalid] .checkbox-message {
  display: block;
}

/* disabled, including checked + disabled */
.checkbox-input:disabled,
[data-state-disabled] .checkbox-input {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.checkbox-input:disabled ~ .checkbox-check,
.checkbox-input:disabled ~ .checkbox-dash,
[data-state-disabled] .checkbox-check,
[data-state-disabled] .checkbox-dash {
  color: var(--color-text-disabled);
}

.checkbox-option:has(.checkbox-input:disabled),
[data-state-disabled] .checkbox-option {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.checkbox:disabled .checkbox-legend,
[data-state-disabled] .checkbox-legend {
  color: var(--color-text-disabled);
}

@media (forced-colors: active) {
  .checkbox-input:focus-visible,
  [data-state-focus-visible] .checkbox-input {
    outline-color: Highlight;
  }

  .checkbox-input:checked,
  .checkbox-input:indeterminate,
  [data-state-checked] .checkbox-input,
  [data-state-mixed] .checkbox-input {
    background: Highlight;
  }

  .checkbox-control {
    color: HighlightText;
  }
}

/* chip — reference CSS. A square bordered token; a pressed filter chip is
   the selection fill with a check glyph. Every pseudo-class is paired with
   the forced-state attribute the state matrix emits. Token variables only. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  vertical-align: middle;
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--space-8);
  box-sizing: border-box;
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  white-space: nowrap;
}

.chip-filter {
  cursor: pointer;
}

.chip-check {
  display: none;
  flex: 0 0 auto;
}

.chip-label {
  flex: 0 0 auto;
}

.chip-removable {
  padding-inline-end: 0;
}

.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: calc(var(--density-control-height, 32px) - var(--border-width-emphasis));
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
}

/* hover */
.chip-filter:hover,
[data-state-hover] .chip-filter {
  background: var(--color-interaction-hover-bg);
}

.chip-remove:hover,
[data-state-hover] .chip-remove {
  background: var(--color-interaction-hover-bg-strong);
  color: var(--color-text-bright);
}

/* pressed */
.chip-filter:active {
  background: var(--color-interaction-pressed-bg);
}

/* focus-visible */
.chip-filter:focus-visible,
.chip-remove:focus-visible,
[data-state-focus-visible] .chip-filter,
[data-state-focus-visible] .chip-remove {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.chip-filter:focus:not(:focus-visible),
.chip-remove:focus:not(:focus-visible) {
  outline: 0;
}

/* selected: the fill; the glyph shows */
.chip-filter[aria-pressed="true"],
[data-state-selected] .chip {
  background: var(--color-interaction-selection-bg);
  border-color: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.chip-filter[aria-pressed="true"] .chip-check,
[data-state-selected] .chip-check {
  display: inline-flex;
}

.chip-filter[aria-pressed="true"]:hover,
[data-state-selected] .chip-filter:hover {
  background: var(--color-interaction-selection-bg);
}

[data-state-selected] .chip-remove {
  color: var(--color-interaction-selection-text);
}

/* selected + focus-visible: the ring takes the on-fill colour */
.chip-filter[aria-pressed="true"]:focus-visible,
[data-state-selected][data-state-focus-visible] .chip-filter,
[data-state-selected][data-state-focus-visible] .chip-remove {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* disabled: never opacity */
.chip-filter:disabled,
.chip:has(.chip-remove:disabled),
[data-state-disabled] .chip {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.chip-remove:disabled,
[data-state-disabled] .chip-remove {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.chip-filter:disabled:hover,
.chip-remove:disabled:hover,
[data-state-disabled] .chip-filter:hover,
[data-state-disabled] .chip-remove:hover {
  background: var(--color-interaction-disabled-bg);
  color: var(--color-text-disabled);
}

[data-state-disabled] .chip-remove:hover {
  background: transparent;
}

@media (hover: none) {
  .chip-filter:hover {
    background: var(--color-surface-default);
  }

  .chip-remove:hover {
    background: transparent;
    color: var(--color-text-muted);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .chip-filter,
  .chip-remove {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .chip-filter:focus-visible,
  .chip-remove:focus-visible,
  [data-state-focus-visible] .chip-filter,
  [data-state-focus-visible] .chip-remove {
    outline-color: Highlight;
  }

  .chip-filter[aria-pressed="true"],
  [data-state-selected] .chip {
    background: Highlight;
    color: HighlightText;
  }
}

/* code-editor — reference CSS. A static presentation of source code: the
   gutter, caret, current line, selection, bracket match and syntax roles a
   real editor's theme API is mapped onto. Every state is reachable through
   the forced-state attributes the state matrix emits ([data-state-<part>]).
   Role variables only, so the specimen profile switch recolours the sample. */

.code-editor {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  background: var(--color-code-bg);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-code-syntax-variable);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-code);
  tab-size: 2;
  unicode-bidi: isolate;
  direction: ltr;
}

.code-editor-pre {
  margin: 0;
  min-width: max-content;
  font: inherit;
  white-space: normal; /* lines are blocks; each text part preserves its own whitespace */
}

.code-editor-line {
  display: flex;
  align-items: stretch;
}

.code-editor-ln {
  flex: none;
  box-sizing: content-box;
  min-width: 3ch;
  padding: 0 var(--space-8);
  background: var(--color-code-gutter-bg);
  border-inline-end: var(--border-width-default) solid var(--color-code-gutter-rule);
  color: var(--color-code-line-number);
  text-align: end;
  user-select: none;
}

.code-editor-fold-gutter {
  float: inline-start;
  color: var(--color-code-line-number);
}

.code-editor-text {
  flex: 1 0 auto;
  padding: 0 var(--space-8);
  white-space: pre;
}

/* decorative helpers inside the text */
.code-editor-indent {
  border-inline-start: var(--border-width-default) solid var(--color-code-indent-guide);
}

.code-editor-ws {
  color: var(--color-code-whitespace);
}

.code-editor-fold {
  display: inline-block;
  padding: 0 var(--space-4);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-text-muted);
  line-height: 1;
}

/* the caret exists in the markup and is drawn only while focused */
.code-editor-caret {
  display: none;
  inline-size: var(--border-width-default);
  block-size: var(--font-line-height-code);
  margin-inline-start: calc(-1 * var(--border-width-default));
  vertical-align: top;
  background: var(--color-code-caret);
}

/* syntax roles: colour plus the non-colour styles foundations requires */
.code-editor-kw { color: var(--color-code-syntax-keyword); }
.code-editor-str { color: var(--color-code-syntax-string); }
.code-editor-cm { color: var(--color-code-syntax-comment); font-style: italic; }
.code-editor-num { color: var(--color-code-syntax-number); }
.code-editor-const { color: var(--color-code-syntax-constant); }
.code-editor-fn { color: var(--color-code-syntax-function); }
.code-editor-var { color: var(--color-code-syntax-variable); }
.code-editor-type { color: var(--color-code-syntax-type); }
.code-editor-op { color: var(--color-code-syntax-operator); }
.code-editor-punct { color: var(--color-code-syntax-punctuation); }
.code-editor-prop { color: var(--color-code-syntax-property); }
.code-editor-heading { color: var(--color-code-syntax-heading); font-weight: var(--font-weight-bold); }
.code-editor-tag { color: var(--color-code-syntax-tag); }
.code-editor-attr { color: var(--color-code-syntax-attribute); }
.code-editor-esc { color: var(--color-code-syntax-escape); }

.code-editor-invalid {
  color: var(--color-code-syntax-invalid);
  text-decoration: underline wavy var(--color-code-syntax-invalid);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--space-2);
}

.code-editor-deprecated {
  color: var(--color-code-syntax-deprecated);
  text-decoration: line-through var(--color-code-syntax-deprecated);
}

/* focus-visible: container ring, caret, current line, active line number */
.code-editor:focus-visible,
[data-state-focus-visible] .code-editor {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

.code-editor:focus-visible .code-editor-caret,
[data-state-focus-visible] .code-editor-caret {
  display: inline-block;
}

.code-editor:focus-visible .code-editor-line-current,
[data-state-focus-visible] .code-editor-line-current {
  background: var(--color-code-current-line);
}

.code-editor:focus-visible .code-editor-line-current .code-editor-ln,
[data-state-focus-visible] .code-editor-line-current .code-editor-ln {
  background: var(--color-code-current-line);
  color: var(--color-code-line-number-active);
}

.code-editor:focus:not(:focus-visible) {
  outline: 0;
}

/* selected: the range spans carry the fill; syntax colours are kept */
[data-state-selected] .code-editor-sel {
  background: var(--color-code-selection-bg);
  box-decoration-break: clone;
}

/* selected + container-inactive: the muted fill, no caret, no ring */
[data-state-selected][data-state-container-inactive] .code-editor-sel {
  background: var(--color-interaction-selection-inactive-bg);
  color: var(--color-interaction-selection-inactive-text);
}

[data-state-container-inactive] .code-editor {
  outline: 0;
}

[data-state-container-inactive] .code-editor-caret {
  display: none;
}

/* current: the matched bracket pair is outlined, never filled */
[data-state-current] .code-editor-bracket {
  outline: var(--border-width-default) solid var(--color-code-bracket-match);
  outline-offset: calc(-1 * var(--border-width-default));
}

/* read-only: the gutter drops to the sunken surface, the rule turns dotted, no caret */
[data-state-read-only] .code-editor-ln {
  background: var(--color-surface-sunken);
  border-inline-end-style: dotted;
}

[data-state-read-only] .code-editor-caret {
  display: none;
}

@media (forced-colors: active) {
  .code-editor:focus-visible,
  [data-state-focus-visible] .code-editor {
    outline-color: Highlight;
  }

  .code-editor-caret {
    background: Highlight;
  }

  [data-state-selected] .code-editor-sel {
    background: Highlight;
    color: HighlightText;
  }

  [data-state-current] .code-editor-bracket {
    outline-color: Highlight;
  }
}

/* combobox — reference CSS. The list is rendered in flow directly below the
   box (no floating layer in the demonstration). Every real pseudo-class is
   paired with the forced-state attribute the state matrix emits. The
   [data-state-*] attributes double as the runtime hooks a host may set. */

.combobox {
  position: relative;
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  color: var(--color-text-default);
}

.combobox-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.combobox-root {
  display: flex;
  align-items: stretch;
  min-height: var(--density-control-height, 32px);
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.combobox-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--density-control-padding-x, 12px);
  background: transparent;
  border: 0;
  color: var(--color-text-default);
  caret-color: var(--color-code-caret);
  font: inherit;
  outline: 0;
}

.combobox-input::placeholder {
  color: var(--color-text-placeholder);
  font-style: italic;
  opacity: 1;
}

.combobox-input::selection {
  background: var(--color-interaction-text-selection-bg);
  color: var(--color-interaction-text-selection-text);
}

.combobox-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-8);
  background: transparent;
  border: 0;
  border-inline-start: var(--border-width-default) solid var(--color-border-divider);
  color: var(--color-action-tertiary-text);
  font: inherit;
  cursor: pointer;
}

.combobox-toggle:hover,
[data-state-hover] .combobox-toggle {
  background: var(--color-action-tertiary-hover-bg);
}

.combobox-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.combobox-chevron {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .combobox-chevron {
    transition: transform var(--motion-duration-base);
  }
}

/* listbox: a floating layer drawn in flow — raised surface, overlay border */
.combobox-listbox,
.combobox-group-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.combobox-listbox {
  max-height: calc(8 * var(--density-row-height, 36px));
  overflow-y: auto;
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border-overlay);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
}

.combobox-option {
  display: flex;
  align-items: center;
  min-height: var(--density-row-height, 36px);
  padding: 0 var(--density-control-padding-x, 12px);
  cursor: default;
}

.combobox-option:hover,
[data-state-hover] .combobox-option:first-child {
  background: var(--color-interaction-hover-bg-strong);
  color: var(--color-text-link-hover);
}

/* selected: the active descendant carries the selection fill and a ring in
   the fill's on-fill colour, because focus stays on the input */
.combobox-option[aria-selected="true"],
[data-state-selected] .combobox-option[aria-selected="true"] {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

.combobox-option[aria-selected="true"]::before {
  content: "✓";
  margin-inline-end: var(--space-8);
}

.combobox-group + .combobox-group {
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

.combobox-group-heading {
  display: block;
  padding: var(--space-4) var(--density-control-padding-x, 12px) 0;
  color: var(--color-text-subtle);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.combobox-empty {
  display: none;
  align-items: center;
  min-height: var(--density-row-height, 36px);
  padding: 0 var(--density-control-padding-x, 12px);
  color: var(--color-text-muted);
  font-style: italic;
}

.combobox-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.combobox-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover on the box */
.combobox-root:hover,
[data-state-hover] .combobox-root {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible */
.combobox-root:has(.combobox-input:focus-visible),
[data-state-focus-visible] .combobox-root {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* open / closed: aria-expanded on the input is the real signal */
.combobox:has(.combobox-input[aria-expanded="false"]) .combobox-listbox,
[data-state-closed] .combobox-listbox {
  display: none;
}

.combobox:has(.combobox-input[aria-expanded="false"]) .combobox-chevron,
[data-state-closed] .combobox-chevron {
  transform: rotate(0deg);
}

[data-state-open] .combobox-listbox {
  display: block;
}

[data-state-open] .combobox-chevron {
  transform: rotate(180deg);
}

/* invalid */
.combobox-root:has(.combobox-input[aria-invalid="true"]),
[data-state-invalid] .combobox-root {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.combobox:has(.combobox-input[aria-invalid="true"]) .combobox-message,
[data-state-invalid] .combobox-message {
  display: block;
}

.combobox:has(.combobox-input[aria-invalid="true"]) .combobox-help,
[data-state-invalid] .combobox-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* invalid + focus-visible */
.combobox-root:has(.combobox-input[aria-invalid="true"]:focus-visible),
[data-state-invalid][data-state-focus-visible] .combobox-root {
  border-color: var(--color-status-danger-border);
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset-invalid);
}

/* disabled: the list never opens */
.combobox-root:has(.combobox-input:disabled),
[data-state-disabled] .combobox-root {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.combobox-input:disabled,
[data-state-disabled] .combobox-input,
[data-state-disabled] .combobox-toggle {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.combobox-root:has(.combobox-input:disabled):hover,
[data-state-disabled] .combobox-root:hover,
[data-state-disabled] .combobox-toggle:hover {
  background: var(--color-interaction-disabled-bg);
}

.combobox:has(.combobox-input:disabled) .combobox-listbox,
[data-state-disabled] .combobox-listbox {
  display: none;
}

/* no-results: only the empty row remains */
.combobox-empty-shown,
[data-state-no-results] .combobox-empty {
  display: flex;
}

[data-state-no-results] .combobox-option,
[data-state-no-results] .combobox-group {
  display: none;
}

@media (hover: none) {
  .combobox-root:hover {
    background: var(--color-surface-input);
  }

  .combobox-option:hover {
    background: transparent;
    color: var(--color-text-default);
  }
}

@media (forced-colors: active) {
  .combobox-root:has(.combobox-input:focus-visible),
  [data-state-focus-visible] .combobox-root,
  .combobox-option[aria-selected="true"] {
    outline-color: Highlight;
  }
}

/* data-table — reference CSS. The table's drawing plus a selection column
   with a mixed select-all, focusable rows and static resize handles. Cell
   rules carry the root class so they outrank the site's matrix table rules
   when the demo is nested. Every pseudo-class is paired with the forced-
   state attribute the state matrix emits. Token variables only. */

.data-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--color-surface-default);
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  text-align: start;
}

.data-table .data-table-header {
  position: relative;
  height: var(--density-row-height, 36px);
  min-width: 0;
  padding: 0 var(--density-control-padding-x, 12px);
  background: var(--color-surface-default);
  border: 0;
  border-bottom: var(--border-width-default) solid var(--color-border-strong);
  color: var(--color-text-bright);
  font-weight: var(--font-weight-bold);
  text-align: start;
  white-space: nowrap;
  vertical-align: middle;
}

.data-table .data-table-header-select,
.data-table .data-table-cell-select {
  width: var(--density-control-height, 32px);
  padding-inline-end: 0;
  text-align: center;
}

.data-table .data-table-cell-numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.data-table-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--density-control-height, 32px);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.data-table-sort-glyph {
  display: none;
  color: var(--color-text-bright);
}

/* the select-all: a checkbox-role button on the primary fill when not clear */
.data-table-select-all,
.data-table-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--density-icon, 16px);
  height: var(--density-icon, 16px);
  margin: 0;
  padding: 0;
  vertical-align: middle;
  appearance: none;
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-action-primary-text);
  font: inherit;
  cursor: pointer;
}

.data-table-check-glyph {
  display: none;
  line-height: 1;
}

.data-table-select-all[aria-checked="true"],
.data-table-select-all[aria-checked="mixed"],
[data-state-mixed] .data-table-select-all,
.data-table-checkbox:checked {
  background: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-border);
}

.data-table-select-all[aria-checked="true"] .data-table-check-glyph,
.data-table-select-all[aria-checked="mixed"] .data-table-check-glyph,
[data-state-mixed] .data-table-select-all .data-table-check-glyph {
  display: inline;
}

.data-table-checkbox:checked::before {
  content: "✓";
  color: var(--color-action-primary-text);
  font-size: var(--font-size-ui-sm);
  line-height: 1;
}

.data-table .data-table-row {
  height: var(--density-row-height, 36px);
  background: transparent;
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

.data-table .data-table-body .data-table-row:first-child {
  border-top: 0;
}

.data-table .data-table-cell {
  min-width: 0;
  padding: var(--space-4) var(--density-control-padding-x, 12px);
  background: transparent;
  border: 0;
  color: inherit;
  vertical-align: middle;
}

.data-table .data-table-empty[hidden],
.data-table .data-table-loading[hidden] {
  display: none;
}

.data-table .data-table-empty-cell,
.data-table .data-table-loading-cell {
  color: var(--color-text-muted);
  text-align: center;
}

.data-table-loading-glyph {
  color: var(--color-text-muted);
}

.data-table-loading-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* the resize handle: a pointer affordance only */
.data-table-resize {
  position: absolute;
  inset-inline-end: 0;
  top: var(--space-8);
  bottom: var(--space-8);
  width: var(--border-width-default);
  background: var(--color-border-default);
  cursor: col-resize;
}

/* hover: the row fill; the handle turns active */
.data-table .data-table-body .data-table-row:hover,
[data-state-hover] .data-table-row-demo-target {
  background: var(--color-interaction-hover-bg);
}

.data-table-resize:hover,
[data-state-hover] .data-table-header-demo-target .data-table-resize {
  background: var(--color-border-active);
  width: var(--border-width-emphasis);
}

/* focus-visible: the ring on a row or a control */
.data-table .data-table-row:focus-visible,
.data-table-sort:focus-visible,
.data-table-select-all:focus-visible,
.data-table-checkbox:focus-visible,
[data-state-focus-visible] .data-table-row-demo-target {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.data-table .data-table-row:focus:not(:focus-visible),
.data-table-sort:focus:not(:focus-visible),
.data-table-select-all:focus:not(:focus-visible),
.data-table-checkbox:focus:not(:focus-visible) {
  outline: 0;
}

/* selected: the fill; a checked row checkbox selects its row */
.data-table .data-table-row[aria-selected="true"],
.data-table .data-table-row:has(.data-table-checkbox:checked),
[data-state-selected] .data-table-row-demo-target {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.data-table .data-table-row[aria-selected="true"]:hover,
[data-state-selected] .data-table-row-demo-target:hover {
  background: var(--color-interaction-selection-bg);
}

[data-state-selected] .data-table-row-demo-target .data-table-checkbox {
  background: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-border);
}

[data-state-selected] .data-table-row-demo-target .data-table-checkbox::before {
  content: "✓";
  color: var(--color-action-primary-text);
  font-size: var(--font-size-ui-sm);
  line-height: 1;
}

/* selected + focus-visible: the ring takes the on-fill colour */
.data-table .data-table-row[aria-selected="true"]:focus-visible,
.data-table .data-table-row:has(.data-table-checkbox:checked):focus-visible,
[data-state-selected][data-state-focus-visible] .data-table-row-demo-target {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* sorted */
.data-table .data-table-header[aria-sort="ascending"] .data-table-sort-glyph,
.data-table .data-table-header[aria-sort="descending"] .data-table-sort-glyph,
[data-state-sorted] .data-table-header-demo-target .data-table-sort-glyph {
  display: inline;
}

.data-table .data-table-header[aria-sort="descending"] .data-table-sort-glyph {
  transform: scaleY(-1);
}

/* empty */
[data-state-empty] .data-table-body .data-table-row {
  display: none;
}

.data-table .data-table-body .data-table-empty:not([hidden]),
[data-state-empty] .data-table-body .data-table-empty {
  display: table-row;
}

/* loading */
.data-table[aria-busy="true"] .data-table-body .data-table-row,
[data-state-loading] .data-table-body .data-table-row {
  display: none;
}

.data-table[aria-busy="true"] .data-table-body .data-table-loading,
.data-table .data-table-body .data-table-loading:not([hidden]),
[data-state-loading] .data-table-body .data-table-loading {
  display: table-row;
}

@media (hover: none) {
  .data-table .data-table-body .data-table-row:hover {
    background: transparent;
  }

  .data-table .data-table-row[aria-selected="true"]:hover {
    background: var(--color-interaction-selection-bg);
  }

  .data-table-resize {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .data-table .data-table-row {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .data-table .data-table-row:focus-visible,
  .data-table-sort:focus-visible,
  .data-table-select-all:focus-visible,
  .data-table-checkbox:focus-visible,
  [data-state-focus-visible] .data-table-row-demo-target {
    outline-color: Highlight;
  }

  .data-table .data-table-row[aria-selected="true"],
  [data-state-selected] .data-table-row-demo-target {
    background: Highlight;
    color: HighlightText;
  }
}

/* date-picker — reference CSS. The box is the text-field box; the calendar
   popup is the host's and only receives color-scheme. Every real pseudo-class
   is paired with the forced-state attribute the state matrix emits. */

.date-picker {
  position: relative;
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text-default);
}

.date-picker-label,
.date-picker-legend {
  padding: 0;
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.date-picker-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-4) var(--space-8);
}

.date-picker-half {
  display: grid;
  flex: 1 1 10rem;
  gap: var(--space-4);
  min-width: 0;
}

.date-picker-separator {
  align-self: end;
  padding-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.date-picker-root {
  display: flex;
  align-items: stretch;
  min-height: var(--density-control-height, 32px);
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.date-picker-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--density-control-padding-x, 12px);
  background: transparent;
  border: 0;
  color: var(--color-text-default);
  caret-color: var(--color-code-caret);
  color-scheme: dark;
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: 0;
}

.date-picker-input::selection {
  background: var(--color-interaction-text-selection-bg);
  color: var(--color-interaction-text-selection-text);
}

.date-picker-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.date-picker-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.date-picker-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover */
.date-picker-root:hover,
[data-state-hover] .date-picker-root {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible */
.date-picker-root:has(.date-picker-input:focus-visible),
[data-state-focus-visible] .date-picker-root {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* invalid */
.date-picker-root:has(.date-picker-input[aria-invalid="true"]),
.date-picker-root:has(.date-picker-input:user-invalid),
[data-state-invalid] .date-picker-root {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.date-picker:has(.date-picker-input[aria-invalid="true"]) .date-picker-message,
.date-picker:has(.date-picker-input:user-invalid) .date-picker-message,
[data-state-invalid] .date-picker-message {
  display: block;
}

.date-picker:has(.date-picker-input[aria-invalid="true"]) .date-picker-help,
[data-state-invalid] .date-picker-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* invalid + focus-visible */
.date-picker-root:has(.date-picker-input[aria-invalid="true"]:focus-visible),
[data-state-invalid][data-state-focus-visible] .date-picker-root {
  border-color: var(--color-status-danger-border);
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset-invalid);
}

/* disabled */
.date-picker-root:has(.date-picker-input:disabled),
[data-state-disabled] .date-picker-root {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.date-picker-input:disabled,
[data-state-disabled] .date-picker-input,
[data-state-disabled] .date-picker-separator {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.date-picker-root:has(.date-picker-input:disabled):hover,
[data-state-disabled] .date-picker-root:hover {
  background: var(--color-interaction-disabled-bg);
}

/* read-only: no box, a dotted bottom edge on the canvas */
.date-picker-root:has(.date-picker-input:read-only:not(:disabled)),
[data-state-read-only] .date-picker-root {
  background: var(--color-surface-canvas);
  border-color: transparent;
  border-bottom: var(--border-width-default) dotted var(--color-border-divider);
}

.date-picker-root:has(.date-picker-input:read-only:focus-visible),
[data-state-read-only][data-state-focus-visible] .date-picker-root {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (hover: none) {
  .date-picker-root:hover {
    background: var(--color-surface-input);
  }
}

@media (forced-colors: active) {
  .date-picker-root:has(.date-picker-input:focus-visible),
  [data-state-focus-visible] .date-picker-root {
    outline-color: Highlight;
  }
}

/* diagnostics — reference CSS. Inline markers (underline patterns, the error
   row, the overview stripe) and the problems panel (an APG listbox). Every
   severity has a pattern or a glyph as well as a colour. Forced-state
   attributes from the state matrix ([data-state-<part>]) render each state
   statically. Token variables only. */

.diagnostics {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 100%;
  color: var(--color-text-default);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

/* ---- inline ---- */

.diagnostics-box {
  min-width: 0;
  overflow-x: auto;
  background: var(--color-code-bg);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  font-size: var(--font-size-code);
  line-height: var(--font-line-height-code);
  unicode-bidi: isolate;
  direction: ltr;
}

.diagnostics-code {
  margin: 0;
  min-width: max-content;
  font: inherit;
  white-space: normal;
}

.diagnostics-line {
  display: flex;
  align-items: stretch;
}

.diagnostics-ln {
  flex: none;
  min-width: 2ch;
  padding: 0 var(--space-8);
  border-inline-end: var(--border-width-default) solid var(--color-code-gutter-rule);
  color: var(--color-code-line-number);
  text-align: end;
  user-select: none;
}

.diagnostics-text {
  flex: 1 0 auto;
  padding: 0 var(--space-8);
  white-space: pre;
}

/* the overview stripe: one cell per row on the inline-end edge */
.diagnostics-mark {
  flex: none;
  position: sticky;
  inset-inline-end: 0;
  min-width: 2ch;
  background: var(--color-code-bg);
  border-inline-start: var(--border-width-default) solid var(--color-code-gutter-rule);
  font-size: var(--font-size-caption);
  text-align: center;
  user-select: none;
}

.diagnostics-mark-error { color: var(--color-diagnostic-error-stripe); }
.diagnostics-mark-warning { color: var(--color-diagnostic-warning-stripe); }
.diagnostics-mark-info { color: var(--color-diagnostic-info-text); }
.diagnostics-mark-hint { color: var(--color-diagnostic-hint-underline); }

.diagnostics-line-error,
.diagnostics-line-error .diagnostics-mark {
  background: var(--color-diagnostic-error-bg);
}

/* the ranges: pattern first, colour second */
.diagnostics-error,
.diagnostics-warning,
.diagnostics-info,
.diagnostics-hint,
.diagnostics-unused {
  text-decoration-skip-ink: none;
  text-underline-offset: var(--space-2);
}

.diagnostics-error { text-decoration: underline wavy var(--color-diagnostic-error-underline); }
.diagnostics-warning { text-decoration: underline wavy var(--color-diagnostic-warning-underline); }
.diagnostics-info { text-decoration: underline dotted var(--color-diagnostic-info-underline); }
.diagnostics-hint { text-decoration: underline dotted var(--color-diagnostic-hint-underline); }

.diagnostics-unused {
  color: var(--color-diagnostic-unused-text);
  text-decoration: underline dotted var(--color-diagnostic-unused-text);
}

.diagnostics-deprecated {
  color: var(--color-code-syntax-deprecated);
  text-decoration: line-through var(--color-code-syntax-deprecated);
}

/* ---- panel ---- */

.diagnostics-panel {
  gap: 0;
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.diagnostics-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: baseline;
  min-height: var(--density-row-height, 36px);
  padding: 0 var(--density-control-padding-x, 12px);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.diagnostics-title {
  color: var(--color-text-bright);
  font-weight: var(--font-weight-bold);
}

.diagnostics-count {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.diagnostics-glyph {
  display: inline-block;
  min-width: 1ch;
  text-align: center;
  font-weight: var(--font-weight-bold);
}

.diagnostics-glyph-error { color: var(--color-diagnostic-error-text); }
.diagnostics-glyph-warning { color: var(--color-diagnostic-warning-text); }
.diagnostics-glyph-info { color: var(--color-diagnostic-info-text); }
.diagnostics-glyph-hint { color: var(--color-text-subtle); }
.diagnostics-glyph-success { color: var(--color-status-success-text); }

.diagnostics-list {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: 0;
}

.diagnostics-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0 var(--space-8);
  align-items: baseline;
  min-height: var(--density-row-height, 36px);
  padding: var(--space-4) var(--density-control-padding-x, 12px);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
  cursor: default;
}

.diagnostics-row:last-child {
  border-bottom: 0;
}

.diagnostics-message {
  min-width: 0;
  overflow-wrap: anywhere;
}

.diagnostics-loc,
.diagnostics-rule {
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
  white-space: nowrap;
}

.diagnostics-status,
.diagnostics-empty {
  display: none;
  margin: 0;
  padding: var(--space-4) var(--density-control-padding-x, 12px);
}

.diagnostics-status {
  color: var(--color-status-danger-text);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.diagnostics-inline .diagnostics-status {
  padding: 0;
  border-bottom: 0;
}

.diagnostics-empty {
  color: var(--color-text-muted);
}

/* hover: the row fill; inline ranges do not change */
@media (hover: hover) {
  .diagnostics-row:hover {
    background: var(--color-interaction-hover-bg);
  }
}

[data-state-hover] .diagnostics-row-active {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible: the active row ring; the inline box takes the container ring */
.diagnostics-list:focus-visible .diagnostics-row-active,
[data-state-focus-visible] .diagnostics-row-active {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.diagnostics-box:focus-visible,
[data-state-focus-visible] .diagnostics-box {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

.diagnostics-box:focus:not(:focus-visible) {
  outline: 0;
}

/* selected: the row fill with on-selection text and glyph; the matching range in code */
.diagnostics-row[aria-selected="true"],
[data-state-selected] .diagnostics-row-active {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.diagnostics-row[aria-selected="true"] .diagnostics-glyph,
.diagnostics-row[aria-selected="true"] .diagnostics-loc,
.diagnostics-row[aria-selected="true"] .diagnostics-rule,
[data-state-selected] .diagnostics-row-active .diagnostics-glyph,
[data-state-selected] .diagnostics-row-active .diagnostics-loc,
[data-state-selected] .diagnostics-row-active .diagnostics-rule {
  color: var(--color-interaction-selection-text);
}

[data-state-selected] .diagnostics-target {
  background: var(--color-code-selection-bg);
}

/* selected + focus-visible: the ring recolours on the fill */
.diagnostics-list:focus-visible .diagnostics-row[aria-selected="true"],
[data-state-selected][data-state-focus-visible] .diagnostics-row-active {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* error: the provider failed; the status line appears, rows stay */
[data-state-error] .diagnostics-status {
  display: block;
}

/* empty: no problems; decorations, marks and rows go, the message appears */
[data-state-empty] .diagnostics-empty {
  display: block;
}

[data-state-empty] .diagnostics-list,
[data-state-empty] .diagnostics-count {
  display: none;
}

[data-state-empty] .diagnostics-error,
[data-state-empty] .diagnostics-warning,
[data-state-empty] .diagnostics-info,
[data-state-empty] .diagnostics-hint,
[data-state-empty] .diagnostics-unused,
[data-state-empty] .diagnostics-deprecated {
  color: inherit;
  text-decoration: none;
}

[data-state-empty] .diagnostics-mark {
  color: transparent;
}

[data-state-empty] .diagnostics-line-error,
[data-state-empty] .diagnostics-line-error .diagnostics-mark {
  background: var(--color-code-bg);
}

@media (forced-colors: active) {
  .diagnostics-list:focus-visible .diagnostics-row-active,
  [data-state-focus-visible] .diagnostics-row-active,
  .diagnostics-box:focus-visible,
  [data-state-focus-visible] .diagnostics-box {
    outline-color: Highlight;
  }

  .diagnostics-row[aria-selected="true"],
  [data-state-selected] .diagnostics-row-active {
    background: Highlight;
    color: HighlightText;
  }
}

/* dialog — reference CSS. A native <dialog> rendered open in flow inside a
   wrapper that stands in for ::backdrop; a host uses showModal(), where the
   same rules apply to ::backdrop. Every real pseudo-class is paired with the
   forced-state attribute the state matrix emits. Token variables only. */

.dialog-backdrop {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: var(--space-24) var(--space-16);
  background: var(--color-surface-backdrop);
}

.dialog {
  position: static;
  width: min(28rem, 100%);
  max-width: 100%;
  margin: 0;
  padding: var(--space-16);
  background: var(--color-surface-overlay);
  border: var(--border-width-default) solid var(--color-border-overlay);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
  z-index: var(--z-dialog);
}

.dialog::backdrop {
  background: var(--color-surface-backdrop);
}

.dialog:not([open]) {
  display: none;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.dialog-title {
  margin: 0;
  color: var(--color-text-bright);
  font-size: var(--font-size-h2);
  line-height: var(--font-line-height-h2);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.dialog-close {
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-action-tertiary-text);
  font: inherit;
  cursor: pointer;
}

.dialog-body {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.dialog-text {
  margin: 0;
}

.dialog-field {
  display: grid;
  gap: var(--space-4);
}

.dialog-field-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.dialog-field-input {
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  caret-color: var(--color-code-caret);
  font: inherit;
}

.dialog-field-input:focus-visible {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.dialog-field-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.dialog-body .dialog-actions {
  margin-top: var(--space-4);
}

.dialog-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  background: var(--color-action-secondary-bg);
  border: var(--border-width-default) solid var(--color-action-secondary-border);
  border-radius: var(--radius-none);
  color: var(--color-action-secondary-text);
  font: inherit;
  cursor: pointer;
}

.dialog-button-primary {
  background: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-border);
  color: var(--color-action-primary-text);
}

.dialog-button-destructive {
  background: var(--color-action-destructive-filled-bg);
  border-color: var(--color-action-destructive-border);
  color: var(--color-action-destructive-filled-text);
}

.dialog-trap-note {
  display: none;
  margin: var(--space-12) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover: the buttons react in their tone */
.dialog-close:hover,
[data-state-hover] .dialog-close {
  background: var(--color-action-tertiary-hover-bg);
}

.dialog-button:hover,
[data-state-hover] .dialog-button {
  background: var(--color-action-secondary-hover-bg);
}

.dialog-button-primary:hover,
[data-state-hover] .dialog-button-primary {
  background: var(--color-action-primary-hover-bg);
}

.dialog-button-destructive:hover,
[data-state-hover] .dialog-button-destructive {
  background: var(--color-action-destructive-hover-bg);
  color: var(--color-action-destructive-hover-text);
}

/* focus-visible: the dashed ring; on a fill it takes the on-fill colour */
.dialog-close:focus-visible,
.dialog-button:focus-visible,
[data-state-focus-visible] .dialog-close {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.dialog-button-primary:focus-visible {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

.dialog-button-destructive:focus-visible {
  outline: var(--border-width-default) dashed var(--color-action-destructive-filled-text);
  outline-offset: var(--focus-offset);
}

/* open: the native attribute; the matrix re-adds it */
.dialog[open],
[data-state-open] .dialog {
  display: block;
}

/* closed: the dialog and its backdrop are absent */
[data-state-closed] .dialog {
  display: none;
}

[data-state-closed] .dialog-backdrop {
  min-height: var(--density-row-height, 36px);
  background: transparent;
}

/* focus-trapped: the dialog holds focus itself (right after opening) and
   shows the container ring; the note explains the cycle */
.dialog:focus-visible,
[data-state-focus-trapped] .dialog {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

[data-state-focus-trapped] .dialog-trap-note {
  display: block;
}

/* motion: an opacity change only */
@media (prefers-reduced-motion: no-preference) {
  .dialog {
    transition: opacity var(--motion-duration-slow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog {
    transition: none;
  }
}

[data-state-reduced-motion] .dialog {
  transition: none;
}

@media (hover: none) {
  .dialog-close:hover {
    background: transparent;
  }

  .dialog-button:hover {
    background: var(--color-action-secondary-bg);
  }

  .dialog-button-primary:hover {
    background: var(--color-action-primary-bg);
  }

  .dialog-button-destructive:hover {
    background: var(--color-action-destructive-filled-bg);
    color: var(--color-action-destructive-filled-text);
  }
}

@media (max-width: 320px) {
  .dialog-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (forced-colors: active) {
  .dialog {
    border-color: CanvasText;
  }

  .dialog-close:focus-visible,
  .dialog-button:focus-visible,
  .dialog:focus-visible,
  [data-state-focus-visible] .dialog-close,
  [data-state-focus-trapped] .dialog {
    outline-color: Highlight;
  }
}

/* diff-view — reference CSS. A native table: one row per line, the marker
   in its own cell, fills per change kind, word-level changes as text
   decoration, conflicts in a double border. Forced-state attributes from the
   state matrix ([data-state-<part>]) render each state statically. Token
   variables only. */

.diff-view {
  display: table;
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  background: var(--color-code-bg);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-code);
  tab-size: 2;
  unicode-bidi: isolate;
}

.diff-view-row > td {
  padding: 0;
  vertical-align: top;
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.diff-view-row > .diff-view-ln {
  min-width: 3ch;
  padding: 0 var(--space-8);
  color: var(--color-text-muted);
  text-align: end;
  white-space: nowrap;
  user-select: none;
}

.diff-view-row > .diff-view-marker {
  min-width: 1ch;
  padding: 0 var(--space-4);
  border-inline-start: var(--border-width-default) solid var(--color-code-gutter-rule);
  font-weight: var(--font-weight-bold);
  text-align: center;
  white-space: pre;
  user-select: none;
}

.diff-view-row > .diff-view-text {
  width: 100%;
  padding: 0 var(--space-8);
  white-space: pre;
  direction: ltr;
}

.diff-view-side-new.diff-view-ln {
  border-inline-start: var(--border-width-default) solid var(--color-code-gutter-rule);
}

.diff-view-split .diff-view-text {
  width: 50%;
}

/* change kinds: a fill and a marker colour; the marker is content */
.diff-view-row-added > td,
.diff-view-cell-added {
  background: var(--color-diff-added-bg);
}

.diff-view-row-added .diff-view-marker,
.diff-view-marker.diff-view-cell-added {
  color: var(--color-diff-added-gutter);
}

.diff-view-row-removed > td,
.diff-view-cell-removed {
  background: var(--color-diff-removed-bg);
}

.diff-view-row-removed .diff-view-marker,
.diff-view-marker.diff-view-cell-removed {
  color: var(--color-diff-removed-gutter);
}

.diff-view-row-modified > td {
  background: var(--color-diff-modified-bg);
}

.diff-view-row-modified .diff-view-marker {
  color: var(--color-diff-modified-gutter);
}

.diff-view-split .diff-view-row-added .diff-view-side-old {
  background: var(--color-code-bg);
}

/* hunk headers */
.diff-view-row-hunk > td {
  background: var(--color-diff-header-bg);
  color: var(--color-text-default);
}

.diff-view-row-hunk .diff-view-marker {
  color: var(--color-text-muted);
}

.diff-view-range {
  color: var(--color-text-muted);
}

/* word-level: decoration only, never a fill */
.diff-view-word-added {
  background: transparent;
  color: inherit;
  text-decoration: underline var(--color-diff-added-emphasis);
  text-decoration-thickness: var(--border-width-emphasis);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--space-2);
}

.diff-view-word-removed {
  background: transparent;
  color: inherit;
  text-decoration: underline line-through var(--color-diff-removed-emphasis);
  text-decoration-thickness: var(--border-width-default);
  text-decoration-skip-ink: none;
  text-underline-offset: var(--space-2);
}

/* conflicts: a double border around the block, marker lines on the header fill */
.diff-view-row-conflict > td:first-child {
  border-inline-start: calc(3 * var(--border-width-default)) double var(--color-diff-conflict-border);
}

.diff-view-row-conflict > td:last-child {
  border-inline-end: calc(3 * var(--border-width-default)) double var(--color-diff-conflict-border);
}

.diff-view-row-conflict-start > td {
  border-top: calc(3 * var(--border-width-default)) double var(--color-diff-conflict-border);
}

.diff-view-row-conflict-end > td {
  border-bottom: calc(3 * var(--border-width-default)) double var(--color-diff-conflict-border);
}

.diff-view-row-conflict-start > td,
.diff-view-row-conflict-mid > td,
.diff-view-row-conflict-end > td {
  background: var(--color-diff-header-bg);
  color: var(--color-text-bright);
  font-weight: var(--font-weight-bold);
}

.diff-view-row-ours .diff-view-marker {
  color: var(--color-diff-removed-gutter);
}

.diff-view-row-theirs .diff-view-marker {
  color: var(--color-diff-added-gutter);
}

/* the fold header and its button */
.diff-view-row > .diff-view-fold-cell {
  padding: 0 var(--space-8);
  background: var(--color-diff-header-bg);
}

.diff-view-fold {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-text-link);
  font: inherit;
  cursor: pointer;
}

.diff-view-chevron {
  flex: none;
  transition: transform var(--motion-duration-base);
}

.diff-view-fold-expanded {
  display: none;
}

@media (hover: hover) {
  .diff-view-fold:hover {
    background: var(--color-interaction-hover-bg-strong);
    color: var(--color-text-link-hover);
  }
}

.diff-view-fold:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* hover: the number and marker cells take the hover fill; the text keeps its own */
@media (hover: hover) {
  .diff-view-row:hover > .diff-view-ln,
  .diff-view-row:hover > .diff-view-marker {
    background: var(--color-interaction-hover-bg);
  }
}

[data-state-hover] .diff-view-row-active > .diff-view-ln,
[data-state-hover] .diff-view-row-active > .diff-view-marker {
  background: var(--color-interaction-hover-bg);
}

/* selected: the whole row on the selection fill; the marker is still there */
.diff-view-row[aria-current="true"] > td,
.diff-view-row:target > td,
[data-state-selected] .diff-view-row-active > td {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.diff-view-row[aria-current="true"] .diff-view-marker,
.diff-view-row:target .diff-view-marker,
[data-state-selected] .diff-view-row-active .diff-view-marker,
[data-state-selected] .diff-view-row-active .diff-view-ln {
  color: var(--color-interaction-selection-text);
}

/* focus-visible: the row ring; recoloured on the selection fill */
.diff-view-row:focus-visible,
[data-state-focus-visible] .diff-view-row-active {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.diff-view-row[aria-current="true"]:focus-visible,
[data-state-selected][data-state-focus-visible] .diff-view-row-active {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* expanded: the folded body shows, the chevron turns, the label changes */
.diff-view-fold[aria-expanded="true"] .diff-view-chevron,
[data-state-expanded] .diff-view-chevron {
  transform: rotate(90deg);
}

.diff-view-fold[aria-expanded="true"] .diff-view-fold-collapsed,
[data-state-expanded] .diff-view-fold-collapsed {
  display: none;
}

.diff-view-fold[aria-expanded="true"] .diff-view-fold-expanded,
[data-state-expanded] .diff-view-fold-expanded {
  display: inline;
}

[data-state-expanded] .diff-view-folded[hidden] {
  display: table-row-group;
}

/* collapsed: the rest state of the fold; the body stays hidden */
[data-state-collapsed] .diff-view-folded {
  display: none;
}

[data-state-collapsed] .diff-view-chevron {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .diff-view-chevron {
    transition-duration: 0.01ms;
  }
}

@media (forced-colors: active) {
  .diff-view-row:focus-visible,
  [data-state-focus-visible] .diff-view-row-active,
  .diff-view-fold:focus-visible {
    outline-color: Highlight;
  }

  .diff-view-row[aria-current="true"] > td,
  [data-state-selected] .diff-view-row-active > td {
    background: Highlight;
    color: HighlightText;
  }

  .diff-view-row-conflict > td {
    border-color: CanvasText;
  }
}

/* drawer — reference CSS. A native <dialog> anchored to an inline edge;
   the demonstration renders it inside a stage of fixed height that stands in
   for the viewport and ::backdrop. Logical properties mirror it in RTL.
   Every real pseudo-class is paired with the forced-state attribute the
   state matrix emits. Token variables only. */

.drawer-backdrop {
  position: relative;
  min-width: 0;
  min-height: 18rem;
  background: var(--color-surface-backdrop);
  overflow: hidden;
}

.drawer {
  position: absolute;
  inset-block: 0;
  display: flex;
  flex-direction: column;
  width: min(20rem, calc(100% - var(--space-48)));
  max-width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  background: var(--color-surface-overlay);
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
  z-index: var(--z-drawer);
}

.drawer-start {
  inset-inline-start: 0;
  border-inline-end: var(--border-width-default) solid var(--color-border-overlay);
}

.drawer-end {
  inset-inline-end: 0;
  border-inline-start: var(--border-width-default) solid var(--color-border-overlay);
}

.drawer::backdrop {
  background: var(--color-surface-backdrop);
}

.drawer:not([open]) {
  display: none;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--density-row-height, 36px);
  padding: var(--space-8) var(--space-12);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.drawer-title {
  margin: 0;
  color: var(--color-text-bright);
  font-size: var(--font-size-h2);
  line-height: var(--font-line-height-h2);
  font-weight: var(--font-weight-bold);
}

.drawer-close {
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-action-tertiary-text);
  font: inherit;
  cursor: pointer;
}

.drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.drawer-text {
  margin: 0;
  padding: var(--space-8) var(--space-12);
}

.drawer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-item {
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.drawer-link,
.drawer-check {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--density-row-height, 36px);
  padding: 0 var(--space-12);
  color: var(--color-text-default);
  text-decoration: none;
}

.drawer-link[aria-current="page"] {
  color: var(--color-text-bright);
  box-shadow: inset var(--border-width-emphasis) 0 0 var(--color-border-selected-indicator);
}

.drawer-link:hover,
.drawer-check:hover {
  background: var(--color-interaction-hover-bg-strong);
  color: var(--color-text-link-hover);
}

.drawer-checkbox {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  margin: 0;
  accent-color: var(--color-action-primary-bg);
}

.drawer-close:hover {
  background: var(--color-action-tertiary-hover-bg);
}

.drawer-close:focus-visible,
.drawer-link:focus-visible,
.drawer-checkbox:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.drawer-trap-note {
  display: none;
  margin: 0;
  padding: var(--space-8) var(--space-12);
  border-top: var(--border-width-default) solid var(--color-border-divider);
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* open: the native attribute; the matrix re-adds it */
.drawer[open],
[data-state-open] .drawer {
  display: flex;
}

/* closed: the panel and the backdrop are absent */
[data-state-closed] .drawer {
  display: none;
}

[data-state-closed] .drawer-backdrop {
  min-height: var(--density-row-height, 36px);
  background: transparent;
}

/* focus-trapped: the panel holds focus itself and shows the container ring */
.drawer:focus-visible,
[data-state-focus-trapped] .drawer {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

[data-state-focus-trapped] .drawer-trap-note {
  display: block;
}

/* motion: an opacity change only, never a slide */
@media (prefers-reduced-motion: no-preference) {
  .drawer {
    transition: opacity var(--motion-duration-slow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer {
    transition: none;
  }
}

[data-state-reduced-motion] .drawer {
  transition: none;
}

@media (hover: none) {
  .drawer-close:hover {
    background: transparent;
  }

  .drawer-link:hover,
  .drawer-check:hover {
    background: transparent;
    color: var(--color-text-default);
  }
}

@media (forced-colors: active) {
  .drawer-start,
  .drawer-end {
    border-color: CanvasText;
  }

  .drawer-close:focus-visible,
  .drawer-link:focus-visible,
  .drawer-checkbox:focus-visible,
  .drawer:focus-visible,
  [data-state-focus-trapped] .drawer {
    outline-color: Highlight;
  }
}

/* empty-state — reference CSS. A centred block where content would be;
   only the optional action is interactive and it takes the secondary
   button's states. Token variables only. */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-32) var(--space-16);
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-divider);
  border-radius: var(--radius-none);
  color: var(--color-text-muted);
  text-align: center;
}

.empty-state-glyph {
  color: var(--color-icon-decorative);
  font-size: var(--font-size-h1);
  line-height: var(--font-line-height-h1);
}

.empty-state-heading {
  margin: 0;
  color: var(--color-text-bright);
  font-size: var(--font-size-h2);
  line-height: var(--font-line-height-h2);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.empty-state-text {
  max-width: var(--layout-measure);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
  overflow-wrap: anywhere;
}

.empty-state-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--density-control-height, 32px);
  margin-top: var(--space-8);
  padding: 0 var(--density-control-padding-x, 12px);
  background: var(--color-action-secondary-bg);
  border: var(--border-width-default) solid var(--color-action-secondary-border);
  border-radius: var(--radius-none);
  color: var(--color-action-secondary-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* the block has only its default state; the matrix emits it as well */
[data-state-default] .empty-state {
  background: var(--color-surface-default);
}

.empty-state-action:hover {
  background: var(--color-action-secondary-hover-bg);
}

.empty-state-action:active {
  background: var(--color-action-secondary-pressed-bg);
  border-color: var(--color-border-active);
}

.empty-state-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (max-width: 320px) {
  .empty-state {
    padding: var(--space-16);
  }

  .empty-state-action {
    width: 100%;
    justify-content: center;
  }
}

@media (hover: none) {
  .empty-state-action:hover {
    background: var(--color-action-secondary-bg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .empty-state-action {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .empty-state-action:focus-visible {
    outline-color: Highlight;
  }
}

/* field — reference CSS. The wrapper owns the label, help and message; the
   control inside is styled by its own component. The minimal .field-input
   here is only what the demo needs. Every real pseudo-class is paired with
   the forced-state attribute the state matrix emits. Token variables only. */

.field {
  position: relative; /* the visually hidden help text in the invalid state stays inside the component */
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  color: var(--color-text-default);
}

.field-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.field-required {
  display: none;
  color: var(--color-status-danger-text);
}

.field-control {
  display: grid;
  min-width: 0;
}

.field-input {
  min-width: 0;
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  background: var(--color-surface-input);
  color: var(--color-text-default);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  font: inherit;
  outline: 0;
}

.field-input:focus-visible {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.field-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.field-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* required: the mark exists in the markup and shows with the attribute */
.field:has(:required) .field-required,
[data-state-required] .field-required {
  display: inline;
}

/* invalid: the control's 2px danger border, the message, help hidden visually */
.field:has([aria-invalid="true"]) .field-input,
[data-state-invalid] .field-input {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.field:has([aria-invalid="true"]) .field-message,
[data-state-invalid] .field-message {
  display: block;
}

.field:has([aria-invalid="true"]) .field-help,
[data-state-invalid] .field-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* disabled */
.field:has(:disabled) .field-label,
[data-state-disabled] .field-label {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.field-input:disabled,
[data-state-disabled] .field-input {
  background: var(--color-interaction-disabled-bg);
  color: var(--color-text-disabled);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

@media (forced-colors: active) {
  .field-input:focus-visible {
    outline-color: Highlight;
  }
}

/* fieldset — reference CSS. A divider border, a legend in text.bright and
   the fields stacked inside; disabled propagates natively and is paired
   with the forced-state attribute the state matrix emits. The minimal
   .fieldset-input here is only what the demo needs. Token variables only. */

.fieldset {
  min-width: 0;
  max-width: 28rem;
  margin: 0;
  padding: var(--space-12) var(--space-16) var(--space-16);
  border: var(--border-width-default) solid var(--color-border-divider);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
}

.fieldset-legend {
  padding: 0 var(--space-4);
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
  font-weight: var(--font-weight-bold);
}

.fieldset-body {
  display: grid;
  gap: var(--space-12);
  min-width: 0;
}

.fieldset-field {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.fieldset-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.fieldset-input {
  min-width: 0;
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  background: var(--color-surface-input);
  color: var(--color-text-default);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  font: inherit;
  outline: 0;
}

.fieldset-input:focus-visible {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.fieldset-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* disabled: the legend and labels dim; every control inside takes its own disabled treatment */
.fieldset:disabled .fieldset-legend,
.fieldset:disabled .fieldset-label,
[data-state-disabled] .fieldset-legend,
[data-state-disabled] .fieldset-label {
  color: var(--color-text-disabled);
}

.fieldset-input:disabled,
[data-state-disabled] .fieldset-input {
  background: var(--color-interaction-disabled-bg);
  color: var(--color-text-disabled);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

@media (forced-colors: active) {
  .fieldset-input:focus-visible {
    outline-color: Highlight;
  }
}

/* file-input — reference CSS. The native input stays focusable (sr-only
   pattern) and a second label is drawn as the secondary button. Every real
   pseudo-class is paired with the forced-state attribute the state matrix
   emits; [data-state-drop-target] is also the runtime hook a host sets on
   dragover. Token variables only. */

.file-input {
  position: relative;
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  color: var(--color-text-default);
}

.file-input-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.file-input-root {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  min-width: 0;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-none);
}

.file-input-zone {
  justify-content: center;
  padding: var(--space-16);
  border-style: dashed;
  border-color: var(--color-interaction-drop-target);
  text-align: center;
}

/* the native input keeps focus and the host chooser; it is only visually hidden */
.file-input-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.file-input-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  background: var(--color-action-secondary-bg);
  border: var(--border-width-default) solid var(--color-action-secondary-border);
  border-radius: var(--radius-none);
  color: var(--color-action-secondary-text);
  white-space: nowrap;
  cursor: pointer;
}

.file-input-status {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.file-input-drop-hint {
  display: none;
  color: var(--color-text-default);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* the static striped bar; no animation in any state */
.file-input-progress {
  display: none;
  height: var(--space-8);
  border: var(--border-width-default) solid var(--color-border-control);
  background: repeating-linear-gradient(
    45deg,
    var(--color-action-primary-bg) 0 var(--space-8),
    var(--color-interaction-pressed-bg) var(--space-8) var(--space-16)
  );
}

.file-input-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

.file-input-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--space-8);
  min-height: var(--density-row-height, 36px);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.file-input-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-input-size {
  color: var(--color-text-subtle);
  font-size: var(--font-size-ui-sm);
  font-variant-numeric: tabular-nums;
}

.file-input-remove {
  min-width: 24px;
  min-height: 24px;
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  color: var(--color-action-tertiary-text);
  font: inherit;
  cursor: pointer;
}

.file-input-remove:hover,
[data-state-hover] .file-input-remove {
  background: var(--color-action-tertiary-hover-bg);
}

.file-input-remove:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.file-input-error {
  grid-column: 1 / -1;
  padding-bottom: var(--space-4);
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.file-input-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.file-input-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover */
.file-input-button:hover,
[data-state-hover] .file-input-button {
  background: var(--color-action-secondary-hover-bg);
}

.file-input-button:active {
  background: var(--color-action-secondary-pressed-bg);
  border-color: var(--color-border-active);
}

/* focus-visible: the input has focus; the ring is drawn on its button label */
.file-input-root:has(.file-input-native:focus-visible) .file-input-button,
[data-state-focus-visible] .file-input-button {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* drop-target: the root fills with the marquee colour behind a dashed border */
[data-state-drop-target] .file-input-root {
  background: var(--color-interaction-marquee);
  border-style: dashed;
  border-color: var(--color-interaction-drop-target);
}

[data-state-drop-target] .file-input-status {
  display: none;
}

[data-state-drop-target] .file-input-drop-hint {
  display: inline;
}

/* invalid */
.file-input-root:has(.file-input-native[aria-invalid="true"]) .file-input-button,
[data-state-invalid] .file-input-button {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.file-input:has(.file-input-native[aria-invalid="true"]) .file-input-message,
[data-state-invalid] .file-input-message {
  display: block;
}

.file-input:has(.file-input-native[aria-invalid="true"]) .file-input-help,
[data-state-invalid] .file-input-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* invalid + focus-visible (not a declared cell; the pair stays honest) */
.file-input-root:has(.file-input-native[aria-invalid="true"]:focus-visible) .file-input-button,
[data-state-invalid][data-state-focus-visible] .file-input-button {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset-invalid);
}

/* disabled */
.file-input-root:has(.file-input-native:disabled) .file-input-button,
[data-state-disabled] .file-input-button {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.file-input-root:has(.file-input-native:disabled).file-input-zone,
[data-state-disabled] .file-input-zone {
  border-color: var(--color-border-disabled);
}

.file-input-root:has(.file-input-native:disabled) .file-input-status,
[data-state-disabled] .file-input-status,
[data-state-disabled] .file-input-remove {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

[data-state-disabled] .file-input-remove:hover {
  background: transparent;
}

/* loading: aria-busy on the root shows the static striped bar */
.file-input[aria-busy="true"] .file-input-progress,
[data-state-loading] .file-input-progress {
  display: block;
}

@media (hover: none) {
  .file-input-button:hover {
    background: var(--color-action-secondary-bg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .file-input-button,
  .file-input-root {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .file-input-root:has(.file-input-native:focus-visible) .file-input-button,
  [data-state-focus-visible] .file-input-button {
    outline-color: Highlight;
  }

  .file-input-progress {
    background: repeating-linear-gradient(45deg, CanvasText 0 var(--space-8), Canvas var(--space-8) var(--space-16));
  }
}

/* filterable-table — composed specimen. A toolbar holding a search-field,
   a filter menu button, a columns icon-button and a primary button; a row
   of removable filter chips; a selectable, sortable data-table with status
   badges; a count and a compact pagination. The composed components keep
   their own classes and CSS; this file adds layout and the forced-state
   selectors the state matrix emits. Because the matrix wrapper reaches
   every control in a cell, hover and focus-visible name one representative
   row and hold the toolbar and chips at rest, and selected names two rows
   plus the mixed select-all. Token variables only. */

.filterable-table {
  container-type: inline-size;
  container-name: filterable-table;
  display: grid;
  gap: var(--space-8);
  width: 56rem;
  max-width: 100%;
  min-width: 0;
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

/* the toolbar keeps its chrome surface; the search field is its first stop.
   Layout rules carry the root class so they outrank the components' own
   root rules whatever the stylesheet order. */
.filterable-table .filterable-table-toolbar {
  gap: var(--space-8);
  padding: var(--space-4) var(--space-8);
  overflow: visible;
}

.filterable-table .filterable-table-search {
  position: relative;
  flex: 1 1 12rem;
  max-width: 20rem;
  min-width: 0;
}

.filterable-table-search .search-field-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.filterable-table .filterable-table-filter {
  position: relative;
  flex: 0 0 auto;
}

.filterable-table .filterable-table-filter .menu-list {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
}

.filterable-table .filterable-table-new {
  margin-inline-start: auto;
}

.filterable-table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--density-gap, 4px);
  min-width: 0;
  padding: 0 var(--space-8);
}

/* the table scrolls inside its own container below its natural width */
.filterable-table-scroller {
  min-width: 0;
  overflow-x: auto;
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

.filterable-table-scroller .data-table {
  min-width: 44rem;
}

.filterable-table .filterable-table-empty {
  margin: 0 var(--space-8);
}

.filterable-table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 var(--space-8) var(--space-8);
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

.filterable-table-count {
  margin: var(--space-8) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
  font-variant-numeric: tabular-nums;
}

.filterable-table-count-none {
  display: none;
}

.filterable-table-footer .pagination {
  margin-top: var(--space-8);
}

/* below 600px the toolbar wraps and the search field spans the row */
@container filterable-table (width < 600px) {
  .filterable-table .filterable-table-toolbar {
    flex-wrap: wrap;
    min-height: 0;
  }

  .filterable-table .filterable-table-search {
    flex-basis: 100%;
    max-width: none;
  }
}

/* hover: the representative row takes the hover fill; the search box, the
   chips, the icon button and the primary button the matrix also reached stay at rest */
.filterable-table .data-table-body .filterable-table-demo-target:hover,
[data-state-hover] .filterable-table .filterable-table-demo-target {
  background: var(--color-interaction-hover-bg);
}

[data-state-hover] .filterable-table .search-field .search-field-root {
  background: var(--color-surface-input);
}

[data-state-hover] .filterable-table .chip .chip-remove {
  background: transparent;
  color: var(--color-text-muted);
}

[data-state-hover] .filterable-table .icon-button {
  background: var(--color-action-secondary-bg);
}

[data-state-hover] .filterable-table .filterable-table-new {
  --_bg: var(--color-action-primary-bg);
  --_fg: var(--color-action-primary-text);
}

/* focus-visible: the ring on the representative row */
[data-state-focus-visible] .filterable-table .filterable-table-demo-target {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

[data-state-focus-visible] .filterable-table .search-field .search-field-root {
  border-color: var(--color-border-control);
  outline: 0;
}

[data-state-focus-visible] .filterable-table .menu-button,
[data-state-focus-visible] .filterable-table .icon-button,
[data-state-focus-visible] .filterable-table .button,
[data-state-focus-visible] .filterable-table .chip .chip-remove {
  outline: 0;
}

/* selected: two rows carry the selection fill and a checked box; the
   select-all reports mixed; the chips the matrix also reached stay at rest */
[data-state-selected] .filterable-table .filterable-table-row-selected {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

[data-state-selected] .filterable-table .filterable-table-row-selected:hover {
  background: var(--color-interaction-selection-bg);
}

[data-state-selected] .filterable-table .filterable-table-row-selected .data-table-checkbox {
  background: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-border);
}

[data-state-selected] .filterable-table .filterable-table-row-selected .data-table-checkbox::before {
  content: "✓";
  color: var(--color-action-primary-text);
  font-size: var(--font-size-ui-sm);
  line-height: 1;
}

[data-state-selected] .filterable-table .data-table-select-all:not(:disabled) {
  background: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-border);
}

[data-state-selected] .filterable-table .data-table-select-all:not(:disabled) .data-table-check-glyph {
  display: inline;
}

[data-state-selected] .filterable-table .chip {
  background: var(--color-surface-default);
  border-color: var(--color-border-control);
  color: var(--color-text-default);
}

[data-state-selected] .filterable-table .chip .chip-remove {
  color: var(--color-text-muted);
}

/* no-results: the search field announces it, the body is the empty row and
   the count reads zero; the chips stay so the cause is visible */
[data-state-no-results] .filterable-table .data-table-body .data-table-row {
  display: none;
}

[data-state-no-results] .filterable-table .data-table-body .data-table-empty {
  display: table-row;
}

[data-state-no-results] .filterable-table .filterable-table-count-some {
  display: none;
}

[data-state-no-results] .filterable-table .filterable-table-count-none {
  display: inline;
}

@media (hover: none) {
  .filterable-table .data-table-body .filterable-table-demo-target:hover {
    background: transparent;
  }
}

@media (forced-colors: active) {
  .filterable-table {
    border-color: CanvasText;
  }

  [data-state-focus-visible] .filterable-table .filterable-table-demo-target {
    outline-color: Highlight;
  }

  [data-state-selected] .filterable-table .filterable-table-row-selected {
    background: Highlight;
    color: HighlightText;
  }
}

/* i3-window-frame — composed specimen. The workstation frame: an i3 bar
   with workspaces and i3status blocks, then a workspace holding the
   terminal and code-editor components as tiled, tabbed or floating windows
   behind i3 title bars. The two components keep their own classes and CSS;
   this file adds the bar, the title bars, the window borders, the gaps and
   the forced-state selectors the state matrix emits. The i3 geometry
   (28px bar, 23px titles, 14px inner and −2px outer gaps) is reproduced as
   private variables on the root: reference metrics of the workstation, not
   tokens and not a cross-application rule. Token variables only. */

.i3-window-frame {
  --_bar: 28px;
  --_title: 23px;
  --_gap: 14px;
  --_outer: -2px;
  container-type: inline-size;
  container-name: i3-window-frame;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 72rem;
  max-width: 100%;
  min-width: 0;
  background: var(--color-surface-desktop);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* the bar: workspaces at the start, i3status at the end */
.i3-window-frame-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--_bar);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--color-surface-chrome);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.i3-window-frame-workspaces {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}

.i3-window-frame-workspace {
  display: inline-flex;
  align-items: center;
  min-width: var(--space-32);
  min-height: var(--_bar);
  padding: 0 var(--space-8);
  background: transparent;
  border: 0;
  border-inline-end: var(--border-width-default) solid var(--color-border-divider);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

/* the visible workspace: the selection fill */
.i3-window-frame-workspace[aria-selected="true"] {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.i3-window-frame-workspace:hover {
  background: var(--color-interaction-hover-bg);
}

.i3-window-frame-workspace[aria-selected="true"]:hover {
  background: var(--color-interaction-selection-bg);
}

.i3-window-frame-workspace:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.i3-window-frame-workspace[aria-selected="true"]:focus-visible {
  outline-color: var(--color-interaction-focus-ring-container);
}

.i3-window-frame-workspace:focus:not(:focus-visible) {
  outline: 0;
}

/* the urgent mark exists in the markup and shows only for an urgent workspace */
.i3-window-frame-urgent-mark {
  display: none;
  padding-inline-start: var(--space-2);
}

.i3-window-frame-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-inline-end: var(--space-8);
  color: var(--color-text-default);
  white-space: nowrap;
}

.i3-window-frame-block {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-8);
  border-inline-start: var(--border-width-default) solid var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.i3-window-frame-glyph {
  color: var(--color-icon-decorative);
}

.i3-window-frame-clock {
  color: var(--color-text-bright);
}

/* the workspace: the desktop surface with the reference gaps; the outer
   gap is added to the inner one at the edges, as i3 does */
.i3-window-frame-area {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--_gap);
  min-width: 0;
  min-height: 18rem;
  padding: calc(var(--_gap) + var(--_outer));
  overflow: hidden;
  background: var(--color-surface-desktop);
}

/* a window: a 1px border.default frame around a title bar and its client */
.i3-window-frame-window,
.i3-window-frame-container {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--color-surface-canvas);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-none);
  outline: 0;
}

.i3-window-frame-title,
.i3-window-frame-tab {
  display: flex;
  align-items: center;
  min-height: var(--_title);
  padding: 0 var(--space-8);
  background: var(--color-surface-chrome);
  border: 0;
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
  border-radius: var(--radius-none);
  color: var(--color-text-muted);
  font: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the client fills the window; its own 1px boundary gives way to the frame */
.i3-window-frame-window > .terminal,
.i3-window-frame-window > .code-editor,
.i3-window-frame-panel > .terminal,
.i3-window-frame-panel > .code-editor {
  border: 0;
}

/* the focused window: border.active and a bright title */
.i3-window-frame-focused {
  border-color: var(--color-border-active);
}

.i3-window-frame-focused > .i3-window-frame-title {
  background: var(--color-surface-chrome-alt);
  color: var(--color-text-bright);
}

/* tabbed: one container whose title row is a tab list; the visible tab
   carries the 2px indicator and bright text */
.i3-window-frame-tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--color-surface-chrome);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.i3-window-frame-tab {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: calc(-1 * var(--border-width-default));
  border-bottom: var(--border-width-emphasis) solid transparent;
  cursor: pointer;
}

.i3-window-frame-tab[aria-selected="true"] {
  background: var(--color-surface-chrome-alt);
  border-bottom-color: var(--color-border-selected-indicator);
  color: var(--color-text-bright);
}

.i3-window-frame-tab:hover {
  background: var(--color-interaction-hover-bg);
}

.i3-window-frame-tab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.i3-window-frame-tab:focus:not(:focus-visible) {
  outline: 0;
}

/* the tabbed container is the only child of the workspace and spans it */
.i3-window-frame-container {
  grid-column: 1 / -1;
}

.i3-window-frame-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
}

.i3-window-frame-panel[hidden] {
  display: none;
}

/* floating: the tiled window fills the workspace; the floating one sits
   above it with the theme's only shadow and the overlay border */
.i3-window-frame-area-floating {
  grid-template-columns: minmax(0, 1fr);
  min-height: 27rem;
}

.i3-window-frame-floating {
  position: absolute;
  inset-inline-end: var(--space-24);
  top: var(--space-32);
  width: 60%;
  max-height: calc(100% - var(--space-48));
  border-color: var(--color-border-overlay);
  box-shadow: var(--shadow-floating);
  z-index: var(--z-raised);
}

/* the frame shrinks with its container: windows stack below 600px */
@container i3-window-frame (width < 600px) {
  .i3-window-frame-area {
    grid-template-columns: minmax(0, 1fr);
  }

  .i3-window-frame-floating {
    inset-inline-end: var(--space-8);
    width: 80%;
  }
}

/* focus-visible: the 2px container ring on the focused window or container;
   the client inside does not draw its own ring as well */
.i3-window-frame-focused:focus-visible,
[data-state-focus-visible] .i3-window-frame .i3-window-frame-focused {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

[data-state-focus-visible] .i3-window-frame .terminal,
[data-state-focus-visible] .i3-window-frame .code-editor {
  outline: 0;
}

/* the client of an unfocused window stays at rest: a hollow cursor, no caret, no current line */
[data-state-focus-visible] .i3-window-frame .i3-window-frame-window:not(.i3-window-frame-focused) .terminal-cursor {
  background: transparent;
  color: inherit;
  outline: var(--border-width-default) solid var(--color-terminal-cursor);
  outline-offset: calc(-1 * var(--border-width-default));
}

[data-state-focus-visible] .i3-window-frame .i3-window-frame-window:not(.i3-window-frame-focused) .code-editor-caret {
  display: none;
}

[data-state-focus-visible] .i3-window-frame .i3-window-frame-window:not(.i3-window-frame-focused) .code-editor-line-current {
  background: transparent;
}

[data-state-focus-visible] .i3-window-frame .i3-window-frame-window:not(.i3-window-frame-focused) .code-editor-line-current .code-editor-ln {
  background: var(--color-code-gutter-bg);
  color: var(--color-code-line-number);
}

/* selected: the second workspace becomes the visible one; the first drops
   to rest, and the text selections inside the clients stay at rest */
[data-state-selected] .i3-window-frame .i3-window-frame-workspace-demo-target {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

[data-state-selected] .i3-window-frame .i3-window-frame-workspace:not(.i3-window-frame-workspace-demo-target) {
  background: transparent;
  color: var(--color-text-default);
}

[data-state-selected] .i3-window-frame .terminal-sel,
[data-state-selected] .i3-window-frame .code-editor-sel {
  background: transparent;
}

[data-state-selected] .i3-window-frame .terminal-sel {
  color: var(--color-terminal-fg);
}

[data-state-selected] .i3-window-frame .terminal-sel.terminal-fg-3 {
  color: var(--color-terminal-ansi-3);
}

/* container-inactive: no window has focus; every frame and title is at rest
   and the tab indicator drops in lightness */
[data-state-container-inactive] .i3-window-frame .i3-window-frame-focused {
  border-color: var(--color-border-default);
  outline: 0;
}

[data-state-container-inactive] .i3-window-frame .i3-window-frame-focused > .i3-window-frame-title,
[data-state-container-inactive] .i3-window-frame .i3-window-frame-tab[aria-selected="true"] {
  background: var(--color-surface-chrome);
  color: var(--color-text-muted);
}

[data-state-container-inactive] .i3-window-frame .i3-window-frame-tab[aria-selected="true"] {
  border-bottom-color: var(--color-border-selected-indicator-inactive);
}

[data-state-container-inactive] .i3-window-frame .i3-window-frame-floating {
  border-color: var(--color-border-default);
}

/* error: the third workspace is urgent; the danger fill and the ! mark */
[data-state-error] .i3-window-frame .i3-window-frame-workspace-urgent {
  background: var(--color-status-danger-fill);
  color: var(--color-status-danger-on-fill);
}

[data-state-error] .i3-window-frame .i3-window-frame-urgent-mark {
  display: inline;
}

@media (hover: none) {
  .i3-window-frame-workspace:hover,
  .i3-window-frame-tab:hover {
    background: transparent;
  }

  .i3-window-frame-workspace[aria-selected="true"]:hover {
    background: var(--color-interaction-selection-bg);
  }

  .i3-window-frame-tab[aria-selected="true"]:hover {
    background: var(--color-surface-chrome-alt);
  }
}

@media (forced-colors: active) {
  .i3-window-frame,
  .i3-window-frame-window,
  .i3-window-frame-container {
    border-color: CanvasText;
  }

  .i3-window-frame-focused:focus-visible,
  [data-state-focus-visible] .i3-window-frame .i3-window-frame-focused {
    outline-color: Highlight;
  }

  .i3-window-frame-workspace[aria-selected="true"],
  [data-state-selected] .i3-window-frame .i3-window-frame-workspace-demo-target,
  [data-state-error] .i3-window-frame .i3-window-frame-workspace-urgent {
    background: Highlight;
    color: HighlightText;
  }

  .i3-window-frame-floating {
    box-shadow: none;
  }
}

/* icon-button — reference CSS. A square tertiary button; every real
   pseudo-class and aria-pressed is paired with the forced-state attribute
   the state matrix emits. Token variables only. */

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--density-control-height, 32px);
  height: var(--density-control-height, 32px);
  padding: 0;
  margin: 0;
  background: var(--color-action-secondary-bg);
  color: var(--color-action-tertiary-text);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-none);
  font: inherit;
  cursor: pointer;
  outline: 0;
}

.icon-button-icon {
  display: block;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  fill: none;
}

/* hover */
@media (hover: hover) {
  .icon-button:hover {
    background: var(--color-action-tertiary-hover-bg);
  }
}

[data-state-hover] .icon-button {
  background: var(--color-action-tertiary-hover-bg);
}

/* active */
.icon-button:active,
[data-state-active] .icon-button {
  background: var(--color-interaction-pressed-bg);
  border-color: var(--color-border-active);
}

/* focus-visible */
.icon-button:focus-visible,
[data-state-focus-visible] .icon-button {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* toggled: the selection fill, the indicator border and the filled icon form */
.icon-button[aria-pressed="true"],
[data-state-toggled] .icon-button {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
  border-color: var(--color-border-selected-indicator);
}

.icon-button[aria-pressed="true"] .icon-button-icon,
[data-state-toggled] .icon-button-icon {
  fill: currentColor;
}

/* toggled + focus-visible: the ring takes the on-fill colour */
.icon-button[aria-pressed="true"]:focus-visible,
[data-state-toggled][data-state-focus-visible] .icon-button {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* disabled */
.icon-button:disabled,
[data-state-disabled] .icon-button {
  background: var(--color-interaction-disabled-bg);
  color: var(--color-text-disabled);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.icon-button:disabled .icon-button-icon,
[data-state-disabled] .icon-button-icon {
  fill: none;
}

@media (prefers-reduced-motion: no-preference) {
  .icon-button {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .icon-button:focus-visible,
  [data-state-focus-visible] .icon-button {
    outline-color: Highlight;
  }

  .icon-button[aria-pressed="true"],
  [data-state-toggled] .icon-button {
    background: Highlight;
    color: HighlightText;
  }
}

/* link — reference CSS. The underline is the affordance; hover fills and
   thickens it; current swaps it for the 2px indicator bar. Every real
   pseudo-class is paired with the forced-state attribute the state matrix
   emits. Token variables only. */

.link-prose {
  margin: 0;
  max-width: 40rem;
  color: var(--color-text-default);
  font-size: var(--font-size-reading);
  line-height: var(--font-line-height-reading);
}

.link {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-color: var(--color-text-link-underline);
  text-decoration-thickness: var(--border-width-default);
  text-underline-offset: var(--space-2);
  border-radius: var(--radius-none);
  cursor: pointer;
  outline: 0;
}

.link-standalone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  min-height: var(--density-control-height, 32px);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

.link-icon {
  flex: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: currentColor;
  fill: none;
}

/* hover: the strong fill, the prose-white text, a 2px underline in the text colour */
@media (hover: hover) {
  .link:hover {
    background: var(--color-interaction-hover-bg-strong);
    color: var(--color-text-link-hover);
    text-decoration-color: currentColor;
    text-decoration-thickness: var(--border-width-emphasis);
  }
}

[data-state-hover] .link {
  background: var(--color-interaction-hover-bg-strong);
  color: var(--color-text-link-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--border-width-emphasis);
}

/* focus-visible */
.link:focus-visible,
[data-state-focus-visible] .link {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* visited: only colour may change in a real :visited rule */
.link:visited,
[data-state-visited] .link {
  color: var(--color-text-default);
}

/* current: the bar replaces the underline; no hover fill */
.link[aria-current="page"],
[data-state-current] .link {
  color: var(--color-text-bright);
  text-decoration: none;
  border-bottom: var(--border-width-emphasis) solid var(--color-border-selected-indicator);
  background: transparent;
}

@media (hover: hover) {
  .link[aria-current="page"]:hover {
    background: transparent;
    color: var(--color-text-bright);
  }
}

@media (forced-colors: active) {
  .link:focus-visible,
  [data-state-focus-visible] .link {
    outline-color: Highlight;
  }

  .link[aria-current="page"],
  [data-state-current] .link {
    border-bottom-color: Highlight;
  }
}

/* list — reference CSS. An APG listbox; the selected option is the
   selection fill with a check glyph, and the ring recolours on the fill.
   Every pseudo-class is paired with the forced-state attribute the state
   matrix emits. Token variables only. */

.list {
  min-width: 0;
  max-width: 28rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
}

.list-option {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--density-row-height, 36px);
  padding: var(--space-2) var(--density-control-padding-x, 12px);
  box-sizing: border-box;
  border-top: var(--border-width-default) solid var(--color-border-divider);
  color: var(--color-text-default);
  cursor: pointer;
}

.list-option:first-child {
  border-top: 0;
}

.list-check {
  display: inline-flex;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--density-icon, 16px);
  color: var(--color-interaction-selection-text);
  visibility: hidden;
}

.list-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.list-meta {
  flex: 0 0 auto;
  padding-inline-start: var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
  font-variant-numeric: tabular-nums;
}

/* hover */
.list-option:hover,
[data-state-hover] .list-option-demo-target {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible */
.list-option:focus-visible,
[data-state-focus-visible] .list-option-demo-target {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.list-option:focus:not(:focus-visible) {
  outline: 0;
}

/* selected: the fill; the glyph shows; every part takes the on-fill text */
.list-option[aria-selected="true"],
[data-state-selected] .list-option-demo-target {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.list-option[aria-selected="true"] .list-check,
[data-state-selected] .list-option-demo-target .list-check {
  visibility: visible;
}

.list-option[aria-selected="true"] .list-meta,
[data-state-selected] .list-option-demo-target .list-meta {
  color: var(--color-interaction-selection-text);
}

.list-option[aria-selected="true"]:hover,
[data-state-selected] .list-option-demo-target:hover {
  background: var(--color-interaction-selection-bg);
}

/* selected + focus-visible: the ring takes the on-fill colour */
.list-option[aria-selected="true"]:focus-visible,
[data-state-selected][data-state-focus-visible] .list-option-demo-target {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* selected, container inactive: the dimmer fill, no ring */
.list[data-container-inactive] .list-option[aria-selected="true"],
[data-state-selected][data-state-container-inactive] .list-option-demo-target {
  background: var(--color-interaction-selection-inactive-bg);
  color: var(--color-interaction-selection-inactive-text);
  outline: 0;
}

.list[data-container-inactive] .list-option[aria-selected="true"] .list-check,
.list[data-container-inactive] .list-option[aria-selected="true"] .list-meta,
[data-state-selected][data-state-container-inactive] .list-option-demo-target .list-check,
[data-state-selected][data-state-container-inactive] .list-option-demo-target .list-meta {
  color: var(--color-interaction-selection-inactive-text);
}

/* disabled: aria-disabled; never opacity */
.list-option[aria-disabled="true"],
[data-state-disabled] .list-option {
  background: transparent;
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.list-option[aria-disabled="true"] .list-meta,
[data-state-disabled] .list-meta {
  color: var(--color-text-disabled);
}

.list-option[aria-disabled="true"]:hover,
[data-state-disabled] .list-option:hover {
  background: transparent;
}

[data-state-disabled] .list-option[aria-selected="true"] .list-check {
  color: var(--color-text-disabled);
}

@media (hover: none) {
  .list-option:hover {
    background: transparent;
  }

  .list-option[aria-selected="true"]:hover {
    background: var(--color-interaction-selection-bg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .list-option {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .list-option:focus-visible,
  [data-state-focus-visible] .list-option-demo-target {
    outline-color: Highlight;
  }

  .list-option[aria-selected="true"],
  [data-state-selected] .list-option-demo-target {
    background: Highlight;
    color: HighlightText;
  }
}

/* loading-indicator — reference CSS. A static glyph and a label in a busy
   container; nothing animates, so reduced motion changes nothing. Token
   variables only. */

.loading-indicator {
  color: var(--color-text-default);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

.loading-indicator-inline {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-4);
  min-width: 0;
}

.loading-indicator-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: calc(3 * var(--density-row-height, 36px));
  padding: var(--space-16);
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-divider);
  border-radius: var(--radius-none);
  text-align: center;
}

.loading-indicator-glyph {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--space-1);
}

.loading-indicator-block .loading-indicator-glyph {
  font-size: var(--font-size-h1);
  line-height: var(--font-line-height-h1);
}

.loading-indicator-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* aria-busy is the state; the matrix adds it on the root as well */
.loading-indicator[aria-busy="true"] .loading-indicator-glyph,
[data-state-default] .loading-indicator-glyph {
  display: inline;
}

/* reduced-motion: there is no motion to remove; the rule states it */
@media (prefers-reduced-motion: reduce) {
  .loading-indicator,
  .loading-indicator-glyph {
    animation: none;
    transition: none;
  }
}

[data-state-reduced-motion] .loading-indicator,
[data-state-reduced-motion] .loading-indicator-glyph {
  animation: none;
  transition: none;
}

/* menu — reference CSS. A menu button and its list rendered open in flow;
   hosts position the list at z.popover. The active item is the selection
   fill. Every pseudo-class is paired with the forced-state attribute the
   state matrix emits. Token variables only. */

.menu {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  min-width: 0;
  color: var(--color-text-default);
}

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.menu-chevron,
.menu-submenu {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-icon-decorative);
}

.menu-chevron svg,
.menu-submenu svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
}

.menu-list {
  min-width: 12rem;
  max-width: calc(100vw - var(--space-16));
  margin: 0;
  padding: var(--space-4) 0;
  list-style: none;
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border-overlay);
  border-radius: var(--radius-none);
  z-index: var(--z-popover);
}

.menu-list[hidden] {
  display: none;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--density-row-height, 36px);
  padding: 0 var(--density-control-padding-x, 12px);
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.menu-check {
  display: inline-flex;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--density-icon, 16px);
  color: var(--color-text-bright);
  visibility: hidden;
}

.menu-label {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-shortcut {
  flex: 0 0 auto;
  padding-inline-start: var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.menu-separator {
  height: 0;
  margin: var(--space-4) 0;
  border: 0;
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

/* hover: items take the strong hover fill and the link-hover text */
.menu-button:hover {
  background: var(--color-interaction-hover-bg);
}

.menu-item:hover,
[data-state-hover] .menu-item-demo-target {
  background: var(--color-interaction-hover-bg-strong);
  color: var(--color-text-link-hover);
}

.menu-item:hover .menu-shortcut,
[data-state-hover] .menu-item-demo-target .menu-shortcut {
  color: var(--color-text-link-hover);
}

/* focus-visible: the ring on the button; on items it follows the fill */
.menu-button:focus-visible,
[data-state-focus-visible] .menu-button {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.menu-item:focus-visible {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

.menu-button:focus:not(:focus-visible),
.menu-item:focus:not(:focus-visible) {
  outline: 0;
}

/* open / closed */
.menu-button[aria-expanded="true"],
[data-state-open] .menu-button {
  background: var(--color-interaction-pressed-bg);
  border-color: var(--color-border-active);
}

[data-state-open] .menu-list {
  display: block;
}

[data-state-closed] .menu-button {
  background: var(--color-surface-default);
  border-color: var(--color-border-control);
}

[data-state-closed] .menu-list {
  display: none;
}

/* selected: the active item is the selection fill */
.menu-item:focus,
.menu-item[aria-selected="true"],
[data-state-selected] .menu-item-demo-target {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.menu-item:focus .menu-shortcut,
.menu-item:focus .menu-check,
.menu-item:focus .menu-submenu,
[data-state-selected] .menu-item-demo-target .menu-shortcut,
[data-state-selected] .menu-item-demo-target .menu-check,
[data-state-selected] .menu-item-demo-target .menu-submenu {
  color: var(--color-interaction-selection-text);
}

/* checked: the glyph shows */
.menu-item[aria-checked="true"] .menu-check,
[data-state-checked] .menu-item-demo-target .menu-check {
  visibility: visible;
}

/* disabled: never opacity */
.menu-item:disabled,
.menu-item[aria-disabled="true"],
[data-state-disabled] .menu-item,
.menu-button:disabled,
[data-state-disabled] .menu-button {
  background: transparent;
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.menu-item[aria-disabled="true"] .menu-shortcut,
.menu-item[aria-disabled="true"] .menu-check,
.menu-item[aria-disabled="true"] .menu-submenu,
[data-state-disabled] .menu-shortcut,
[data-state-disabled] .menu-check,
[data-state-disabled] .menu-submenu,
[data-state-disabled] .menu-chevron {
  color: var(--color-text-disabled);
}

.menu-button:disabled,
[data-state-disabled] .menu-button {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
}

.menu-item[aria-disabled="true"]:hover,
[data-state-disabled] .menu-item:hover {
  background: transparent;
  color: var(--color-text-disabled);
}

@media (hover: none) {
  .menu-item:hover {
    background: transparent;
    color: var(--color-text-default);
  }

  .menu-button:hover {
    background: var(--color-surface-default);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .menu-item,
  .menu-button {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .menu-button:focus-visible,
  [data-state-focus-visible] .menu-button,
  .menu-item:focus-visible {
    outline-color: Highlight;
  }

  .menu-item:focus,
  [data-state-selected] .menu-item-demo-target {
    background: Highlight;
    color: HighlightText;
  }
}

/* number-field — reference CSS. The text-field box around a native number
   input, the host spinner hidden and replaced by two square stepper
   buttons. Every real pseudo-class is paired with the forced-state
   attribute the state matrix emits. Token variables only. */

.number-field {
  position: relative; /* the visually hidden help text in the invalid state stays inside the component */
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 20rem;
  color: var(--color-text-default);
}

.number-field-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.number-field-root {
  display: flex;
  align-items: stretch;
  min-height: var(--density-control-height, 32px);
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.number-field-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--density-control-padding-x, 12px);
  background: transparent;
  border: 0;
  color: var(--color-text-default);
  caret-color: var(--color-code-caret);
  font: inherit;
  text-align: end;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  outline: 0;
}

.number-field-input::-webkit-inner-spin-button,
.number-field-input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.number-field-input::selection {
  background: var(--color-interaction-text-selection-bg);
  color: var(--color-interaction-text-selection-text);
}

.number-field-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-8);
  color: var(--color-text-muted);
  border-inline-start: var(--border-width-default) solid var(--color-border-divider);
  white-space: nowrap;
}

.number-field-stepper {
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-width: var(--space-24);
  border-inline-start: var(--border-width-default) solid var(--color-border-divider);
}

.number-field-action {
  min-width: var(--space-24);
  padding: 0 var(--space-4);
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-action-tertiary-text);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  outline: 0;
}

.number-field-action + .number-field-action {
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

.number-field-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.number-field-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover */
@media (hover: hover) {
  .number-field-root:hover {
    background: var(--color-interaction-hover-bg);
  }

  .number-field-action:hover:not(:disabled) {
    background: var(--color-action-tertiary-hover-bg);
  }
}

[data-state-hover] .number-field-root {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible: on the box for the input, on the button for a stepper */
.number-field-root:has(.number-field-input:focus-visible),
[data-state-focus-visible] .number-field-root {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.number-field-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* invalid */
.number-field-root:has(.number-field-input[aria-invalid="true"]),
.number-field-root:has(.number-field-input:user-invalid),
[data-state-invalid] .number-field-root {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.number-field:has(.number-field-input[aria-invalid="true"]) .number-field-message,
.number-field:has(.number-field-input:user-invalid) .number-field-message,
[data-state-invalid] .number-field-message {
  display: block;
}

.number-field:has(.number-field-input[aria-invalid="true"]) .number-field-help,
[data-state-invalid] .number-field-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* invalid + focus-visible */
.number-field-root:has(.number-field-input[aria-invalid="true"]:focus-visible),
[data-state-invalid][data-state-focus-visible] .number-field-root {
  border-color: var(--color-status-danger-border);
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset-invalid);
}

/* disabled */
.number-field-root:has(.number-field-input:disabled),
[data-state-disabled] .number-field-root {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.number-field-input:disabled,
.number-field-root:has(.number-field-input:disabled) .number-field-unit,
.number-field-action:disabled,
[data-state-disabled] .number-field-input,
[data-state-disabled] .number-field-unit,
[data-state-disabled] .number-field-action {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.number-field:has(.number-field-input:disabled) .number-field-label,
[data-state-disabled] .number-field-label {
  color: var(--color-text-disabled);
}

/* read-only: no box, a dotted bottom edge on the canvas, no stepper */
.number-field-root:has(.number-field-input:read-only:not(:disabled)),
[data-state-read-only] .number-field-root {
  background: var(--color-surface-canvas);
  border-color: transparent;
  border-bottom: var(--border-width-default) dotted var(--color-border-divider);
}

.number-field-root:has(.number-field-input:read-only) .number-field-stepper,
[data-state-read-only] .number-field-stepper {
  display: none;
}

.number-field-root:has(.number-field-input:read-only:focus-visible),
[data-state-read-only][data-state-focus-visible] .number-field-root {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (forced-colors: active) {
  .number-field-root:has(.number-field-input:focus-visible),
  .number-field-action:focus-visible,
  [data-state-focus-visible] .number-field-root {
    outline-color: Highlight;
  }
}

/* pagination — reference CSS. Square page links with no border; the
   current page is the selection fill. Every pseudo-class is paired with the
   forced-state attribute the state matrix emits. Token variables only. */

.pagination {
  min-width: 0;
  color: var(--color-text-default);
  background: var(--color-surface-default);
}

.pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--density-gap, 4px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination-compact .pagination-list {
  flex-wrap: nowrap;
}

.pagination-item {
  display: inline-flex;
  min-width: 0;
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--density-control-height, 32px);
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--space-8);
  background: transparent;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pagination-edge {
  padding: 0 var(--density-control-padding-x, 12px);
}

.pagination-glyph {
  padding-inline: var(--space-2);
}

.pagination-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--density-control-height, 32px);
  min-height: var(--density-control-height, 32px);
  color: var(--color-text-muted);
  user-select: none;
}

.pagination-status {
  display: inline-flex;
  align-items: center;
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--space-8);
  color: var(--color-text-default);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pagination-status-current {
  padding-inline-end: var(--space-4);
  color: var(--color-text-bright);
  font-weight: var(--font-weight-bold);
}

/* hover */
.pagination-link:hover,
[data-state-hover] .pagination-link-demo-target {
  background: var(--color-interaction-hover-bg);
}

/* pressed */
.pagination-link:active {
  background: var(--color-interaction-pressed-bg);
}

/* focus-visible */
.pagination-link:focus-visible,
[data-state-focus-visible] .pagination-link-demo-target {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.pagination-link:focus:not(:focus-visible) {
  outline: 0;
}

/* current: the selection fill; the ring recolours on it */
.pagination-link[aria-current="page"],
[data-state-current] .pagination-current {
  background: var(--color-interaction-selection-bg);
  color: var(--color-text-on-selection);
}

.pagination-link[aria-current="page"]:hover,
[data-state-current] .pagination-current:hover {
  background: var(--color-interaction-selection-bg);
}

.pagination-link[aria-current="page"]:focus-visible {
  outline-color: var(--color-interaction-focus-ring-container);
}

/* disabled ends: no href, aria-disabled, never opacity */
.pagination-link[aria-disabled="true"],
[data-state-disabled] .pagination-edge {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.pagination-link[aria-disabled="true"]:hover,
[data-state-disabled] .pagination-edge:hover {
  background: transparent;
}

@media (hover: none) {
  .pagination-link:hover {
    background: transparent;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pagination-link {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .pagination-link:focus-visible,
  [data-state-focus-visible] .pagination-link-demo-target {
    outline-color: Highlight;
  }

  .pagination-link[aria-current="page"],
  [data-state-current] .pagination-current {
    background: Highlight;
    color: HighlightText;
  }
}

/* progress — reference CSS. A native <progress> with the track and fill
   restyled; indeterminate work shows static stripes. Nothing animates in any
   state. [data-state-error] is also the runtime hook a host sets on the root
   when the task fails. Token variables only. */

.progress {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  color: var(--color-text-default);
  --_stripes: repeating-linear-gradient(
    45deg,
    var(--color-action-primary-bg) 0 var(--space-8),
    var(--color-interaction-pressed-bg) var(--space-8) var(--space-16)
  );
}

.progress-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.progress-label {
  color: var(--color-text-bright);
}

.progress-error-glyph {
  display: none;
  color: var(--color-status-danger-text);
  font-weight: var(--font-weight-bold);
}

.progress-value {
  color: var(--color-text-default);
  font-variant-numeric: tabular-nums;
}

.progress-bar {
  display: block;
  width: 100%;
  height: var(--space-8);
  appearance: none;
  background: var(--color-interaction-pressed-bg);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-action-primary-bg);
  overflow: hidden;
}

.progress-bar::-webkit-progress-bar {
  background: var(--color-interaction-pressed-bg);
  border-radius: var(--radius-none);
}

.progress-bar::-webkit-progress-value {
  background: var(--color-action-primary-bg);
  border-radius: var(--radius-none);
}

.progress-bar::-moz-progress-bar {
  background: var(--color-action-primary-bg);
  border-radius: var(--radius-none);
}

/* busy / indeterminate: static stripes across the whole track */
.progress-bar:indeterminate,
[data-state-busy] .progress-bar {
  background: var(--_stripes);
}

.progress-bar:indeterminate::-webkit-progress-bar,
[data-state-busy] .progress-bar::-webkit-progress-bar {
  background: var(--_stripes);
}

.progress-bar:indeterminate::-webkit-progress-value,
[data-state-busy] .progress-bar::-webkit-progress-value {
  background: transparent;
}

.progress-bar:indeterminate::-moz-progress-bar,
[data-state-busy] .progress-bar::-moz-progress-bar {
  background: transparent;
}

[data-state-busy] .progress-value {
  display: none;
}

/* error: the danger fill and the ✕ glyph in the label */
.progress[data-state-error] .progress-bar,
[data-state-error] .progress-bar {
  color: var(--color-status-danger-fill);
}

[data-state-error] .progress-bar::-webkit-progress-value {
  background: var(--color-status-danger-fill);
}

[data-state-error] .progress-bar::-moz-progress-bar {
  background: var(--color-status-danger-fill);
}

[data-state-error] .progress-error-glyph {
  display: inline;
}

.progress-detail {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* reduced-motion: there is no motion to remove; the rule states it */
@media (prefers-reduced-motion: reduce) {
  .progress-bar,
  .progress-bar::-webkit-progress-bar,
  .progress-bar::-webkit-progress-value {
    animation: none;
    transition: none;
  }
}

[data-state-reduced-motion] .progress-bar,
[data-state-reduced-motion] .progress-bar::-webkit-progress-bar,
[data-state-reduced-motion] .progress-bar::-webkit-progress-value {
  animation: none;
  transition: none;
}

@media (forced-colors: active) {
  .progress-bar {
    border-color: CanvasText;
  }

  .progress-bar:indeterminate,
  [data-state-busy] .progress-bar,
  .progress-bar:indeterminate::-webkit-progress-bar,
  [data-state-busy] .progress-bar::-webkit-progress-bar {
    background: repeating-linear-gradient(45deg, CanvasText 0 var(--space-8), Canvas var(--space-8) var(--space-16));
  }
}

/* radio-group — reference CSS. The native radio, appearance none, is a
   square box; the inner square stacks over it in the same 16px cell. Every
   real pseudo-class is paired with the forced-state attribute the state
   matrix emits. Token variables only. */

.radio-group {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text-default);
}

.radio-group-legend {
  padding: 0;
  margin-bottom: var(--space-4);
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.radio-group-required {
  display: none;
  color: var(--color-status-danger-text);
}

.radio-group-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.radio-group-horizontal .radio-group-options {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-16);
}

.radio-group-option {
  display: grid;
  grid-template-columns: var(--icon-size-md) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
  min-height: var(--space-24);
  padding: var(--space-4) 0;
  cursor: pointer;
}

.radio-group-control {
  display: inline-grid;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.radio-group-control > * {
  grid-area: 1 / 1;
}

.radio-group-input {
  appearance: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  margin: 0;
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  cursor: pointer;
  outline: 0;
}

.radio-group-dot {
  display: none;
  width: var(--space-8);
  height: var(--space-8);
  margin: var(--space-4);
  background: var(--color-action-primary-text);
  pointer-events: none;
}

.radio-group-text {
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

.radio-group-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover: the box fill only, on hover-capable pointers */
@media (hover: hover) {
  .radio-group-option:hover .radio-group-input:not(:disabled) {
    background: var(--color-interaction-hover-bg);
  }

  .radio-group-option:hover .radio-group-input:checked:not(:disabled) {
    background: var(--color-action-primary-hover-bg);
  }
}

[data-state-hover] .radio-group-input {
  background: var(--color-interaction-hover-bg);
}

/* checked: the primary fill and the inner square; the border stays border.control */
.radio-group-input:checked,
[data-state-checked] .radio-group-input {
  background: var(--color-action-primary-bg);
}

.radio-group-input:checked ~ .radio-group-dot,
[data-state-checked] .radio-group-dot {
  display: block;
}

[data-state-hover][data-state-checked] .radio-group-input {
  background: var(--color-action-primary-hover-bg);
}

/* focus-visible */
.radio-group-input:focus-visible,
[data-state-focus-visible] .radio-group-input {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* checked + focus-visible: the ring takes the on-fill colour */
.radio-group-input:checked:focus-visible,
[data-state-checked][data-state-focus-visible] .radio-group-input {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* required */
.radio-group:has(.radio-group-input:required) .radio-group-required,
[data-state-required] .radio-group-required {
  display: inline;
}

/* invalid */
.radio-group-input[aria-invalid="true"],
[data-state-invalid] .radio-group-input {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.radio-group:has(.radio-group-input[aria-invalid="true"]) .radio-group-message,
[data-state-invalid] .radio-group-message {
  display: block;
}

/* disabled */
.radio-group-input:disabled,
[data-state-disabled] .radio-group-input {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.radio-group-input:disabled ~ .radio-group-dot,
[data-state-disabled] .radio-group-dot {
  background: var(--color-text-disabled);
}

.radio-group-option:has(.radio-group-input:disabled),
[data-state-disabled] .radio-group-option {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.radio-group:disabled .radio-group-legend,
[data-state-disabled] .radio-group-legend {
  color: var(--color-text-disabled);
}

@media (forced-colors: active) {
  .radio-group-input:focus-visible,
  [data-state-focus-visible] .radio-group-input {
    outline-color: Highlight;
  }

  .radio-group-input:checked,
  [data-state-checked] .radio-group-input {
    background: Highlight;
  }

  .radio-group-dot {
    background: HighlightText;
  }
}

/* search-field — reference CSS. The text-field box around a native search
   input with a magnifier, a clear button, a shortcut hint, a loading glyph
   and a status line. Every real pseudo-class and attribute is paired with
   the forced-state attribute the state matrix emits. Token variables only. */

.search-field {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  color: var(--color-text-default);
}

.search-field-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.search-field-root {
  display: flex;
  align-items: center;
  min-height: var(--density-control-height, 32px);
  padding-inline-start: var(--space-8);
  background: var(--color-surface-input);
  color: var(--color-icon-default);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.search-field-icon {
  flex: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: currentColor;
  fill: none;
}

.search-field-loading {
  display: none;
  flex: none;
  width: var(--icon-size-md);
  color: var(--color-text-muted);
  text-align: center;
}

.search-field-input {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  padding: 0 var(--space-8);
  background: transparent;
  border: 0;
  color: var(--color-text-default);
  caret-color: var(--color-code-caret);
  font: inherit;
  appearance: none;
  outline: 0;
}

.search-field-input::placeholder {
  color: var(--color-text-placeholder);
  font-style: italic;
  opacity: 1;
}

.search-field-input::selection {
  background: var(--color-interaction-text-selection-bg);
  color: var(--color-interaction-text-selection-text);
}

.search-field-input::-webkit-search-cancel-button,
.search-field-input::-webkit-search-decoration {
  appearance: none;
  display: none;
}

.search-field-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: stretch;
  min-width: var(--space-24);
  padding: 0 var(--space-4);
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-action-tertiary-text);
  font: inherit;
  cursor: pointer;
  outline: 0;
}

.search-field-clear svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: currentColor;
  fill: none;
}

.search-field-kbd {
  flex: none;
  margin-inline-end: var(--space-8);
  padding: 0 var(--space-4);
  color: var(--color-text-muted);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-none);
  font: inherit;
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.search-field-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.search-field-status {
  display: none;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover */
@media (hover: hover) {
  .search-field-root:hover {
    background: var(--color-interaction-hover-bg);
  }

  .search-field-clear:hover:not(:disabled) {
    background: var(--color-action-tertiary-hover-bg);
  }
}

[data-state-hover] .search-field-root {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible: the ring on the box; the hint hides while typing */
.search-field-root:has(.search-field-input:focus-visible),
[data-state-focus-visible] .search-field-root {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.search-field-root:has(.search-field-input:focus) .search-field-kbd,
[data-state-focus-visible] .search-field-kbd {
  display: none;
}

.search-field-clear:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* placeholder-shown: the matrix strips the value; the clear button leaves with it */
.search-field-input:placeholder-shown ~ .search-field-clear,
[data-state-placeholder-shown] .search-field-clear {
  display: none;
}

/* filled: the demo already carries a value, so the clear button is present */

/* loading: the glyph takes the magnifier's slot */
.search-field[aria-busy="true"] .search-field-icon,
[data-state-loading] .search-field-icon {
  display: none;
}

.search-field[aria-busy="true"] .search-field-loading,
[data-state-loading] .search-field-loading {
  display: inline-block;
}

/* no-results: the host sets data-results="none" and fills the status line */
.search-field[data-results="none"] .search-field-status,
[data-state-no-results] .search-field-status {
  display: block;
}

/* disabled */
.search-field-root:has(.search-field-input:disabled),
[data-state-disabled] .search-field-root {
  background: var(--color-interaction-disabled-bg);
  color: var(--color-text-disabled);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.search-field-input:disabled,
[data-state-disabled] .search-field-input,
[data-state-disabled] .search-field-kbd {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.search-field-root:has(.search-field-input:disabled) .search-field-clear,
[data-state-disabled] .search-field-clear {
  display: none;
}

.search-field:has(.search-field-input:disabled) .search-field-label,
[data-state-disabled] .search-field-label {
  color: var(--color-text-disabled);
}

@media (forced-colors: active) {
  .search-field-root:has(.search-field-input:focus-visible),
  .search-field-clear:focus-visible,
  [data-state-focus-visible] .search-field-root {
    outline-color: Highlight;
  }
}

/* select — reference CSS. The text-field box around a native <select>
   with the host chevron replaced by a line icon; the open popup stays
   host-rendered. Every real pseudo-class is paired with the forced-state
   attribute the state matrix emits. Token variables only. */

.select {
  position: relative; /* the visually hidden help text in the invalid state stays inside the component */
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  color: var(--color-text-default);
}

.select-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.select-required {
  display: none;
  color: var(--color-status-danger-text);
}

.select-root {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: var(--density-control-height, 32px);
  background: var(--color-surface-input);
  color: var(--color-icon-default);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.select-control {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--density-control-height, 32px) - 2 * var(--border-width-default));
  padding: 0 calc(var(--density-control-padding-x, 12px) + var(--icon-size-md) + var(--space-4)) 0 var(--density-control-padding-x, 12px);
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  cursor: default;
  outline: 0;
}

.select-control-multiple {
  padding: var(--space-2) 0;
  overflow-y: auto;
}

.select-control option,
.select-control optgroup {
  background: var(--color-surface-raised);
  color: var(--color-text-default);
  font: inherit;
  font-style: normal;
}

.select-control option {
  padding: 0 var(--density-control-padding-x, 12px);
  min-height: var(--density-row-height, 36px);
}

.select-control optgroup {
  color: var(--color-text-muted);
}

.select-control option:checked {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.select-chevron {
  position: absolute;
  inset-inline-end: var(--density-control-padding-x, 12px);
  top: 50%;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  margin-top: calc(var(--icon-size-md) / -2);
  stroke: currentColor;
  fill: none;
  pointer-events: none;
}

.select-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.select-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover */
@media (hover: hover) {
  .select-root:hover {
    background: var(--color-interaction-hover-bg);
  }
}

[data-state-hover] .select-root {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible */
.select-root:has(.select-control:focus-visible),
[data-state-focus-visible] .select-root {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* required */
.select:has(.select-control:required) .select-required,
[data-state-required] .select-required {
  display: inline;
}

/* invalid */
.select-root:has(.select-control[aria-invalid="true"]),
.select-root:has(.select-control:user-invalid),
[data-state-invalid] .select-root {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.select:has(.select-control[aria-invalid="true"]) .select-message,
.select:has(.select-control:user-invalid) .select-message,
[data-state-invalid] .select-message {
  display: block;
}

.select:has(.select-control[aria-invalid="true"]) .select-help,
[data-state-invalid] .select-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* invalid + focus-visible */
.select-root:has(.select-control[aria-invalid="true"]:focus-visible),
[data-state-invalid][data-state-focus-visible] .select-root {
  border-color: var(--color-status-danger-border);
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset-invalid);
}

/* disabled */
.select-root:has(.select-control:disabled),
[data-state-disabled] .select-root {
  background: var(--color-interaction-disabled-bg);
  color: var(--color-text-disabled);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.select-control:disabled,
[data-state-disabled] .select-control {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.select:has(.select-control:disabled) .select-label,
[data-state-disabled] .select-label {
  color: var(--color-text-disabled);
}

@media (forced-colors: active) {
  .select-root:has(.select-control:focus-visible),
  [data-state-focus-visible] .select-root {
    outline-color: Highlight;
  }
}

/* Chromium's user-agent sheet fades a disabled select to 0.7; disabled is colour, never opacity */
.select-control:disabled,
[data-state-disabled] .select-control {
  opacity: 1;
}

/* settings-panel — composed specimen. A sidebar-nav beside a form column
   built from the switch, select, radio-group, text-field, checkbox, fieldset
   and button components, which keep their own classes and CSS. This file
   adds only the layout, the container-query collapse of the sidebar into a
   tab strip, and the forced-state selectors the state matrix emits. Because
   the matrix wrapper reaches every composed control, each forced state names
   one representative control and withholds the reused styling from the rest.
   Token variables only. */

.settings-panel {
  container-type: inline-size;
  container-name: settings-panel;
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  width: 56rem;
  max-width: 100%;
  min-width: 0;
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

/* the narrow variant pins the root below the collapse breakpoint */
.settings-panel-narrow {
  width: 360px;
}

.settings-panel-nav {
  min-width: 0;
}

.settings-panel-nav .sidebar-nav {
  height: 100%;
  max-width: none;
}

.settings-panel-content {
  display: grid;
  gap: var(--space-16);
  min-width: 0;
  padding: var(--space-16);
}

.settings-panel-title {
  margin: 0;
  color: var(--color-text-bright);
  font-size: var(--font-size-h2);
  line-height: var(--font-line-height-h2);
  font-weight: var(--font-weight-bold);
}

.settings-panel-lead {
  margin: calc(-1 * var(--space-8)) 0 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* layout rules carry the root class so they outrank the components' own
   root rules whatever the stylesheet order */
.settings-panel .settings-panel-group {
  max-width: none;
}

.settings-panel-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-top: var(--space-12);
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

/* below 600px the sidebar becomes a tab-style strip above the form:
   the current link keeps its 2px indicator, now along the bottom edge */
@container settings-panel (width < 600px) {
  .settings-panel-nav {
    grid-column: 1 / -1;
  }

  .settings-panel-content {
    grid-column: 1 / -1;
  }

  .settings-panel-nav .sidebar-nav {
    height: auto;
    padding: 0;
    border-inline-end: 0;
    border-bottom: var(--border-width-default) solid var(--color-border-divider);
  }

  .settings-panel-nav .sidebar-nav-list {
    display: flex;
    gap: var(--density-gap, 4px);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .settings-panel-nav .sidebar-nav-item {
    flex: 0 0 auto;
  }

  .settings-panel-nav .sidebar-nav-link {
    width: auto;
    min-height: var(--density-control-height, 32px);
    padding: 0 var(--density-control-padding-x, 12px);
    margin-bottom: calc(-1 * var(--border-width-default));
    border-inline-start: 0;
    border-bottom: var(--border-width-emphasis) solid transparent;
    white-space: nowrap;
  }

  .settings-panel-nav .sidebar-nav-link[aria-current="page"] {
    border-bottom-color: var(--color-border-selected-indicator);
  }

  .settings-panel-nav .sidebar-nav-icon {
    display: none;
  }
}

/* focus-visible: the ring on the representative control (the first switch);
   every other composed control stays at rest */
[data-state-focus-visible] .settings-panel .text-field-root,
[data-state-focus-visible] .settings-panel .select-root {
  border-color: var(--color-border-control);
  outline: 0;
}

[data-state-focus-visible] .settings-panel .checkbox-input,
[data-state-focus-visible] .settings-panel .radio-group-input,
[data-state-focus-visible] .settings-panel .button,
[data-state-focus-visible] .settings-panel .switch:not(.settings-panel-demo-target) .switch-track {
  outline: 0;
}

[data-state-focus-visible] .settings-panel .settings-panel-demo-target .switch-track {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* invalid: the inner-gap field carries the 2px danger border and its
   message; the select, radios and checkboxes the matrix also marked stay at
   rest. These carry one more class than the components own
   :has([aria-invalid]) rules so they win whatever the stylesheet order. */
[data-state-invalid] .settings-panel .settings-panel-group .select .select-root {
  border-color: var(--color-border-control);
  border-width: var(--border-width-default);
}

[data-state-invalid] .settings-panel .settings-panel-group .select .select-message,
[data-state-invalid] .settings-panel .settings-panel-group .checkbox .checkbox-message,
[data-state-invalid] .settings-panel .settings-panel-group .radio-group .radio-group-message {
  display: none;
}

[data-state-invalid] .settings-panel .settings-panel-group .select .select-help {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

[data-state-invalid] .settings-panel .settings-panel-group .checkbox .checkbox-input,
[data-state-invalid] .settings-panel .settings-panel-group .radio-group .radio-group-input {
  border-color: var(--color-border-control);
  border-width: var(--border-width-default);
}

/* busy: Apply shows the static ⋯ glyph and aria-busy sits on the form;
   the size of the button does not change */
.settings-panel[aria-busy="true"] .settings-panel-apply .button-loading,
[data-state-busy] .settings-panel-apply .button-loading {
  display: inline;
}

.settings-panel[aria-busy="true"] .settings-panel-apply,
[data-state-busy] .settings-panel-apply {
  cursor: progress;
}

@media (forced-colors: active) {
  [data-state-focus-visible] .settings-panel .settings-panel-demo-target .switch-track {
    outline-color: Highlight;
  }

  .settings-panel {
    border-color: CanvasText;
  }
}

/* sidebar-nav — reference CSS. The current link is a 2px inline-start bar
   and bright text; a selected link (listbox-style rails) is the selection
   fill. Every pseudo-class is paired with the forced-state attribute the
   state matrix emits. Token variables only. */

.sidebar-nav {
  --_indent: calc(var(--density-icon, 16px) + var(--space-8));
  min-width: 0;
  max-width: 15rem;
  padding: var(--space-4) 0;
  background: var(--color-surface-default);
  border-inline-end: var(--border-width-default) solid var(--color-border-divider);
  color: var(--color-text-default);
}

.sidebar-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav-sublist {
  padding-inline-start: var(--_indent);
}

.sidebar-nav-sublist[hidden] {
  display: none;
}

.sidebar-nav-item {
  min-width: 0;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--density-row-height, 36px);
  padding: var(--space-4) var(--density-control-padding-x, 12px);
  padding-inline-start: calc(var(--density-control-padding-x, 12px) - var(--border-width-emphasis));
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-inline-start: var(--border-width-emphasis) solid transparent;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.sidebar-nav-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--density-icon, 16px);
  height: var(--density-icon, 16px);
  color: var(--color-icon-default);
}

.sidebar-nav-icon svg,
.sidebar-nav-chevron svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: square;
}

.sidebar-nav-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sidebar-nav-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-icon-decorative);
  transform: rotate(0deg);
}

/* hover: fill only */
.sidebar-nav-link:hover,
[data-state-hover] .sidebar-nav-link-demo-target {
  background: var(--color-interaction-hover-bg);
}

/* pressed */
.sidebar-nav-link:active {
  background: var(--color-interaction-pressed-bg);
}

/* focus-visible */
.sidebar-nav-link:focus-visible,
[data-state-focus-visible] .sidebar-nav-link-demo-target {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.sidebar-nav-link:focus:not(:focus-visible) {
  outline: 0;
}

/* current: the bar and bright text */
.sidebar-nav-link[aria-current="page"],
[data-state-current] .sidebar-nav-current {
  border-inline-start-color: var(--color-border-selected-indicator);
  color: var(--color-text-bright);
}

.sidebar-nav-link[aria-current="page"] .sidebar-nav-icon,
[data-state-current] .sidebar-nav-current .sidebar-nav-icon {
  color: var(--color-text-bright);
}

/* selected: the fill; the ring recolours on it */
.sidebar-nav-link[aria-selected="true"],
[data-state-selected] .sidebar-nav-link-demo-target {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.sidebar-nav-link[aria-selected="true"] .sidebar-nav-icon,
[data-state-selected] .sidebar-nav-link-demo-target .sidebar-nav-icon {
  color: var(--color-interaction-selection-text);
}

.sidebar-nav-link[aria-selected="true"]:focus-visible {
  outline-color: var(--color-interaction-focus-ring-container);
}

/* selected, container inactive */
.sidebar-nav[data-container-inactive] .sidebar-nav-link[aria-selected="true"],
[data-state-selected][data-state-container-inactive] .sidebar-nav-link-demo-target {
  background: var(--color-interaction-selection-inactive-bg);
  color: var(--color-interaction-selection-inactive-text);
}

.sidebar-nav[data-container-inactive] .sidebar-nav-link[aria-selected="true"] .sidebar-nav-icon,
[data-state-selected][data-state-container-inactive] .sidebar-nav-link-demo-target .sidebar-nav-icon {
  color: var(--color-interaction-selection-inactive-text);
}

/* expanded: the chevron turns and the sublist shows */
.sidebar-nav-group[aria-expanded="true"] .sidebar-nav-chevron,
[data-state-expanded] .sidebar-nav-chevron {
  transform: rotate(90deg);
}

.sidebar-nav-group[aria-expanded="true"] + .sidebar-nav-sublist,
[data-state-expanded] .sidebar-nav-sublist {
  display: block;
}

/* collapsed: an icon rail; labels are hidden, not removed */
.sidebar-nav-collapsed,
[data-state-collapsed] .sidebar-nav {
  max-width: none;
  width: max-content;
}

.sidebar-nav-collapsed .sidebar-nav-label,
[data-state-collapsed] .sidebar-nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sidebar-nav-collapsed .sidebar-nav-chevron,
[data-state-collapsed] .sidebar-nav-chevron {
  display: none;
}

.sidebar-nav-collapsed .sidebar-nav-sublist,
[data-state-collapsed] .sidebar-nav-sublist {
  padding-inline-start: 0;
}

.sidebar-nav-collapsed .sidebar-nav-link,
[data-state-collapsed] .sidebar-nav-link {
  justify-content: center;
  padding-inline: var(--space-8);
  padding-inline-start: calc(var(--space-8) - var(--border-width-emphasis));
}

@media (hover: none) {
  .sidebar-nav-link:hover {
    background: transparent;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sidebar-nav-link {
    transition: background-color var(--motion-duration-fast);
  }

  .sidebar-nav-chevron {
    transition: transform var(--motion-duration-base);
  }
}

@media (forced-colors: active) {
  .sidebar-nav-link:focus-visible,
  [data-state-focus-visible] .sidebar-nav-link-demo-target {
    outline-color: Highlight;
  }

  .sidebar-nav-link[aria-current="page"],
  [data-state-current] .sidebar-nav-current {
    border-inline-start-color: Highlight;
  }

  .sidebar-nav-link[aria-selected="true"],
  [data-state-selected] .sidebar-nav-link-demo-target {
    background: Highlight;
    color: HighlightText;
  }
}

/* skip-link — reference CSS. Off-screen on the block axis until focused;
   the site's own skip link is this component, so the values here match
   site.css exactly. The matrix wraps every cell in .skip-link-demo, which
   becomes the containing block so the demo stays inside its cell. */

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-8);
  top: calc(-1 * var(--space-48));
  z-index: var(--z-skip-link);
  min-height: var(--density-control-height, 32px);
  padding: var(--space-4) var(--space-8);
  box-sizing: border-box;
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border-overlay);
  border-radius: var(--radius-none);
  color: var(--color-text-bright);
  text-decoration: none;
  white-space: nowrap;
}

/* focus-visible: the link moves on-screen and takes the ring */
.skip-link:focus-visible,
[data-state-focus-visible] .skip-link {
  top: var(--space-8);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.skip-link:focus:not(:focus-visible) {
  outline: 0;
}

/* the matrix cell: a positioned, clipped box the link can appear inside */
.skip-link-demo {
  position: relative;
  min-height: calc(var(--density-control-height, 32px) + var(--space-16));
  overflow: hidden;
}

@media (forced-colors: active) {
  .skip-link:focus-visible,
  [data-state-focus-visible] .skip-link {
    outline-color: Highlight;
  }
}

/* switch — reference CSS. A button with role switch; the track and thumb
   are nested rectangles and the thumb position is layout. The checked
   state is styled from aria-checked and from the forced-state attribute the
   state matrix emits. Token variables only. */

.switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  color: var(--color-text-default);
}

.switch-name {
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--space-24);
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  cursor: pointer;
  outline: 0;
}

.switch-track {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  width: calc(var(--icon-size-md) * 2);
  height: var(--icon-size-md);
  padding: var(--space-2);
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.switch-thumb {
  display: block;
  width: calc(var(--icon-size-md) - 2 * var(--border-width-default) - 2 * var(--space-2));
  height: calc(var(--icon-size-md) - 2 * var(--border-width-default) - 2 * var(--space-2));
  background: var(--color-text-default);
}

.switch-state {
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
  white-space: nowrap;
}

.switch-state-on {
  display: none;
}

/* hover: the track fill only, on hover-capable pointers */
@media (hover: hover) {
  .switch:hover:not(:disabled) .switch-track {
    background: var(--color-interaction-hover-bg);
  }

  .switch[aria-checked="true"]:hover:not(:disabled) .switch-track {
    background: var(--color-action-primary-hover-bg);
  }
}

[data-state-hover] .switch-track {
  background: var(--color-interaction-hover-bg);
}

/* checked: the primary fill, the on-fill thumb at the end, the word "On" */
.switch[aria-checked="true"] .switch-track,
[data-state-checked] .switch-track {
  justify-content: flex-end;
  background: var(--color-action-primary-bg);
}

.switch[aria-checked="true"] .switch-thumb,
[data-state-checked] .switch-thumb {
  background: var(--color-action-primary-text);
}

.switch[aria-checked="true"] .switch-state-off,
[data-state-checked] .switch-state-off {
  display: none;
}

.switch[aria-checked="true"] .switch-state-on,
[data-state-checked] .switch-state-on {
  display: inline;
}

[data-state-hover][data-state-checked] .switch-track {
  background: var(--color-action-primary-hover-bg);
}

/* focus-visible: the ring sits on the track, so it can take the fill's colour */
.switch:focus-visible .switch-track,
[data-state-focus-visible] .switch-track {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.switch[aria-checked="true"]:focus-visible .switch-track,
[data-state-checked][data-state-focus-visible] .switch-track {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* disabled, including checked + disabled */
.switch:disabled,
[data-state-disabled] .switch {
  cursor: not-allowed;
}

.switch:disabled .switch-track,
[data-state-disabled] .switch-track {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
}

.switch:disabled .switch-thumb,
[data-state-disabled] .switch-thumb {
  background: var(--color-text-disabled);
}

.switch-row:has(.switch:disabled) .switch-name,
.switch:disabled .switch-state,
[data-state-disabled] .switch-name,
[data-state-disabled] .switch-state {
  color: var(--color-text-disabled);
}

@media (forced-colors: active) {
  .switch:focus-visible .switch-track,
  [data-state-focus-visible] .switch-track {
    outline-color: Highlight;
  }

  .switch[aria-checked="true"] .switch-track,
  [data-state-checked] .switch-track {
    background: Highlight;
  }

  .switch[aria-checked="true"] .switch-thumb,
  [data-state-checked] .switch-thumb {
    background: HighlightText;
  }
}

/* table — reference CSS. A collapsed native table: a border.strong header
   rule (2px when sticky), divider rows, the hover and selection fills.
   Every pseudo-class is paired with the forced-state attribute the state
   matrix emits. Cell rules carry the root class so they outrank the site's
   own matrix table rules when the demo is nested. Token variables only. */

.table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--color-surface-default);
  border: 0;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  text-align: start;
}

.table-scroller {
  max-height: calc(var(--density-row-height, 36px) * 4);
  overflow: auto;
  min-width: 0;
}

.table-caption {
  padding: 0 0 var(--space-8);
  color: var(--color-text-muted);
  text-align: start;
  caption-side: top;
}

.table .table-header {
  position: static;
  height: var(--density-row-height, 36px);
  min-width: 0;
  padding: 0 var(--density-control-padding-x, 12px);
  background: var(--color-surface-default);
  border: 0;
  border-bottom: var(--border-width-default) solid var(--color-border-strong);
  color: var(--color-text-bright);
  font-weight: var(--font-weight-bold);
  text-align: start;
  white-space: nowrap;
  vertical-align: middle;
}

.table .table-header-numeric,
.table .table-cell-numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.table-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--density-control-height, 32px);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.table-header-numeric .table-sort {
  justify-content: flex-end;
}

.table-sort-glyph {
  display: none;
  color: var(--color-text-bright);
}

.table .table-row {
  height: var(--density-row-height, 36px);
  background: transparent;
  border-top: var(--border-width-default) solid var(--color-border-divider);
}

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

.table .table-cell {
  min-width: 0;
  padding: var(--space-4) var(--density-control-padding-x, 12px);
  background: transparent;
  border: 0;
  color: inherit;
  vertical-align: middle;
}

.table .table-empty[hidden],
.table .table-loading[hidden] {
  display: none;
}

.table .table-empty-cell,
.table .table-loading-cell {
  color: var(--color-text-muted);
  text-align: center;
}

.table-loading-glyph {
  color: var(--color-text-muted);
}

.table-loading-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* sticky header: the 2px rule on the raised surface */
.table-sticky .table-header {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  background: var(--color-surface-raised);
  border-bottom-width: var(--border-width-emphasis);
}

/* hover: the row fill */
.table-body .table-row:hover,
[data-state-hover] .table-row-demo-target {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible on a sort button */
.table-sort:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.table-sort:focus:not(:focus-visible) {
  outline: 0;
}

/* selected: the fill on the row */
.table-row[aria-selected="true"],
[data-state-selected] .table-row-demo-target {
  background: var(--color-interaction-selection-bg);
  color: var(--color-interaction-selection-text);
}

.table-row[aria-selected="true"]:hover,
[data-state-selected] .table-row-demo-target:hover {
  background: var(--color-interaction-selection-bg);
}

/* selected + focus-visible: the ring recolours on the fill */
.table-row[aria-selected="true"]:focus-visible,
.table-row[aria-selected="true"]:focus-within,
[data-state-selected][data-state-focus-visible] .table-row-demo-target {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* selected, container inactive */
.table[data-container-inactive] .table-row[aria-selected="true"],
[data-state-selected][data-state-container-inactive] .table-row-demo-target {
  background: var(--color-interaction-selection-inactive-bg);
  color: var(--color-interaction-selection-inactive-text);
  outline: 0;
}

/* sorted: the glyph shows on the header carrying aria-sort */
.table-header[aria-sort="ascending"] .table-sort-glyph,
.table-header[aria-sort="descending"] .table-sort-glyph,
[data-state-sorted] .table-header-demo-target .table-sort-glyph {
  display: inline;
}

.table-header[aria-sort="descending"] .table-sort-glyph {
  transform: scaleY(-1);
}

/* empty: the body is the message row */
[data-state-empty] .table-body .table-row {
  display: none;
}

.table-body .table-empty:not([hidden]),
[data-state-empty] .table-body .table-empty {
  display: table-row;
}

/* loading: the body is the glyph row; aria-busy on the table */
.table[aria-busy="true"] .table-body .table-row,
[data-state-loading] .table-body .table-row {
  display: none;
}

.table[aria-busy="true"] .table-body .table-loading,
.table-body .table-loading:not([hidden]),
[data-state-loading] .table-body .table-loading {
  display: table-row;
}

@media (hover: none) {
  .table-body .table-row:hover {
    background: transparent;
  }

  .table-row[aria-selected="true"]:hover {
    background: var(--color-interaction-selection-bg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .table-row {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .table-sort:focus-visible {
    outline-color: Highlight;
  }

  .table-row[aria-selected="true"],
  [data-state-selected] .table-row-demo-target {
    background: Highlight;
    color: HighlightText;
  }
}

/* tabs — reference CSS. The selected tab is a 2px bottom bar and bright
   text, never a fill; every pseudo-class is paired with the forced-state
   attribute the state matrix emits. Token variables only. */

.tabs {
  display: grid;
  min-width: 0;
  color: var(--color-text-default);
}

.tabs-list {
  display: flex;
  gap: var(--density-gap, 4px);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  background: var(--color-surface-default);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.tabs-tab {
  flex: 0 0 auto;
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  margin-bottom: calc(-1 * var(--border-width-default)); /* the bar sits on the rule */
  background: transparent;
  border: 0;
  border-bottom: var(--border-width-emphasis) solid transparent;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.tabs-panel {
  padding: var(--space-12) 0 0;
  background: var(--color-surface-default);
  color: var(--color-text-default);
}

.tabs-panel[hidden] {
  display: none;
}

.tabs-panel-text {
  margin: 0;
}

/* hover: fill only, never the text colour */
.tabs-tab:hover,
[data-state-hover] .tabs-tab-demo-target {
  background: var(--color-interaction-hover-bg);
}

/* pressed */
.tabs-tab:active {
  background: var(--color-interaction-pressed-bg);
}

/* focus-visible: the dashed ring on the tab itself */
.tabs-tab:focus-visible,
[data-state-focus-visible]:not([data-state-selected]) .tabs-tab-demo-target,
[data-state-selected][data-state-focus-visible] .tabs-tab[aria-selected="true"] {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.tabs-tab:focus:not(:focus-visible) {
  outline: 0;
}

.tabs-panel:focus-visible {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

/* selected: the bar and bright text */
.tabs-tab[aria-selected="true"],
[data-state-selected] .tabs-tab[aria-selected="true"] {
  color: var(--color-text-bright);
  border-bottom-color: var(--color-border-selected-indicator);
}

/* selected, container inactive: the bar drops in lightness */
.tabs[data-container-inactive] .tabs-tab[aria-selected="true"],
[data-state-container-inactive] .tabs-tab[aria-selected="true"] {
  border-bottom-color: var(--color-border-selected-indicator-inactive);
}

/* disabled: never opacity */
.tabs-tab:disabled,
.tabs-tab[aria-disabled="true"],
[data-state-disabled] .tabs-tab {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.tabs-tab:disabled:hover,
.tabs-tab[aria-disabled="true"]:hover,
[data-state-disabled] .tabs-tab:hover {
  background: transparent;
}

.tabs-tab:disabled[aria-selected="true"],
[data-state-disabled] .tabs-tab[aria-selected="true"] {
  border-bottom-color: var(--color-border-selected-indicator-inactive);
}

@media (hover: none) {
  .tabs-tab:hover {
    background: transparent;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tabs-tab {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .tabs-tab:focus-visible,
  [data-state-focus-visible] .tabs-tab-demo-target {
    outline-color: Highlight;
  }

  .tabs-tab[aria-selected="true"] {
    border-bottom-color: Highlight;
  }
}

/* terminal — reference CSS. A native <pre> on the terminal surface with the
   sixteen heritage slots as classes, the cursor, the selection and the six
   attributes. Slot colours are the role variables --color-terminal-ansi-0 …
   -15 and nothing else, so the specimen profile switch shows the extended
   reassignment. No animation: the cursor does not blink. Forced-state
   attributes from the state matrix ([data-state-<part>]) render each state
   statically. */

.terminal {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: var(--space-8);
  overflow-x: auto;
  background: var(--color-terminal-bg);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-terminal-fg);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-terminal);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-terminal);
  letter-spacing: var(--font-letter-spacing-terminal);
  white-space: pre;
  tab-size: 8;
  unicode-bidi: isolate;
  direction: ltr;
}

.terminal-line {
  display: inline-block; /* fills the row so the cursor-line fill spans the width; the source newline ends the line */
  min-width: 100%;
  vertical-align: top;
}

/* the agnoster-style prompt: two filled segments, each ending in its own arrow */
.terminal-prompt-path {
  background: var(--color-terminal-ansi-4);
  color: var(--color-terminal-selection-text);
}

.terminal-prompt-arrow-path {
  background: var(--color-terminal-ansi-3);
  color: var(--color-terminal-ansi-4);
}

.terminal-prompt-branch {
  background: var(--color-terminal-ansi-3);
  color: var(--color-terminal-bg);
}

.terminal-prompt-arrow-branch {
  color: var(--color-terminal-ansi-3);
}

/* the sixteen slots, exact in every profile */
.terminal-fg-0 { color: var(--color-terminal-ansi-0); }
.terminal-fg-1 { color: var(--color-terminal-ansi-1); }
.terminal-fg-2 { color: var(--color-terminal-ansi-2); }
.terminal-fg-3 { color: var(--color-terminal-ansi-3); }
.terminal-fg-4 { color: var(--color-terminal-ansi-4); }
.terminal-fg-5 { color: var(--color-terminal-ansi-5); }
.terminal-fg-6 { color: var(--color-terminal-ansi-6); }
.terminal-fg-7 { color: var(--color-terminal-ansi-7); }
.terminal-fg-8 { color: var(--color-terminal-ansi-8); }
.terminal-fg-9 { color: var(--color-terminal-ansi-9); }
.terminal-fg-10 { color: var(--color-terminal-ansi-10); }
.terminal-fg-11 { color: var(--color-terminal-ansi-11); }
.terminal-fg-12 { color: var(--color-terminal-ansi-12); }
.terminal-fg-13 { color: var(--color-terminal-ansi-13); }
.terminal-fg-14 { color: var(--color-terminal-ansi-14); }
.terminal-fg-15 { color: var(--color-terminal-ansi-15); }

.terminal-bg-0 { background: var(--color-terminal-ansi-0); color: var(--color-terminal-fg); }
.terminal-bg-1 { background: var(--color-terminal-ansi-1); color: var(--color-terminal-fg); }
.terminal-bg-2 { background: var(--color-terminal-ansi-2); color: var(--color-terminal-fg); }
.terminal-bg-3 { background: var(--color-terminal-ansi-3); color: var(--color-terminal-fg); }
.terminal-bg-4 { background: var(--color-terminal-ansi-4); color: var(--color-terminal-fg); }
.terminal-bg-5 { background: var(--color-terminal-ansi-5); color: var(--color-terminal-fg); }
.terminal-bg-6 { background: var(--color-terminal-ansi-6); color: var(--color-terminal-fg); }
.terminal-bg-7 { background: var(--color-terminal-ansi-7); color: var(--color-terminal-fg); }
.terminal-bg-8 { background: var(--color-terminal-ansi-8); color: var(--color-terminal-fg); }
.terminal-bg-9 { background: var(--color-terminal-ansi-9); color: var(--color-terminal-fg); }
.terminal-bg-10 { background: var(--color-terminal-ansi-10); color: var(--color-terminal-fg); }
.terminal-bg-11 { background: var(--color-terminal-ansi-11); color: var(--color-terminal-fg); }
.terminal-bg-12 { background: var(--color-terminal-ansi-12); color: var(--color-terminal-fg); }
.terminal-bg-13 { background: var(--color-terminal-ansi-13); color: var(--color-terminal-fg); }
.terminal-bg-14 { background: var(--color-terminal-ansi-14); color: var(--color-terminal-fg); }
.terminal-bg-15 { background: var(--color-terminal-ansi-15); color: var(--color-terminal-fg); }

/* grid labels and the failure mark */
.terminal-label {
  color: var(--color-text-muted);
}

.terminal-fail {
  color: var(--color-terminal-fg);
  font-weight: var(--font-weight-bold);
}

/* attributes */
.terminal-bold { font-weight: var(--font-weight-bold); }
.terminal-dim { color: var(--color-text-muted); }
.terminal-italic { font-style: italic; }
.terminal-underline { text-decoration: underline; text-underline-offset: var(--space-2); }
.terminal-strike { text-decoration: line-through; }

.terminal-inverse {
  background: var(--color-terminal-fg);
  color: var(--color-terminal-bg);
}

/* the cursor: one cell, hollow at rest, solid while focused or busy; never blinks */
.terminal-cursor {
  display: inline-block;
  min-width: 1ch;
  outline: var(--border-width-default) solid var(--color-terminal-cursor);
  outline-offset: calc(-1 * var(--border-width-default));
  vertical-align: top;
}

/* native text selection inside a live transcript */
.terminal ::selection,
.terminal::selection {
  background: var(--color-terminal-selection-bg);
  color: var(--color-terminal-selection-text);
}

/* focus-visible: the container ring; the cursor fills */
.terminal:focus-visible,
[data-state-focus-visible] .terminal {
  outline: var(--focus-ring-container);
  outline-offset: var(--focus-offset-container);
}

.terminal:focus-visible .terminal-cursor,
[data-state-focus-visible] .terminal-cursor {
  outline: 0;
  background: var(--color-terminal-cursor);
  color: var(--color-terminal-bg);
}

.terminal:focus:not(:focus-visible) {
  outline: 0;
}

/* selected: the run takes the selection fill; slot colours give way */
[data-state-selected] .terminal-sel {
  background: var(--color-terminal-selection-bg);
  color: var(--color-terminal-selection-text);
}

/* busy: a command is running; the cursor is a solid static block */
.terminal[aria-busy="true"] .terminal-cursor,
[data-state-busy] .terminal-cursor {
  outline: 0;
  background: var(--color-terminal-cursor);
  color: var(--color-terminal-bg);
}

/* current: the cursor line is filled; the cursor is solid */
.terminal[aria-current="true"] .terminal-line-cursor,
[data-state-current] .terminal-line-cursor {
  background: var(--color-code-current-line);
}

.terminal[aria-current="true"] .terminal-cursor,
[data-state-current] .terminal-cursor {
  outline: 0;
  background: var(--color-terminal-cursor);
  color: var(--color-terminal-bg);
}

@media (forced-colors: active) {
  .terminal:focus-visible,
  [data-state-focus-visible] .terminal {
    outline-color: Highlight;
  }

  .terminal-cursor {
    outline-color: CanvasText;
  }

  [data-state-focus-visible] .terminal-cursor,
  [data-state-busy] .terminal-cursor,
  [data-state-current] .terminal-cursor {
    background: CanvasText;
    color: Canvas;
  }

  [data-state-selected] .terminal-sel {
    background: Highlight;
    color: HighlightText;
  }
}

/* ansi-grid samples of slots that fail the text floor are colour blocks, not words */
.terminal-swatch,
.terminal-swatch-bg {
  display: inline-block;
  width: 6ch;
  height: 1em;
  vertical-align: text-bottom;
}

.terminal-swatch {
  background: currentColor;
}

.terminal-swatch-bg {
  width: 12ch;
}

/* text-field — reference CSS. Every real pseudo-class is paired with the
   forced-state attribute the state matrix emits ([data-state-<part>]), so a
   state renders statically without scripts. Token variables only. */

.text-field {
  position: relative; /* the visually hidden help text in the invalid state is positioned inside the component */
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  color: var(--color-text-default);
}

.text-field-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.text-field-required {
  display: none;
  color: var(--color-status-danger-text);
}

.text-field-root {
  display: flex;
  min-width: 0; /* a grid item would otherwise refuse to shrink below the input's intrinsic width */
  align-items: stretch;
  min-height: var(--density-control-height, 32px);
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.text-field-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--density-control-padding-x, 12px);
  background: transparent;
  border: 0;
  color: var(--color-text-default);
  caret-color: var(--color-code-caret);
  font: inherit;
  outline: 0;
}

.text-field-input::placeholder {
  color: var(--color-text-placeholder);
  font-style: italic;
  opacity: 1;
}

.text-field-input::selection {
  background: var(--color-interaction-text-selection-bg);
  color: var(--color-interaction-text-selection-text);
}

.text-field-input-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.text-field-input::-webkit-search-cancel-button,
.text-field-input::-webkit-inner-spin-button,
.text-field-input::-webkit-outer-spin-button {
  appearance: none;
  display: none;
}

.text-field-affix {
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* the specification says affixes never wrap */
  padding: 0 var(--space-8);
  color: var(--color-text-muted);
  border-inline-end: var(--border-width-default) solid var(--color-border-divider);
}

.text-field-input ~ .text-field-affix {
  border-inline-end: 0;
  border-inline-start: var(--border-width-default) solid var(--color-border-divider);
}

.text-field-action {
  padding: 0 var(--space-8);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-inline-start: var(--border-width-default) solid var(--color-border-divider);
  color: var(--color-action-tertiary-text);
  font: inherit;
  cursor: pointer;
}

.text-field-action:hover {
  background: var(--color-action-tertiary-hover-bg);
}

.text-field-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.text-field-stepper {
  display: flex;
}

.text-field-loading {
  display: none;
  align-items: center;
  padding: 0 var(--space-8);
  color: var(--color-text-muted);
}

.text-field-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.text-field-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover */
.text-field-root:hover,
[data-state-hover] .text-field-root {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible */
.text-field-root:has(.text-field-input:focus-visible),
[data-state-focus-visible] .text-field-root {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* placeholder-shown: the matrix strips the value so the real placeholder shows */
[data-state-placeholder-shown] .text-field-input::placeholder {
  color: var(--color-text-placeholder);
}

/* filled: the demo already carries a value */

/* required: the mark exists in every fragment and shows with the attribute */
.text-field:has(.text-field-input:required) .text-field-required,
[data-state-required] .text-field-required {
  display: inline;
}

/* invalid */
.text-field-root:has(.text-field-input[aria-invalid="true"]),
.text-field-root:has(.text-field-input:user-invalid),
[data-state-invalid] .text-field-root {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.text-field:has(.text-field-input[aria-invalid="true"]) .text-field-message,
.text-field:has(.text-field-input:user-invalid) .text-field-message,
[data-state-invalid] .text-field-message {
  display: block;
}

.text-field:has(.text-field-input[aria-invalid="true"]) .text-field-help,
[data-state-invalid] .text-field-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* invalid + focus-visible: the ring switches to the container colour inside the 2px border */
.text-field-root:has(.text-field-input[aria-invalid="true"]:focus-visible),
[data-state-invalid][data-state-focus-visible] .text-field-root {
  border-color: var(--color-status-danger-border);
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset-invalid);
}

/* invalid + hover */
[data-state-invalid][data-state-hover] .text-field-root {
  background: var(--color-interaction-hover-bg);
}

/* disabled */
.text-field-root:has(.text-field-input:disabled),
[data-state-disabled] .text-field-root {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.text-field-input:disabled,
[data-state-disabled] .text-field-input,
[data-state-disabled] .text-field-affix,
[data-state-disabled] .text-field-action {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.text-field-root:has(.text-field-input:disabled):hover,
[data-state-disabled] .text-field-root:hover {
  background: var(--color-interaction-disabled-bg);
}

/* read-only: no box, a dotted bottom edge on the canvas */
.text-field-root:has(.text-field-input:read-only:not(:disabled)),
[data-state-read-only] .text-field-root {
  background: var(--color-surface-canvas);
  border-color: transparent;
  border-bottom: var(--border-width-default) dotted var(--color-border-divider);
}

.text-field-root:has(.text-field-input:read-only:focus-visible),
[data-state-read-only][data-state-focus-visible] .text-field-root {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* loading */
.text-field-root[aria-busy="true"] .text-field-loading,
[data-state-loading] .text-field-loading {
  display: inline-flex;
}

@media (hover: none) {
  .text-field-root:hover {
    background: var(--color-surface-input);
  }
}

@media (forced-colors: active) {
  .text-field-root:has(.text-field-input:focus-visible),
  [data-state-focus-visible] .text-field-root {
    outline-color: Highlight;
  }
}

/* textarea — reference CSS. The text field's box around a native
   <textarea>; vertical resize only. Every real pseudo-class is paired with
   the forced-state attribute the state matrix emits. Token variables only. */

.textarea {
  position: relative; /* the visually hidden help text in the invalid state stays inside the component */
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  color: var(--color-text-default);
}

.textarea-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.textarea-required {
  display: none;
  color: var(--color-status-danger-text);
}

.textarea-root {
  display: grid;
  min-width: 0;
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.textarea-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--density-control-height, 32px) * 2);
  padding: var(--space-4) var(--density-control-padding-x, 12px);
  background: transparent;
  border: 0;
  color: var(--color-text-default);
  caret-color: var(--color-code-caret);
  font: inherit;
  line-height: var(--font-line-height-ui-md);
  resize: vertical;
  outline: 0;
}

.textarea-input::placeholder {
  color: var(--color-text-placeholder);
  font-style: italic;
  opacity: 1;
}

.textarea-input::selection {
  background: var(--color-interaction-text-selection-bg);
  color: var(--color-interaction-text-selection-text);
}

.textarea-count {
  margin: 0;
  justify-self: end;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
  font-variant-numeric: tabular-nums;
}

.textarea-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.textarea-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover */
.textarea-root:hover,
[data-state-hover] .textarea-root {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible */
.textarea-root:has(.textarea-input:focus-visible),
[data-state-focus-visible] .textarea-root {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* placeholder-shown: the matrix cannot strip a textarea's content, so the forced state only restates the placeholder rule */
[data-state-placeholder-shown] .textarea-input::placeholder {
  color: var(--color-text-placeholder);
}

/* filled: the demo already carries a value */

/* required */
.textarea:has(.textarea-input:required) .textarea-required,
[data-state-required] .textarea-required {
  display: inline;
}

/* invalid */
.textarea-root:has(.textarea-input[aria-invalid="true"]),
.textarea-root:has(.textarea-input:user-invalid),
[data-state-invalid] .textarea-root {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.textarea:has(.textarea-input[aria-invalid="true"]) .textarea-message,
.textarea:has(.textarea-input:user-invalid) .textarea-message,
[data-state-invalid] .textarea-message {
  display: block;
}

.textarea:has(.textarea-input[aria-invalid="true"]) .textarea-count,
[data-state-invalid] .textarea-count {
  color: var(--color-status-danger-text);
}

.textarea:has(.textarea-input[aria-invalid="true"]) .textarea-help,
[data-state-invalid] .textarea-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* invalid + focus-visible: the ring switches to the container colour inside the 2px border */
.textarea-root:has(.textarea-input[aria-invalid="true"]:focus-visible),
[data-state-invalid][data-state-focus-visible] .textarea-root {
  border-color: var(--color-status-danger-border);
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset-invalid);
}

/* disabled */
.textarea-root:has(.textarea-input:disabled),
[data-state-disabled] .textarea-root {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.textarea-input:disabled,
[data-state-disabled] .textarea-input {
  color: var(--color-text-disabled);
  resize: none;
  cursor: not-allowed;
}

.textarea:has(.textarea-input:disabled) .textarea-label,
[data-state-disabled] .textarea-label {
  color: var(--color-text-disabled);
}

.textarea-root:has(.textarea-input:disabled):hover,
[data-state-disabled] .textarea-root:hover {
  background: var(--color-interaction-disabled-bg);
}

/* read-only: no box, a dotted bottom edge on the canvas */
.textarea-root:has(.textarea-input:read-only:not(:disabled)),
[data-state-read-only] .textarea-root {
  background: var(--color-surface-canvas);
  border-color: transparent;
  border-bottom: var(--border-width-default) dotted var(--color-border-divider);
}

.textarea-input:read-only,
[data-state-read-only] .textarea-input {
  resize: none;
}

.textarea-root:has(.textarea-input:read-only:focus-visible),
[data-state-read-only][data-state-focus-visible] .textarea-root {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (hover: none) {
  .textarea-root:hover {
    background: var(--color-surface-input);
  }
}

@media (forced-colors: active) {
  .textarea-root:has(.textarea-input:focus-visible),
  [data-state-focus-visible] .textarea-root {
    outline-color: Highlight;
  }
}

/* time-picker — reference CSS. The text-field box around a native time
   input; the clock popup is the host's and only receives color-scheme. Every
   real pseudo-class is paired with the forced-state attribute the state
   matrix emits. */

.time-picker {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  min-width: 0;
  max-width: 28rem;
  color: var(--color-text-default);
}

.time-picker-label {
  color: var(--color-text-bright);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.time-picker-root {
  display: inline-flex;
  align-items: stretch;
  min-height: var(--density-control-height, 32px);
  background: var(--color-surface-input);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
}

.time-picker-input {
  min-width: 0;
  padding: 0 var(--density-control-padding-x, 12px);
  background: transparent;
  border: 0;
  color: var(--color-text-default);
  caret-color: var(--color-code-caret);
  color-scheme: dark;
  font: inherit;
  font-variant-numeric: tabular-nums;
  outline: 0;
}

.time-picker-input::selection {
  background: var(--color-interaction-text-selection-bg);
  color: var(--color-interaction-text-selection-text);
}

.time-picker-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.time-picker-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.time-picker-message {
  display: none;
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

/* hover */
.time-picker-root:hover,
[data-state-hover] .time-picker-root {
  background: var(--color-interaction-hover-bg);
}

/* focus-visible */
.time-picker-root:has(.time-picker-input:focus-visible),
[data-state-focus-visible] .time-picker-root {
  border-color: var(--color-border-active);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* invalid */
.time-picker-root:has(.time-picker-input[aria-invalid="true"]),
.time-picker-root:has(.time-picker-input:user-invalid),
[data-state-invalid] .time-picker-root {
  border-color: var(--color-status-danger-border);
  border-width: var(--border-width-emphasis);
}

.time-picker:has(.time-picker-input[aria-invalid="true"]) .time-picker-message,
.time-picker:has(.time-picker-input:user-invalid) .time-picker-message,
[data-state-invalid] .time-picker-message {
  display: block;
}

.time-picker:has(.time-picker-input[aria-invalid="true"]) .time-picker-help,
[data-state-invalid] .time-picker-help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* invalid + focus-visible (not a declared cell; the rule keeps the pair honest) */
.time-picker-root:has(.time-picker-input[aria-invalid="true"]:focus-visible),
[data-state-invalid][data-state-focus-visible] .time-picker-root {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset-invalid);
}

/* disabled */
.time-picker-root:has(.time-picker-input:disabled),
[data-state-disabled] .time-picker-root {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  cursor: not-allowed;
}

.time-picker-input:disabled,
[data-state-disabled] .time-picker-input {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.time-picker-root:has(.time-picker-input:disabled):hover,
[data-state-disabled] .time-picker-root:hover {
  background: var(--color-interaction-disabled-bg);
}

@media (hover: none) {
  .time-picker-root:hover {
    background: var(--color-surface-input);
  }
}

@media (forced-colors: active) {
  .time-picker-root:has(.time-picker-input:focus-visible),
  [data-state-focus-visible] .time-picker-root {
    outline-color: Highlight;
  }
}

/* toast — reference CSS. The stack is fixed in the end corner in a host;
   the demonstration renders it in flow. Every real pseudo-class is paired
   with the forced-state attribute the state matrix emits;
   [data-state-stacked] is also the runtime hook a host sets on the stack
   when more toasts are queued than shown. Token variables only. */

.toast-stack {
  display: grid;
  gap: var(--space-8);
  width: min(24rem, 100%);
  min-width: 0;
  z-index: var(--z-toast);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-8) var(--space-12);
  background: var(--color-surface-canvas);
  border: var(--border-width-default) solid var(--color-border-overlay);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-size: var(--font-size-ui-md);
  line-height: var(--font-line-height-ui-md);
  --_glyph: var(--color-status-info-text);
  --_button-text: var(--color-action-tertiary-text);
  --_button-hover: var(--color-action-tertiary-hover-bg);
  --_ring: var(--color-interaction-focus-ring);
}

.toast-warning {
  background: var(--color-status-warning-tint);
  border-color: var(--color-status-warning-border);
  --_glyph: var(--color-status-warning-text);
}

.toast-success {
  background: var(--color-status-success-tint);
  border-color: var(--color-status-success-border);
  --_glyph: var(--color-status-success-text);
}

.toast-info {
  background: var(--color-status-info-tint);
  border-color: var(--color-status-info-border);
  --_glyph: var(--color-status-info-text);
}

.toast-neutral {
  background: var(--color-status-neutral-tint);
  border-color: var(--color-status-neutral-border);
  --_glyph: var(--color-status-neutral-text);
}

/* the historical critical notification: the danger fill with on-fill text */
.toast-danger {
  background: var(--color-status-danger-fill);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-on-fill);
  --_glyph: var(--color-status-danger-on-fill);
  --_button-text: var(--color-status-danger-on-fill);
  --_button-hover: var(--color-action-destructive-pressed-bg);
  --_ring: var(--color-status-danger-on-fill);
}

.toast-glyph {
  flex: 0 0 auto;
  min-width: var(--icon-size-md);
  color: var(--_glyph);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.toast-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.toast-action,
.toast-close {
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  margin-top: calc(-1 * var(--space-2));
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
  color: var(--_button-text);
  font: inherit;
  cursor: pointer;
}

.toast-action {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-color: var(--color-text-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.toast-danger .toast-action {
  color: var(--color-status-danger-on-fill);
  text-decoration-color: currentColor;
}

.toast-count {
  display: none;
  align-self: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
  font-variant-numeric: tabular-nums;
}

.toast-danger .toast-count {
  color: var(--color-status-danger-on-fill);
}

/* hover: only the buttons react; the timeout pauses on the whole toast */
.toast-close:hover,
[data-state-hover] .toast-close {
  background: var(--_button-hover);
}

.toast-action:hover,
[data-state-hover] .toast-action {
  background: var(--color-interaction-hover-bg-strong);
  color: var(--color-text-link-hover);
  text-decoration-thickness: 2px;
}

.toast-danger .toast-action:hover,
[data-state-hover] .toast-danger .toast-action {
  background: var(--color-action-destructive-pressed-bg);
  color: var(--color-status-danger-on-fill);
}

/* focus-visible: the ring takes the on-fill colour on the danger fill */
.toast-action:focus-visible,
.toast-close:focus-visible,
[data-state-focus-visible] .toast-close {
  outline: var(--border-width-default) dashed var(--_ring);
  outline-offset: var(--focus-offset);
}

/* stacked: a tighter column and the overflow count on the last toast */
[data-state-stacked] .toast-stack,
.toast-stack[data-state-stacked] {
  gap: var(--space-4);
}

[data-state-stacked] .toast:last-child .toast-count,
.toast-stack[data-state-stacked] .toast:last-child .toast-count {
  display: inline;
}

/* motion: an opacity change only, never a slide */
@media (prefers-reduced-motion: no-preference) {
  .toast {
    transition: opacity var(--motion-duration-slow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

[data-state-reduced-motion] .toast {
  transition: none;
}

@media (hover: none) {
  .toast-close:hover {
    background: transparent;
  }

  .toast-action:hover {
    background: transparent;
    color: var(--color-text-link);
    text-decoration-thickness: 1px;
  }
}

@media (forced-colors: active) {
  .toast {
    border-color: CanvasText;
  }

  .toast-action:focus-visible,
  .toast-close:focus-visible,
  [data-state-focus-visible] .toast-close {
    outline-color: Highlight;
  }
}

/* toolbar — reference CSS. Ghost buttons on the chrome surface; a toggled
   button is the pressed fill with the active border. Every pseudo-class is
   paired with the forced-state attribute the state matrix emits. */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--density-gap, 4px);
  min-width: 0;
  min-height: var(--density-row-height, 36px);
  padding: var(--space-2) var(--space-4);
  overflow: hidden;
  background: var(--color-surface-chrome);
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
  color: var(--color-text-default);
}

.toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
  min-width: var(--density-control-height, 32px);
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  background: transparent;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.toolbar-separator {
  flex: 0 0 auto;
  align-self: stretch;
  width: var(--border-width-default);
  margin: var(--space-4) var(--space-2);
  background: var(--color-border-default);
}

.toolbar-more {
  margin-inline-start: auto;
}

.toolbar-chevron {
  display: inline-flex;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-icon-decorative);
}

.toolbar-chevron svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
}

/* hover */
.toolbar-button:hover,
[data-state-hover] .toolbar-button-demo-target {
  background: var(--color-interaction-hover-bg);
}

/* pressed */
.toolbar-button:active {
  background: var(--color-interaction-pressed-bg);
}

/* focus-visible */
.toolbar-button:focus-visible,
[data-state-focus-visible] .toolbar-button-demo-target {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.toolbar-button:focus:not(:focus-visible) {
  outline: 0;
}

/* toggled: the pressed fill stays and the border turns active */
.toolbar-button[aria-pressed="true"],
[data-state-toggled] .toolbar-button-demo-target {
  background: var(--color-interaction-pressed-bg);
  border-color: var(--color-border-active);
  color: var(--color-text-bright);
}

.toolbar-button[aria-pressed="true"]:hover,
[data-state-toggled] .toolbar-button-demo-target:hover {
  background: var(--color-interaction-pressed-bg);
}

/* disabled: never opacity */
.toolbar-button:disabled,
.toolbar-button[aria-disabled="true"],
[data-state-disabled] .toolbar-button {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.toolbar-button:disabled:hover,
[data-state-disabled] .toolbar-button:hover {
  background: transparent;
}

[data-state-disabled] .toolbar-chevron {
  color: var(--color-text-disabled);
}

@media (hover: none) {
  .toolbar-button:hover {
    background: transparent;
  }

  .toolbar-button[aria-pressed="true"]:hover {
    background: var(--color-interaction-pressed-bg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .toolbar-button {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (forced-colors: active) {
  .toolbar-button:focus-visible,
  [data-state-focus-visible] .toolbar-button-demo-target {
    outline-color: Highlight;
  }

  .toolbar-button[aria-pressed="true"],
  [data-state-toggled] .toolbar-button-demo-target {
    border-color: Highlight;
  }
}

/* tooltip — reference CSS. The popup is rendered in flow below the trigger
   in the demonstration; a host positions it with its anchoring primitive at
   z.popover. Visibility is the hidden attribute; hover and focus on the
   trigger are the real triggers and are paired with the forced-state
   attributes the state matrix emits. Token variables only. */

.tooltip {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  min-width: 0;
  color: var(--color-text-default);
}

.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  background: transparent;
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-action-tertiary-text);
  font: inherit;
  cursor: pointer;
}

.tooltip-popup {
  z-index: var(--z-popover);
  max-width: min(24rem, 100%);
  padding: var(--space-4) var(--space-8);
  background: var(--color-surface-raised);
  border: var(--border-width-default) solid var(--color-border-overlay);
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
  overflow-wrap: anywhere;
}

.tooltip-popup[hidden] {
  display: none;
}

.tooltip-shortcut {
  margin-inline-start: var(--space-4);
  padding: 0 var(--space-4);
  border: var(--border-width-default) solid var(--color-border-control);
  border-radius: var(--radius-none);
  color: var(--color-text-bright);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-ui-sm);
  white-space: nowrap;
}

/* hover: the trigger reacts; the popup follows after the open delay */
.tooltip-trigger:hover,
[data-state-hover] .tooltip-trigger {
  background: var(--color-action-tertiary-hover-bg);
}

/* focus-visible */
.tooltip-trigger:focus-visible,
[data-state-focus-visible] .tooltip-trigger {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* open: hover or focus on the trigger shows the popup */
.tooltip-trigger:hover + .tooltip-popup,
.tooltip-trigger:focus-visible + .tooltip-popup,
[data-state-open] .tooltip-popup {
  display: block;
}

/* closed */
[data-state-closed] .tooltip-popup {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .tooltip-popup {
    transition: opacity var(--motion-duration-fast);
  }
}

@media (hover: none) {
  .tooltip-trigger:hover {
    background: transparent;
  }
}

@media (forced-colors: active) {
  .tooltip-popup {
    border-color: CanvasText;
  }

  .tooltip-trigger:focus-visible,
  [data-state-focus-visible] .tooltip-trigger {
    outline-color: Highlight;
  }
}

/* wizard — reference CSS. Native buttons in an ordered list; the current
   step is aria-current="step". Every real pseudo-class is paired with the
   forced-state attribute the state matrix emits; [data-state-invalid] and
   [data-state-busy] are also the runtime hooks a host sets on the root. */

.wizard {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
  max-width: 36rem;
  color: var(--color-text-default);
}

.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--border-width-default) solid var(--color-border-divider);
}

.wizard-step {
  flex: 1 1 8rem;
  min-width: 0;
}

.wizard-step-button {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  min-height: var(--density-row-height, 36px);
  padding: 0 var(--density-control-padding-x, 12px);
  background: transparent;
  border: 0;
  border-bottom: var(--border-width-emphasis) solid transparent;
  border-radius: var(--radius-none);
  color: var(--color-text-default);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.wizard-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--icon-size-lg);
  font-variant-numeric: tabular-nums;
}

.wizard-step-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* complete: the ✓ in the success text colour, as a marker or as a suffix */
.wizard-step-complete .wizard-step-marker,
.wizard-step-done {
  color: var(--color-status-success-text);
}

.wizard-panel {
  padding: var(--space-12);
  background: var(--color-surface-default);
  border: var(--border-width-default) solid var(--color-border-default);
}

.wizard-title {
  margin: 0 0 var(--space-8);
  color: var(--color-text-bright);
  font-size: var(--font-size-h3);
  line-height: var(--font-line-height-h3);
  font-weight: var(--font-weight-bold);
}

.wizard-text {
  margin: 0;
}

.wizard-message {
  display: none;
  margin: var(--space-8) 0 0;
  color: var(--color-status-danger-text);
  font-size: var(--font-size-ui-sm);
  line-height: var(--font-line-height-ui-sm);
}

.wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}

.wizard-back,
.wizard-next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--density-control-height, 32px);
  padding: 0 var(--density-control-padding-x, 12px);
  border: var(--border-width-default) solid;
  border-radius: var(--radius-none);
  font: inherit;
  cursor: pointer;
}

.wizard-back {
  background: var(--color-action-secondary-bg);
  border-color: var(--color-action-secondary-border);
  color: var(--color-action-secondary-text);
}

.wizard-next {
  background: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-border);
  color: var(--color-action-primary-text);
}

.wizard-busy {
  display: none;
}

/* hover */
.wizard-step-button:hover:not(:disabled),
[data-state-hover] .wizard-step-button:not(:disabled) {
  background: var(--color-interaction-hover-bg);
}

.wizard-back:hover:not(:disabled),
[data-state-hover] .wizard-back:not(:disabled) {
  background: var(--color-action-secondary-hover-bg);
}

.wizard-next:hover:not(:disabled),
[data-state-hover] .wizard-next:not(:disabled) {
  background: var(--color-action-primary-hover-bg);
}

.wizard-back:active {
  background: var(--color-action-secondary-pressed-bg);
  border-color: var(--color-border-active);
}

.wizard-next:active {
  background: var(--color-action-primary-pressed-bg);
}

/* focus-visible: the dashed ring; on the primary fill it takes the on-fill colour */
.wizard-step-button:focus-visible,
.wizard-back:focus-visible,
[data-state-focus-visible] .wizard-step-button[aria-current="step"] {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.wizard-next:focus-visible,
[data-state-focus-visible] .wizard-next {
  outline: var(--border-width-default) dashed var(--color-interaction-focus-ring-container);
  outline-offset: var(--focus-offset);
}

/* current: the 2px indicator and bright text */
.wizard-step-button[aria-current="step"],
[data-state-current] .wizard-step-button[aria-current="step"] {
  border-bottom-color: var(--color-border-selected-indicator);
  color: var(--color-text-bright);
}

/* disabled: a future step (the matrix disables every button in the cell) */
.wizard-step-button:disabled,
[data-state-disabled] .wizard-step-button {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.wizard-step-button:disabled .wizard-step-marker,
.wizard-step-button:disabled .wizard-step-done,
[data-state-disabled] .wizard-step-marker,
[data-state-disabled] .wizard-step-done {
  color: var(--color-text-disabled);
}

.wizard-back:disabled,
[data-state-disabled] .wizard-back {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.wizard-next:disabled,
[data-state-disabled] .wizard-next {
  background: var(--color-interaction-disabled-bg);
  border-color: var(--color-border-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

/* invalid: the current step's marker becomes ✕ and the panel shows the message */
[data-state-invalid] .wizard-step-button[aria-current="step"] {
  border-bottom-color: var(--color-status-danger-border);
}

[data-state-invalid] .wizard-step-button[aria-current="step"] .wizard-step-marker {
  color: var(--color-status-danger-text);
  font-size: 0;
}

[data-state-invalid] .wizard-step-button[aria-current="step"] .wizard-step-marker::before {
  content: "✕";
  font-size: var(--font-size-ui-md);
}

[data-state-invalid] .wizard-message {
  display: block;
}

/* busy: aria-busy on the wizard; Next shows the static ⋯ glyph */
.wizard[aria-busy="true"] .wizard-busy,
[data-state-busy] .wizard-busy {
  display: inline;
}

.wizard[aria-busy="true"] .wizard-next,
[data-state-busy] .wizard-next {
  cursor: progress;
}

@media (hover: none) {
  .wizard-step-button:hover:not(:disabled) {
    background: transparent;
  }

  .wizard-back:hover:not(:disabled) {
    background: var(--color-action-secondary-bg);
  }

  .wizard-next:hover:not(:disabled) {
    background: var(--color-action-primary-bg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .wizard-step-button,
  .wizard-back,
  .wizard-next {
    transition: background-color var(--motion-duration-fast);
  }
}

@media (max-width: 600px) {
  .wizard-steps {
    flex-direction: column;
  }
}

@media (forced-colors: active) {
  .wizard-step-button:focus-visible,
  .wizard-back:focus-visible,
  .wizard-next:focus-visible,
  [data-state-focus-visible] .wizard-step-button[aria-current="step"],
  [data-state-focus-visible] .wizard-next {
    outline-color: Highlight;
  }

  .wizard-step-button[aria-current="step"] {
    border-bottom-color: Highlight;
  }
}

*, *::before, *::after { animation: none !important; transition: none !important; }