/* styleguide.css — only the /styleguide page chrome (sg-* classes). The component stages use the theme CSS alone. */

.sg-header,
.sg-section,
.sg-meta {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  color: #1d1d1f;
  padding: 24px 32px;
  background: #f4f5f7;
  border-top: 1px solid #d0d4da;
}
.sg-h1 { font-size: 28px; line-height: 34px; margin: 0 0 8px; }
.sg-h2 { font-size: 18px; line-height: 24px; margin: 16px 0 8px; font-weight: 600; }
.sg-note { font-size: 13px; line-height: 20px; margin: 0; color: #4a4f57; }
/* integer line heights so every stage starts on a whole pixel (element screenshots are compared with the live) */
.sg-note code { line-height: 20px; }
.sg-note code, .sg-table code, .sg-swatch code, .sg-space code, .sg-type code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.sg-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 13px; }
.sg-toc a { color: #1c4263; text-decoration: underline; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sg-swatch { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.sg-swatch-chip { display: block; height: 44px; border: 1px solid #d0d4da; }
.sg-type { margin: 4px 0; font-size: 20px; line-height: 1.4; color: #1d1d1f; }
.sg-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.sg-table td, .sg-table th { border: 1px solid #d0d4da; padding: 4px 6px; text-align: left; vertical-align: top; }
.sg-space div { display: flex; align-items: center; gap: 10px; margin: 3px 0; }
.sg-space-bar { display: inline-block; height: 10px; background: #1c4263; }

/* The stage is the containing block of fixed/absolute component parts (cookie bar, ESPA badge, burger). */
.sg-stage {
  /* the live paints white containers over its fixed body::before background layer */
  background: #fff;
  position: relative;
  transform: translateZ(0);
  overflow: hidden;
}