/* ============================================================================
   POOOL — styleguide.css (Layer 4: styleguide page only)
   Layout/rhythm for the design-system reference page. Specimens on this page
   are the REAL shared classes/components (kit.css + components.css + DS
   tokens) — this file only frames and positions them; it never restyles a
   shared component (that's the whole point of the page). Tokens only.
   ============================================================================ */

body { background: var(--bg-page); }

.sg-main { max-width: var(--page-max-width); margin: 0 auto; padding: 40px var(--page-padding-x) 96px; }
.sg-intro h1 { font-size: var(--fs-5xl); font-weight: var(--fw-xbold); letter-spacing: -.03em; color: var(--fg-heading-2); margin: 0 0 10px; }
.sg-intro p { font-size: var(--fs-md); color: var(--fg-secondary); line-height: 1.6; max-width: 72ch; margin: 0 0 8px; }
.sg-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; }

.sg-section { padding: 40px 0 8px; margin-top: 24px; border-top: 1px solid var(--border-soft); scroll-margin-top: 84px; }
.sg-section > h2 { font-size: var(--fs-2xl); font-weight: var(--fw-xbold); letter-spacing: -.02em; color: var(--fg-heading-2); margin: 0 0 4px; }
.sg-section > p { font-size: var(--fs-sm); color: var(--fg-secondary); line-height: 1.6; max-width: 78ch; margin: 0 0 18px; }
.sg-sub { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--fg-heading-2); margin: 26px 0 12px; }

/* Where-to-edit hint: file + class in mono, used under headings and specimens */
.sg-src { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-muted); }
.sg-src b { font-weight: var(--fw-bold); color: var(--fg-secondary); }

/* Specimen frames — dashed page-level frames, deliberately NOT the card
   language so the framed components stay the only card surfaces in view */
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-card-lg); margin: 0 0 12px; }
.sg-row--stack { flex-direction: column; align-items: stretch; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 12px; }
.sg-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
.sg-cap { flex-basis: 100%; font-size: var(--fs-xs); color: var(--fg-muted); line-height: 1.5; }

/* Token tiles (colors, radii, shadows, sizes) */
.sg-tile { border: 1px solid var(--border-soft); border-radius: var(--radius-card-lg); padding: 12px; background: var(--bg-surface); }
.sg-swatch { height: 56px; border-radius: var(--radius-input); border: 1px solid var(--border-soft); margin-bottom: 10px; }
.sg-tile .sg-src { display: block; }
.sg-tile .sg-val { display: block; font-size: var(--fs-xs); color: var(--fg-disabled); margin-top: 2px; }

/* Type scale rows */
.sg-type { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; border-bottom: 1px dotted var(--border-strong); }
.sg-type:last-child { border-bottom: 0; }
.sg-type .sg-src { flex: none; width: 130px; }
.sg-type span:last-child { color: var(--fg-heading-2); line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dark band specimen needs a width-bounded column */
.sg-band { margin: 0 0 12px; }

/* On-brand backdrop for specimens that only read on blue (.btn--white) */
.sg-onbrand { display: inline-flex; background: var(--brand-blue); border-radius: var(--radius-input); padding: 8px; }

/* Inline dialog specimen: the .dlg frame is position-framed, not floating */
.sg-dialog-demo { display: flex; justify-content: center; background: var(--bg-hover); border-radius: var(--radius-card-lg); padding: 28px 16px; }

@media (max-width: 720px) {
  .sg-main { padding: 24px 20px 64px; }
  .sg-type { flex-direction: column; gap: 4px; }
  .sg-type span:last-child { white-space: normal; }
}