.demo-controls {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  padding: 1rem;
  background: Canvas;
  color: CanvasText;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, CanvasText 20%, transparent);
  border-radius: 0;
  box-shadow: none;
}

.demo-controls label,
.demo-switch-control {
  display: grid;
  gap: .25rem;
  font: 700 .85rem system-ui, sans-serif;
}

.demo-controls select {
  min-height: 2.5rem;
  padding: .5rem;
  font: inherit;
}

.demo-switch-control {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .75rem;
  padding: .65rem .75rem;
  border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, Canvas 88%, CanvasText 12%);
  cursor: pointer;
}

.demo-switch-control input {
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}

.demo-switch-track {
  position: relative;
  inline-size: 3.35rem;
  block-size: 1.85rem;
  border: 1px solid color-mix(in srgb, CanvasText 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, Canvas 76%, CanvasText 24%);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .18);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.demo-switch-thumb {
  position: absolute;
  inset-block-start: .2rem;
  inset-inline-start: .2rem;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border-radius: 50%;
  background: Canvas;
  box-shadow: 0 2px 8px rgb(0 0 0 / .25);
  transition: transform 180ms ease, background 180ms ease;
}

.demo-switch-control input:focus-visible + .demo-switch-track {
  outline: 3px solid Highlight;
  outline-offset: 3px;
}

.demo-switch-control input:checked + .demo-switch-track {
  background: Highlight;
  border-color: Highlight;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .2), 0 0 0 3px color-mix(in srgb, Highlight 22%, transparent);
}

.demo-switch-control input:checked + .demo-switch-track .demo-switch-thumb {
  transform: translateX(1.5rem);
  background: Canvas;
}

.demo-switch-copy {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.demo-switch-copy strong {
  color: CanvasText;
}

.demo-switch-copy span {
  color: color-mix(in srgb, CanvasText 72%, transparent);
  font-weight: 650;
}

.demo-showcase {
  min-height: 100vh;
}

.demo-section-lede {
  max-width: 72rem;
}

.demo-showcase-grid,
.demo-native-grid,
.demo-state-grid,
.demo-token-grid,
.demo-bridge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  align-items: start;
  grid-auto-flow: dense;
}

.demo-showcase-grid > *,
.demo-native-grid > *,
.demo-state-grid > *,
.demo-token-grid > *,
.demo-bridge-grid > * {
  min-width: 0;
}

/* The component showcase needs a tighter tablet grid than the wider native-element samples. */
#components .demo-showcase-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr));
}

#components .demo-showcase-grid > article {
  display: grid;
  align-content: start;
}

#components .demo-showcase-grid h3 {
  font-size: clamp(1.08rem, 1.4vw, 1.55rem);
  line-height: 1.18;
}

#components .demo-showcase-grid > [data-testid="component-table"] {
  align-content: stretch;
}

.demo-control-card {
  gap: 1.15rem;
  overflow: visible;
}

.demo-control-showcase {
  display: grid;
  grid-template-areas:
    "buttons progress"
    "buttons loading"
    "tooltips tooltips";
  grid-template-columns: minmax(14rem, .9fr) minmax(16rem, 1fr);
  gap: 1rem;
  align-items: start;
}

.demo-control-panel {
  display: grid;
  gap: .75rem;
  min-width: 0;
  padding-block-start: .8rem;
  border-block-start: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.demo-control-panel h4 {
  margin: 0;
  font-size: .82rem;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-control-panel[data-testid="component-buttons"] {
  grid-area: buttons;
}

.demo-control-panel[data-testid="component-progress"] {
  grid-area: progress;
}

.demo-control-panel[data-testid="component-spinner"] {
  grid-area: loading;
}

.demo-control-panel[data-testid="component-tooltips"] {
  grid-area: tooltips;
}

.demo-progress-stack {
  display: grid;
  gap: .55rem;
}

.demo-tooltip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  padding-block-end: .45rem;
}

.demo-badge-showcase {
  display: grid;
  gap: .8rem;
}

.demo-badge-group {
  display: grid;
  gap: .45rem;
  padding-block-start: .72rem;
  border-block-start: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.demo-badge-group:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.demo-badge-label {
  margin: 0;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.demo-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: .52rem;
  align-items: center;
}

@media (min-width: 720px) and (max-width: 979.98px) {
  #components .demo-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #components .demo-showcase-grid > [data-testid="component-controls"],
  #components .demo-showcase-grid > [data-testid="component-buttons-states"],
  #components .demo-showcase-grid > [data-testid="component-fields"],
  #components .demo-showcase-grid > [data-testid="component-table"] {
    grid-column: 1 / -1;
  }
}

@media (min-width: 980px) {
  #components .demo-showcase-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  #components .demo-showcase-grid > [data-testid="component-controls"] {
    grid-column: span 7;
  }

  #components .demo-showcase-grid > [data-testid="component-buttons-states"] {
    grid-column: span 5;
  }

  #components .demo-showcase-grid > [data-testid="component-fields"] {
    grid-column: span 5;
  }

  #components .demo-showcase-grid > [data-testid="component-badges"] {
    grid-column: span 3;
  }

  #components .demo-showcase-grid > [data-testid="component-alerts"] {
    grid-column: span 4;
  }

  #components .demo-showcase-grid > [data-testid="component-table"] {
    grid-column: 1 / -1;
  }
}

