/* Layout for the design 003 component style guide (design/003/components.html). Tokens only; the components bring their own look. */
* { box-sizing: border-box; }
body { margin: 0; }
body.fd-design { font-size: var(--fm-text-md); line-height: 1.5; }
.cg-wrap { max-width: var(--fm-page-max); margin: 0 auto; padding: var(--fm-space-5) var(--fm-gutter-mobile) var(--fm-space-8); }
@media (min-width: 761px) { .cg-wrap { padding-inline: var(--fm-gutter); } }
.cg-trail { font-size: var(--fm-text-sm); color: var(--fm-ink-3); margin-bottom: var(--fm-space-4); }
.cg-trail a { display: inline-block; min-height: var(--fm-tap-min); line-height: var(--fm-tap-min); color: var(--fm-ink); text-decoration: underline; text-underline-offset: var(--fm-space-1); }
.cg-title { margin: 0; font-size: var(--fm-text-3xl); line-height: 1.15; }
.cg-lede { max-width: 72ch; margin: var(--fm-space-2) 0 var(--fm-space-5); color: var(--fm-ink-2); }
.cg-lede code, .cg-desc code, .cg-note code { font-family: var(--fm-font-mono); font-size: var(--fm-text-sm); }
.cg-h2 { margin: 0 0 var(--fm-space-2); font-size: var(--fm-text-2xl); line-height: 1.2; }
.cg-controls { margin-bottom: var(--fm-space-6); padding: var(--fm-space-5); background: var(--fm-surface); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-lg); }
.cg-controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fm-rail-left) - var(--fm-space-5))), 1fr)); gap: var(--fm-space-4) var(--fm-space-6); align-items: start; }
.cg-ctl { display: grid; gap: var(--fm-space-2); }
.cg-ctl-label { font-size: var(--fm-text-sm); font-weight: var(--fm-weight-bold); color: var(--fm-ink-2); }
.cg-range { width: 100%; min-height: var(--fm-tap-min); }
.cg-sec { margin-block: var(--fm-space-7); }
.cg-sec > h2 { margin: 0 0 var(--fm-space-1); font-size: var(--fm-text-2xl); line-height: 1.2; }
.cg-desc { max-width: 80ch; margin: 0 0 var(--fm-space-4); color: var(--fm-ink-2); }
.cg-demo { margin-block: var(--fm-space-5); }
.cg-demo > h3 { margin: 0 0 var(--fm-space-2); font-size: var(--fm-text-lg); }
.cg-note { margin: 0 0 var(--fm-space-3); font-size: var(--fm-text-sm); color: var(--fm-ink-3); }
.cg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-space-3); }
.cg-col { display: grid; gap: var(--fm-space-3); }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fm-rail-left) - var(--fm-space-4))), 1fr)); gap: var(--fm-space-4); align-items: start; }
.cg-grid-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--fm-rail-left) + var(--fm-space-8))), 1fr)); gap: var(--fm-space-4); align-items: start; }
.cg-pad { padding: var(--fm-space-4); background: var(--fm-bg); border-radius: var(--fm-radius-lg); }
.cg-narrow { max-width: calc(var(--fm-rail-left) + var(--fm-space-8)); }
.cg-chat { display: grid; gap: var(--fm-space-3); }