/* Layout for the style guide page only. */
.sg code{font-size:var(--fs-xs);color:var(--ink-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sg-sec{padding-block:var(--s-12);border-top:1px solid var(--line)}
.sg-h{font-size:clamp(26px,2.6vw,32px);margin-bottom:var(--s-4)}
.sg-sub{font-family:var(--body);font-size:var(--fs-md);font-weight:600;color:var(--ink-2);margin:var(--s-6) 0 var(--s-3)}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-4)}
.sg-swatch{margin:0;display:flex;flex-direction:column;gap:8px}
.sg-swatch span{height:72px;border-radius:var(--r-md);border:1px solid var(--line)}
.sg-swatch figcaption{display:flex;flex-direction:column;font-size:var(--fs-sm)}
.sg-type{display:flex;flex-direction:column;gap:var(--s-6)}
.sg-type>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--s-4);align-items:baseline}
.sg-type p{margin:0}
.sg-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:var(--s-4)}
.sg-stack{display:flex;flex-direction:column;gap:12px;max-width:640px}
.sg-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-10)}
.sg-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.sg-icons figure{margin:0;padding:16px 8px;border-radius:var(--r-md);background:var(--panel);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gold)}
.sg-icons figcaption{font-size:var(--fs-xs);color:var(--ink-3)}
.sg-space{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--s-6)}
.sg-space div{display:flex;align-items:center;gap:12px}
.sg-space span{display:block;height:12px;background:var(--gold);border-radius:2px}
.sg-radius{width:96px;height:72px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:flex-end;padding:8px}
@media (max-width:820px){.sg-grid2{grid-template-columns:minmax(0,1fr)}.sg-type>div{grid-template-columns:minmax(0,1fr);gap:4px}}