@import "./ui.css";
/* Workbench composition only. All specimens use the public UI styles above. */
.gallery-header, .gallery-main, .gallery-footer {
  max-width: 1120px;
  margin: auto;
  padding: var(--vb-space-6);
}
.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vb-space-4);
}
.gallery-main h1 {
  font-size: var(--vb-text-display);
  font-weight: var(--vb-weight-medium);
  letter-spacing: -0.04em;
  line-height: 1.15;
  max-width: 18ch;
}
.gallery-main h2 {
  font-size: 1.5rem;
  font-weight: var(--vb-weight-medium);
  margin: 0;
}
.gallery-main h3 {
  font-size: var(--vb-text-title);
}
.gallery-eyebrow {
  font: var(--vb-text-sm) var(--vb-font-mono);
  letter-spacing: 0.08em;
  color: var(--vb-color-muted);
}
.gallery-lead {
  font-size: var(--vb-text-title);
  line-height: var(--vb-leading);
  max-width: 65ch;
  color: var(--vb-color-muted);
}
.gallery-nav, .gallery-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vb-space-3);
}
.gallery-nav {
  padding-block: var(--vb-space-6);
  font-size: var(--vb-text-control);
}
.gallery-section {
  margin-block: var(--vb-space-6);
  scroll-margin-top: var(--vb-space-4);
}
.gallery-description {
  color: var(--vb-color-muted);
  font-size: var(--vb-text-control);
  line-height: var(--vb-leading);
  max-width: 78ch;
}
.gallery-sample {
  padding-block: var(--vb-space-6);
}
.gallery-sample > :is(.vb-segmented, .vb-field-label, .vb-field-row, .vb-select, .vb-range) {
  max-width: 460px;
}
.gallery-theme-pair {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--vb-space-4);
}
.gallery-theme {
  padding: var(--vb-space-4);
  border-radius: var(--vb-radius-panel);
}
.gallery-theme .vb-button {
  margin-top: var(--vb-space-4);
}
.gallery-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(125px,1fr));
  gap: var(--vb-space-3);
  margin-block: var(--vb-space-6);
}
.gallery-swatch {
  min-width: 0;
  font: var(--vb-text-sm)/1.5 var(--vb-font-mono);
}
.gallery-swatch i {
  display: block;
  height: 64px;
  border: 1px solid var(--vb-color-border);
  border-radius: var(--vb-radius-control);
  margin-bottom: var(--vb-space-2);
}
.gallery-swatch span {
  display: block;
  overflow-wrap: anywhere;
}
.gallery-table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font: var(--vb-text-sm)/1.6 var(--vb-font-mono);
}
th, td {
  padding: var(--vb-space-3);
  border-bottom: 1px solid var(--vb-color-border);
}
.type-display {
  font-size: var(--vb-text-display);
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.type-title {
  font-size: var(--vb-text-title);
}
.type-body {
  font-size: var(--vb-text-body);
  line-height: var(--vb-leading);
}
.type-control {
  font-size: var(--vb-text-control);
}
.type-small {
  font-size: var(--vb-text-sm);
  color: var(--vb-color-muted);
}
.gallery-footer {
  color: var(--vb-color-muted);
  font-size: var(--vb-text-sm);
}
@media (max-width: 600px) {
  .gallery-header {
  align-items: start;
}
  .gallery-header, .gallery-main, .gallery-footer {
  padding: var(--vb-space-4);
}
  .gallery-theme-pair {
  grid-template-columns: minmax(0,1fr);
}
  .gallery-section {
  padding: var(--vb-space-4);
}
}