/* Demo-only layout. Nothing here is part of the design system. */
.demo-toolbar { align-items: flex-end; padding-top: 28px; }
.demo-intro { margin-bottom: 0; }
.demo-intro h2 { font-family: var(--mds-font-display); font-size: var(--mds-text-title); font-weight: 600; line-height: 1.4; }
.demo-intro a { color: var(--mds-accent-ink); text-underline-offset: 3px; }
.mds-workspace > .mds-stack, .mds-workspace > .demo-toolbar { width: min(100% - 2 * var(--mds-gutter), 880px); }
.demo-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.demo-centre { min-height: var(--mds-control-height); }
.demo-push { margin-left: auto; }
.demo-card-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.demo-card-main > div:first-child { flex: 1 1 260px; }
.demo-loading { min-height: 0; justify-content: flex-start; padding-top: 6px; }
.demo-type { padding-top: 4px; }

.demo-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 20px; }
.demo-swatch-set { display: grid; gap: 8px; align-content: start; }
.demo-swatch-set h3 { margin: 0 2px; color: var(--mds-muted); font-family: var(--mds-font-heading); font-size: var(--mds-text-caption); font-weight: 400; }
.demo-swatch-list { overflow: hidden; border: 1px solid var(--mds-line); border-radius: var(--mds-radius-lg); background: var(--mds-surface); }
.demo-swatch { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--mds-line); }
.demo-swatch:first-child { border-top: 0; }
.demo-swatch i { width: 28px; height: 28px; border-radius: var(--mds-radius-sm); box-shadow: inset 0 0 0 1px var(--mds-line); }
.demo-swatch code { padding: 0; background: none; color: var(--mds-ink); font-size: var(--mds-text-caption); }
.demo-swatch span { display: block; color: var(--mds-faint); font: var(--mds-text-caption)/1.4 var(--mds-mono); }

.demo-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.demo-icons figure { display: grid; justify-items: center; gap: 4px; width: 64px; margin: 0; padding: 8px 0 6px; border-radius: var(--mds-radius-sm); color: var(--mds-ink-soft); }
.demo-icons figure:hover { background: var(--mds-hover); color: var(--mds-ink); }
.demo-icons .mds-icon { width: 20px; height: 20px; }
.demo-icons figcaption { color: var(--mds-faint); font: 10px/1.3 var(--mds-mono); }

@media (max-width: 640px) { .demo-toolbar { padding-top: 20px; } }
.mds-row-label code, .mds-section-heading code { white-space: nowrap; }