.demo-table-card {
  padding: clamp(1rem, 2vw, 1.4rem);
}

.demo-table-card table {
  inline-size: 100%;
}

.demo-tight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .75rem;
}

.demo-state-sample,
.demo-native-sample,
.demo-token-sample {
  display: grid;
  gap: .65rem;
  min-width: 0;
}

.demo-state-sample > p,
.demo-native-sample > p,
.demo-token-sample > p {
  margin: 0;
}

.demo-button-row,
.demo-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
}

.demo-color-chip-grid,
.demo-utility-surface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: .65rem;
}

.demo-color-chip,
.demo-utility-surface {
  display: grid;
  gap: .35rem;
  min-width: 0;
  padding: .75rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: .75rem;
  background: color-mix(in srgb, Canvas 88%, CanvasText 12%);
}

.demo-color-chip {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.demo-color-swatch {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border-radius: 50%;
  background: var(--demo-token-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, CanvasText 18%, transparent);
}

.demo-color-chip small {
  display: block;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: .78rem;
  line-height: 1.35;
}

.demo-utility-layout-sample {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.demo-utility-label {
  margin: 0;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin-block-start: 1rem;
}

.demo-resource-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  padding: .45rem .72rem;
  border: 1px solid rgb(var(--usk-border-rgb, 180 188 205) / .68);
  border-radius: .65rem;
  background: rgb(var(--usk-surface-soft-rgb, 244 247 251) / .92);
  color: rgb(var(--usk-link-rgb, 64 94 184));
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}

.demo-resource-links a:is(:hover, :focus-visible) {
  border-color: rgb(var(--usk-primary-rgb, 64 94 184) / .78);
  background: rgb(var(--usk-primary-rgb, 64 94 184) / .12);
}

.demo-token-workbench {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid rgb(var(--usk-border-rgb, 180 188 205) / .72);
  border-radius: .8rem;
  background:
    linear-gradient(135deg, rgb(var(--usk-primary-rgb, 64 94 184) / .08), transparent 46%),
    rgb(var(--usk-surface-rgb, 255 255 255) / .96);
  color: rgb(var(--usk-text-rgb, 21 26 39));
}

.demo-token-workbench h2,
.demo-token-workbench p {
  margin: 0;
}

.demo-token-kicker {
  margin: 0;
  color: rgb(var(--usk-primary-rgb, 64 94 184));
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-token-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
}

.demo-token-copy,
.demo-token-reset {
  min-block-size: 2.4rem;
  border: 1px solid rgb(var(--usk-border-rgb, 180 188 205) / .76);
  border-radius: .65rem;
  font: 800 .88rem system-ui, sans-serif;
  cursor: pointer;
}

.demo-token-copy {
  padding: .55rem .85rem;
  background: rgb(var(--usk-primary-rgb, 64 94 184));
  color: rgb(var(--usk-primary-text-rgb, 255 255 255));
}

.demo-token-reset {
  padding-inline: .7rem;
  background: rgb(var(--usk-surface-soft-rgb, 244 247 251));
  color: rgb(var(--usk-text-rgb, 21 26 39));
}

.demo-token-copy:is(:hover, :focus-visible),
.demo-token-reset:is(:hover, :focus-visible) {
  filter: brightness(1.04);
}

.demo-copy-status {
  min-inline-size: 4.5rem;
  color: rgb(var(--usk-success-rgb, 17 122 88));
  font-weight: 850;
}

.demo-token-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .85fr);
  gap: 1rem;
  align-items: start;
}

.demo-token-table {
  display: grid;
  gap: .65rem;
  max-block-size: 36rem;
  overflow: auto;
  padding-inline-end: .2rem;
}

.demo-token-row {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) 3.25rem auto;
  gap: .65rem;
  align-items: end;
  min-width: 0;
  padding: .68rem;
  border: 1px solid rgb(var(--usk-border-rgb, 180 188 205) / .58);
  border-radius: .7rem;
  background: rgb(var(--usk-surface-soft-rgb, 244 247 251) / .74);
}

