/* Specimen-only layout. All brand values come from material3.css. */
.system-guide {
  padding-bottom: 0;
}
.type-specimens > article {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--outline-soft);
  min-width: 0;
}
.type-specimens code {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.type-specimens p {
  margin-block: 1rem;
}
.token-grid,
.component-specimens {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.swatch {
  padding: 1.5rem;
  border: 1px solid var(--outline);
  border-radius: var(--radius-large);
  display: grid;
  gap: 0.75rem;
}
.swatch code {
  overflow-wrap: anywhere;
  font-size: 0.875rem;
}
.component-specimens > label {
  display: grid;
  gap: 0.5rem;
}
.specimen-display-large {
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-weight);
}
.specimen-display-medium {
  font-size: var(--md-sys-typescale-display-medium-size);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  font-weight: var(--md-sys-typescale-display-medium-weight);
}
.specimen-display-small {
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  font-weight: var(--md-sys-typescale-display-small-weight);
}
.specimen-headline-large {
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-weight);
}
.specimen-headline-medium {
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
}
.specimen-headline-small {
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: var(--md-sys-typescale-headline-small-weight);
}
.specimen-title-large {
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
}
.specimen-title-medium {
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
}
.specimen-title-small {
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: var(--md-sys-typescale-title-small-weight);
}
.specimen-body-large {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
}
.specimen-body-medium {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  font-weight: var(--md-sys-typescale-body-medium-weight);
}
.specimen-body-small {
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-weight: var(--md-sys-typescale-body-small-weight);
}
.specimen-label-large {
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
.specimen-label-medium {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
}
.specimen-label-small {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: var(--md-sys-typescale-label-small-weight);
}
.swatch-background {
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-surface);
}
.swatch-surface {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.swatch-surface-container {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.swatch-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.swatch-primary-container {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.swatch-secondary-container {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.swatch-error-container {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}
@media (min-width: 600px) {
  .token-grid,
  .component-specimens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}