/* 08-pages/_showcase.css — showcase-only chrome (.sg-*). Sorts after components so it wins
   without !important. NEVER mixed into the shipping system. */
.sg-section { margin-block: var(--space-2xl) var(--space-xl); }
.sg-section__head { color: var(--text-dim); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); border-bottom: var(--bw) solid var(--line); padding-bottom: var(--space-2xs); margin-bottom: var(--space-lg); }
.sg-section__head b { color: var(--accent); }
.sg-spec { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.sg-spec__label { color: var(--text-dim); font-size: var(--text-xs); }
.sg-spec__label code { color: var(--accent); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18ch), 1fr)); gap: var(--space-sm); }
.sg-swatch { border: var(--bw) solid var(--line); }
.sg-swatch__chip { height: 3rem; }
.sg-swatch__meta { padding: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); }
.sg-swatch__name { color: var(--text); display: block; }
.sg-swatch__var { color: var(--text-dim); }
.sg-typescale > * { margin-block: var(--space-xs); }
.sg-typescale__row { color: var(--text); }
.sg-typescale__row small { color: var(--text-dim); margin-left: 2ch; font-size: var(--text-xs); }
.sg-surface { padding: var(--space-lg); background: var(--surface); border: var(--bw) dashed var(--line); }
.sg-note { color: var(--text-dim); font-size: var(--text-xs); max-width: var(--measure); }