.demo-token-swatch {
  inline-size: 2.35rem;
  block-size: 2.35rem;
  align-self: center;
  border: 1px solid rgb(var(--usk-border-rgb, 180 188 205) / .82);
  border-radius: .55rem;
  background:
    linear-gradient(45deg, rgb(255 255 255 / .45) 0 25%, transparent 25% 50%, rgb(255 255 255 / .45) 50% 75%, transparent 75%),
    var(--demo-token-color);
  background-size: .75rem .75rem, auto;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08);
}

.demo-token-row label {
  display: grid;
  gap: .28rem;
  min-width: 0;
}

.demo-token-row label span {
  color: rgb(var(--usk-text-muted-rgb, 87 99 123));
  font-size: .8rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.demo-token-input,
.demo-token-color {
  min-block-size: 2.4rem;
  border: 1px solid rgb(var(--usk-border-rgb, 180 188 205) / .72);
  border-radius: .55rem;
  background: rgb(var(--usk-surface-rgb, 255 255 255));
  color: rgb(var(--usk-text-rgb, 21 26 39));
}

.demo-token-input {
  inline-size: 100%;
  min-width: 0;
  padding: .45rem .55rem;
  font: 800 .9rem ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.demo-token-color {
  inline-size: 3.25rem;
  padding: .2rem;
}

.demo-theme-override-block {
  align-self: stretch;
}

.demo-code-block {
  position: relative;
  min-width: 0;
}

@media (max-width: 760px) {
  .demo-control-showcase {
    grid-template-areas:
      "buttons"
      "progress"
      "loading"
      "tooltips";
    grid-template-columns: 1fr;
  }
}

.demo-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .85rem;
}

.demo-media-box,
.demo-object,
.demo-embed,
.demo-iframe {
  display: block;
  inline-size: 100%;
  min-block-size: 8rem;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: .75rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, currentColor 16%, transparent), transparent 55%),
    color-mix(in srgb, Canvas 92%, CanvasText 8%);
}

.demo-canvas {
  aspect-ratio: 16 / 7;
}

.demo-inline-dialog {
  position: static;
  display: block;
  inline-size: 100%;
  margin: 0;
}

.demo-code {
  min-block-size: 100%;
  margin: 0;
  padding: 1rem 3.3rem 1rem 1rem;
  overflow: auto;
  border: 1px solid rgb(var(--usk-border-rgb, 180 188 205) / .72);
  border-radius: .75rem;
  background: rgb(var(--usk-surface-strong-rgb, 235 239 247) / .88);
  color: rgb(var(--usk-text-rgb, 21 26 39));
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.demo-copy-button {
  position: absolute;
  inset-block-start: .55rem;
  inset-inline-end: .55rem;
  display: inline-grid;
  place-items: center;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  border: 1px solid rgb(var(--usk-border-rgb, 180 188 205) / .82);
  border-radius: .6rem;
  background: rgb(var(--usk-surface-rgb, 255 255 255) / .94);
  color: rgb(var(--usk-text-rgb, 21 26 39));
  cursor: pointer;
}

.demo-copy-button svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  fill: currentColor;
}

.demo-copy-button:is(:hover, :focus-visible),
.demo-copy-button.is-copied {
  border-color: rgb(var(--usk-primary-rgb, 64 94 184) / .82);
  color: rgb(var(--usk-primary-rgb, 64 94 184));
}

.demo-copy-tooltip {
  position: absolute;
  inset-block-end: calc(100% + .45rem);
  inset-inline-end: 0;
  z-index: 2;
  inline-size: max-content;
  max-inline-size: 12rem;
  padding: .38rem .5rem;
  border-radius: .45rem;
  background: rgb(var(--usk-text-rgb, 21 26 39));
  color: rgb(var(--usk-bg-rgb, 255 255 255));
  font-size: .76rem;
  font-weight: 850;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  transform: translateY(.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Keep the tooltip as a sibling so the icon button remains compact while hover/focus reveals nearby help text. */
.demo-copy-button:is(:hover, :focus-visible) + .demo-copy-tooltip,
.demo-copy-button.is-copied + .demo-copy-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.demo-native-table-scroll {
  overflow-x: auto;
}

.demo-bridge-preview .demo-switch-control {
  max-inline-size: 36rem;
  margin-block: 1rem 1.25rem;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.demo-bridge-preview .demo-switch-copy strong {
  color: inherit;
}

.demo-bridge-preview .demo-switch-copy span {
  color: color-mix(in srgb, currentColor 72%, transparent);
}

.demo-bridge-preview .interactive-surface {
  display: grid;
  gap: .5rem;
  min-block-size: 7rem;
  align-content: start;
  padding: 1rem;
}

.demo-bridge-preview small {
  color: inherit;
  opacity: .8;
}

@media (max-width: 720px) {
  .demo-controls {
    position: static;
  }

  .demo-token-workbench-grid {
    grid-template-columns: 1fr;
  }

  .demo-token-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .demo-token-color,
  .demo-token-reset {
    grid-column: 2;
  }
}