/* Style-guide layout. Unlike other entry bundles (which stay self-contained and
   define their own tokens so the page outlives base-theme changes), this page's
   whole job is to *display* the live globals, so it deliberately leans on
   style.css's tokens — every swatch and control must track the real theme, not
   a frozen copy. */

/* Palette — one column per hue, the three steps stacked. */
.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  padding: 0;
}
.sg-hue {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.sg-chip {
  display: block;
  height: 1.4rem;
  outline: var(--border-thin) solid var(--rule);
  outline-offset: -1px;
}
.sg-chip:first-child {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.sg-chip:last-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.sg-hue figcaption {
  margin-top: var(--space-2xs);
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Controls — a labelled card per primitive, the demo's fieldset grammar. */
.sg-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}
.sg-field {
  margin: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border: var(--border-thin) solid var(--rule);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.sg-field > legend {
  padding: 0 0.5ch;
  color: var(--muted);
  font-size: var(--text-sm);
}
.sg-field label {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
}
.sg-field label.sg-stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xs);
  color: var(--muted);
}
/* The slider's live value readout (index.js). */
.sg-out {
  color: var(--fg);
  font-weight: var(--weight-bold);
}
.sg-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}