:root {
  --gallery-padding: var(--space-6);
  --gallery-gap: var(--space-4);
  --gallery-section-gap: var(--space-10);
  --gallery-width: var(--size-1060);
  --gallery-narrow-width: var(--size-320);
  --gallery-placement-height: var(--size-320);
  --gallery-switch-cell-width: var(--size-260);
  --gallery-radius: var(--radius-12);
  --gallery-border: var(--control-border-width) solid var(--color-border);
  --gallery-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --gallery-type-label-font: var(--font-type-code);
  --gallery-type-metadata-font: var(--font-type-caption);
  --gallery-type-font: var(--font-type-body);
  --gallery-colour-chip-size: var(--size-44);
}

.component-gallery {
  color-scheme: only light;
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-interface);
}

.component-gallery__main {
  max-inline-size: var(--gallery-width);
  padding: var(--gallery-padding);
  margin-inline: auto;
}

.component-gallery__stage {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gallery-gap);
  padding: var(--gallery-padding);
  border: var(--gallery-border);
  border-radius: var(--gallery-radius);
  background: var(--color-surface);
}

.component-gallery__stage--placements {
  flex-direction: column;
  justify-content: center;
  min-block-size: var(--gallery-placement-height);
}

.component-gallery__sidebar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sidebar-width)), 1fr));
  align-items: start;
  gap: var(--gallery-gap);
}

.component-gallery__sidebar-grid > * { min-inline-size: 0; }

.component-gallery__toast-narrow {
  max-inline-size: var(--gallery-narrow-width);
}

.component-gallery__stage--narrow {
  max-inline-size: var(--gallery-narrow-width);
}

.component-gallery__section {
  margin-block: var(--gallery-section-gap);
}

.component-gallery__main code {
  overflow-wrap: anywhere;
}

.component-gallery__table-scroll {
  overflow-x: auto;
  border: var(--gallery-border);
  border-radius: var(--gallery-radius);
  background: var(--color-surface);
}

.component-gallery__table-scroll:focus-visible {
  outline: var(--gallery-focus-outline);
  outline-offset: var(--focus-offset);
}

.component-gallery__table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}

.component-gallery__table caption,
.component-gallery__table th,
.component-gallery__table td {
  padding: var(--gallery-gap);
  text-align: start;
}

.component-gallery__table th,
.component-gallery__table td {
  border-top: var(--gallery-border);
  white-space: nowrap;
}

.component-gallery__switch-cell { min-inline-size: var(--gallery-switch-cell-width); }

.component-gallery__table small {
  color: var(--color-muted-foreground);
}

.component-gallery__colour-list { margin: 0; }
.component-gallery__colour-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gallery-narrow-width)), 1fr));
  gap: var(--gallery-gap);
  padding-block: var(--gallery-gap);
  border-block-end: var(--gallery-border);
}
.component-gallery__colour-row > * { min-inline-size: 0; overflow-wrap: anywhere; }
.component-gallery__colour-sample {
  --gallery-colour-border: var(--color-border);
  margin: 0;
  padding: var(--gallery-padding);
  border: var(--gallery-border);
  border-color: var(--gallery-colour-border);
  border-radius: var(--gallery-radius);
  background: var(--gallery-colour-background);
  color: var(--gallery-colour-foreground);
}
.component-gallery__colour-detail,
.component-gallery__colour-series li {
  display: flex;
  align-items: center;
  gap: var(--gallery-gap);
  margin: 0;
  min-inline-size: 0;
}
.component-gallery__colour-chip {
  display: block;
  flex: none;
  inline-size: var(--gallery-colour-chip-size);
  block-size: var(--gallery-colour-chip-size);
  border: var(--gallery-border);
  border-radius: var(--gallery-radius);
  background: var(--gallery-colour-background);
}
.component-gallery__colour-series {
  display: grid;
  gap: var(--gallery-gap);
  padding: 0;
  list-style: none;
}

.component-gallery__type-list { margin: 0; }

.component-gallery__type-row,
.component-gallery__type-role {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gallery-narrow-width)), 1fr));
  gap: var(--gallery-gap);
  padding-block: var(--gallery-padding);
  border-block-end: var(--gallery-border);
}

.component-gallery__type-row > *,
.component-gallery__type-role > * { min-inline-size: 0; }
.component-gallery__type-row dt code,
.component-gallery__type-role dt code { font: var(--gallery-type-label-font); }

.component-gallery__type-metadata {
  display: block;
  color: var(--color-muted-foreground);
  font: var(--gallery-type-metadata-font);
}

.component-gallery__type-sample {
  margin: 0;
  font: var(--gallery-type-font);
  overflow-wrap: anywhere;
}

.component-gallery__type-narrow {
  display: grid;
  gap: var(--gallery-gap);
  max-inline-size: var(--gallery-narrow-width);
}

.component-gallery__type-code {
  font: var(--gallery-type-label-font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.component-gallery__type-code code { font: inherit; }

.component-gallery__type-defaults { overflow-wrap: anywhere; }
.component-gallery__type-defaults fieldset {
  display: grid;
  gap: var(--gallery-gap);
  min-inline-size: 0;
  max-inline-size: var(--gallery-narrow-width);
}
.component-gallery__type-defaults :is(input, textarea, select) {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}
.component-gallery__type-defaults pre { white-space: pre-wrap; }