/* Layout for the /design-system gallery page only (not a component). Tokens only. */
.gallery { max-width: var(--size-content); margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); }
@media (width >= 40rem) { .gallery { padding-inline: var(--space-6); } }
.gallery__header { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: var(--border-thin) solid var(--color-border); }
.gallery__header p { color: var(--color-text-muted); max-width: var(--size-content-narrow); }
.gallery__section { padding-block: var(--space-10); border-bottom: var(--border-thin) solid var(--color-border); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.gallery__section > p { color: var(--color-text-muted); max-width: var(--size-content-narrow); }
.gallery__eyebrow { font: var(--type-overline); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.gallery__label { font: var(--type-caption); color: var(--color-text-muted); }
.gallery__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-6); }
.gallery__specimen { display: grid; justify-items: center; gap: var(--space-2); padding-top: var(--space-3); }
.gallery__panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-tile-min)), 1fr)); gap: var(--space-4); }
.gallery__panes--stacked { grid-template-columns: minmax(0, 1fr); } /* wide specimens (tile grids): light above dark, full width */
.gallery__pane { background: var(--color-bg); color: var(--color-text); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); display: grid; gap: var(--space-5); }
.gallery__pane--light { color-scheme: light; }
.gallery__pane--dark { color-scheme: dark; }
.gallery__drawing { width: calc(var(--space-16) * 3); height: auto; overflow: visible; }
.gallery__bids { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.gallery__bids li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.gallery__bids .who { flex: 1; font: var(--type-body); }
.gallery__bids .amount { font: var(--type-body); font-weight: var(--weight-semibold); color: var(--color-price); font-variant-numeric: var(--figures-amount); }
.gallery__bids .when { font: var(--type-caption); color: var(--color-text-muted); font-variant-numeric: var(--figures-amount); }
.gallery footer { padding-top: var(--space-6); font: var(--type-caption); color: var(--color-text-muted); }
.gallery__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-16) * 3)), 1fr)); gap: var(--space-4); }
.gallery__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-16) * 3.5)), 1fr)); gap: var(--space-6) var(--space-4); align-items: start; }
.gallery__form { display: grid; gap: var(--space-6); max-width: var(--size-content-narrow); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.gallery__form fieldset { display: grid; gap: var(--space-6); min-width: 0; margin: 0; padding: 0; border: 0; }
.gallery__form fieldset[hidden] { display: none; }
.gallery__stack { display: grid; gap: var(--space-5); }
.gallery__frame { position: relative; min-height: calc(var(--size-target) + var(--space-8)); }
.gallery__frame--tall { min-height: calc(var(--space-16) * 5); }
.gallery__stack { grid-template-columns: minmax(0, 1fr); }
.gallery__pane { grid-template-columns: minmax(0, 1fr); }
/* Placeholder photos for the gallery only, until the seed photos land (Milestone 2). */
.gallery__photo { display: grid; place-items: center; width: 100%; height: 100%; font: var(--type-display); color: var(--color-text); }
.gallery__photo--small { font: var(--type-label); }
.gallery__photo--accent-soft { background: var(--color-accent-soft); }
.gallery__photo--success-soft { background: var(--color-success-soft); }
.gallery__photo--warning-soft { background: var(--color-warning-soft); }
.gallery__photo--danger-soft { background: var(--color-danger-soft); }
.gallery__photo--banner { background: var(--color-banner); color: var(--color-on-banner); }