/* ============================================================
   Styleguide — living reference for the design system.
   Only applies within .styleguide.
   ============================================================ */

.styleguide {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.sg-lede {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--ink-muted);
  max-width: 60ch;
  margin: 0 0 var(--space-7);
}

.sg-section {
  margin: 0 0 var(--space-8);
}

.sg-section > h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-5);
}

.sg-note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
}

/* — Swatches — */
.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
}

.sg-swatch {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.sg-swatch .chip {
  height: 76px;
}

/* Swatch fills — literal palette values (classes because CSP forbids
   inline style attributes). */
.chip-ink     { background: var(--sw-black); }
.chip-paper   { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.chip-raised  { background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--rule); }
.chip-brand   { background: var(--sw-indian-lake); }
.chip-cool    { background: var(--sw-calamine-blue); }
.chip-reward  { background: var(--sw-lemon-yellow); }
.chip-danger  { background: var(--danger); }

/* A pinned progress demo for the styleguide (no JS needed here). */
.sg-progress-40 { --progress: 0.4; }
.sg-progress-80 { --progress: 0.8; }

.sg-swatch .meta {
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.sg-swatch .name {
  color: var(--ink);
  font-weight: 500;
}

.sg-swatch .role,
.sg-swatch .hex {
  color: var(--ink-faint);
  display: block;
}

/* — Type scale — */
.sg-type > * {
  margin: 0 0 var(--space-4);
}

.sg-type .label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* — Demo rows — */
.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sg-stack > * + * {
  margin-top: var(--space-4);
}