/* Documentation layout only; examples consume the production design system. */
.ds-page{background:var(--color-surface);color:var(--color-text)}
.ds-header{display:flex;align-items:center;gap:var(--space-4);max-width:1320px;margin:auto;padding:var(--space-5-half) var(--space-10);border-bottom:1px solid var(--color-border)}
.ds-brand{font-size:var(--font-size-lead);font-weight:var(--font-weight-semibold)}.ds-brand span{font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-muted);margin-left:var(--space-2-half)}.ds-back{margin-left:auto;font-size:var(--font-size-sm);color:var(--color-action)}
.ds-layout{max-width:1320px;margin:auto;display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-12);padding:0 var(--space-10)}
.ds-nav{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:var(--space-1-half);padding:var(--space-11) 0 var(--space-6)}.ds-nav a{padding:var(--space-2) var(--space-2-half);border-radius:var(--radius-control);color:var(--color-text-muted)}.ds-nav a:hover{background:var(--color-surface-hover);color:var(--color-action)}
.ds-eyebrow{font-size:11px;font-weight:var(--font-weight-semibold);letter-spacing:1.5px;color:var(--color-text-brand);margin:0 0 var(--space-4)}.ds-main{min-width:0;width:100%;padding:0;max-width:none}.ds-hero{padding:var(--space-14) 0 var(--space-10)}.ds-hero h1{font-size:clamp(30px,3.5vw,44px);line-height:1.3;letter-spacing:-1px;font-weight:var(--font-weight-medium);margin:0 0 var(--space-6)}.ds-lead{font-size:var(--font-size-body);line-height:1.8;color:var(--color-text-muted)}.ds-hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);padding-top:var(--space-5);font-size:var(--font-size-xs);color:var(--color-text-brand)}
.ds-section{scroll-margin-top:24px;padding:var(--space-10) 0;border-top:1px solid var(--color-border)}.ds-section-head{display:flex;align-items:baseline;gap:var(--space-3-half);margin-bottom:var(--space-6)}.ds-section-head>span{font-size:var(--font-size-xs);color:var(--color-text-brand)}.ds-section h2{font-size:var(--font-size-heading);font-weight:var(--font-weight-medium);margin:0}.ds-section h3{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-3)}.ds-description{max-width:720px;color:var(--color-text-muted);margin:0 0 var(--space-6)}.ds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}.ds-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.ds-grid .wf-card{min-width:0}.wf-card p:last-child{margin-bottom:0}.ds-grid .wf-card>p{color:var(--color-text-muted);font-size:var(--font-size-sm)}
.ds-swatch{border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden}.ds-swatch-color{height:72px}.ds-swatch-copy{padding:var(--space-3-half)}.ds-swatch-copy strong{display:block;font-size:var(--font-size-sm)}.ds-swatch-copy code{display:block;font-size:11px;color:var(--color-text-muted);overflow-wrap:anywhere;margin-top:var(--space-1-half)}.ds-status-row,.ds-button-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin:var(--space-5) 0}.ds-type-list>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--space-5);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}.ds-type-list code{font-size:var(--font-size-xs);color:var(--color-text-muted)}.ds-type-list p{margin:0}.ds-type-title{font-size:var(--font-size-title)}.ds-type-heading{font-size:var(--font-size-heading)}.ds-type-lead{font-size:var(--font-size-lead)}.ds-type-reading{font-size:var(--font-size-reading);line-height:var(--line-height-reading)}.ds-type-meta{font-size:var(--font-size-xs);color:var(--color-text-muted)}
.ds-spacing{display:flex;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap;padding:var(--space-6);background:var(--color-surface-subtle);border-radius:var(--radius-card)}.ds-spacing-item{display:flex;flex-direction:column;gap:var(--space-3);align-items:center;font-size:var(--font-size-xs);color:var(--color-text-muted)}.ds-spacing-bar{width:24px;background:var(--color-action)}.ds-shape-grid{margin:var(--space-5) 0}.ds-shape{display:grid;place-items:center;width:72px;height:48px;border:1px solid var(--color-border-input);background:var(--color-surface-subtle);margin-bottom:var(--space-5);font-size:var(--font-size-xs)}.ds-shape--control{border-radius:var(--radius-control)}.ds-shape--card{border-radius:var(--radius-card)}.ds-shape--dialog{border-radius:var(--radius-dialog)}.ds-focus-sample{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.ds-form{display:flex;flex-direction:column;gap:var(--space-5)}.ds-form>.wf-button{align-self:flex-start}.ds-page hr{border:0;border-top:1px solid var(--color-border);margin:var(--space-6) 0}.ds-demo-canvas{margin-top:var(--space-5)}.ds-pan-surface{height:320px;overflow:hidden;touch-action:none;cursor:grab}.ds-pan-surface:active{cursor:grabbing}.ds-pan-surface svg{display:block;width:100%;height:100%;color:var(--color-border-input);transform-origin:center}.ds-pan-surface circle{fill:var(--color-surface);stroke:var(--color-action);stroke-width:2}.ds-pan-surface text{fill:var(--color-action);font-size:var(--font-size-body);text-anchor:middle}.ds-pattern-grid{margin-top:var(--space-6)}.ds-card-image{width:100%;aspect-ratio:8/3;object-fit:contain;background:var(--color-surface-subtle);border-radius:var(--radius-card)}.ds-floating-preview{height:170px;position:relative;background:var(--color-surface-subtle);border:1px dashed var(--color-border-input);border-radius:var(--radius-card);margin:var(--space-5) 0}.ds-floating-preview .floating-actions{position:absolute;right:16px;bottom:16px}.ds-file-list p{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}.ds-file-list span{color:var(--color-text-muted);font-size:var(--font-size-sm)}.ds-page code{font-family:var(--font-code)}.ds-page pre{padding:var(--space-5);background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:auto;font-size:var(--font-size-xs)}.ds-footer{padding:var(--space-6) var(--space-10)!important}
@media(max-width:1000px){.ds-layout{grid-template-columns:170px minmax(0,1fr);gap:var(--space-6)}.ds-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ds-header{padding:var(--space-4-half);gap:var(--space-2-half);flex-wrap:wrap}.ds-brand span{display:block;margin:0;font-size:11px}.ds-back{font-size:var(--font-size-xs)}.ds-layout{display:block;padding:0 var(--space-4-half)}.ds-nav{position:static;flex-direction:row;flex-wrap:wrap;padding:var(--space-5) 0;gap:var(--space-1);border-bottom:1px solid var(--color-border)}.ds-nav .ds-eyebrow{width:100%;margin-bottom:var(--space-1-half)}.ds-nav a{font-size:var(--font-size-xs);padding:var(--space-1-half) var(--space-2)}.ds-hero{padding:var(--space-8) 0}.ds-hero h1{font-size:var(--font-size-title)}.ds-section{padding:var(--space-8) 0}.ds-section h2{font-size:21px}.ds-grid{grid-template-columns:1fr}.ds-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-grid--three .wf-card{padding:var(--space-4)}.ds-type-list>div{grid-template-columns:1fr;gap:var(--space-2)}.ds-file-list p{grid-template-columns:1fr;gap:var(--space-1)}.ds-spacing{gap:var(--space-4);padding:var(--space-4)}.ds-type-title{font-size:var(--font-size-heading)}.ds-swatch-copy{padding:var(--space-2-half)}.ds-swatch-copy code{font-size:10px}.ds-footer{padding:var(--space-5) var(--space-4-half)!important}}
@media(max-width:380px){#principles .ds-grid{grid-template-columns:1fr}.ds-brand{font-size:var(--font-size-body)}}

/* Shared display typography specimens. */
.ds-type-title,.ds-type-heading,.ds-hero h1,.ds-section h2{font-family:var(--font-display);font-weight:var(--font-weight-bold)}
.ds-type-english{font-family:var(--font-display-en);font-size:var(--font-size-title);font-weight:var(--font-weight-semibold);line-height:1.3}

/* Specimen composition only; all card styles come from components.css. */
.ds-glass-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--space-6);padding:var(--space-8);margin-bottom:var(--space-4);border-radius:var(--radius-card);background:linear-gradient(120deg,var(--color-surface) 0 40%,var(--color-sky) 40% 65%,var(--color-charcoal) 65%)}
@media(max-width:760px){.ds-glass-stage{grid-template-columns:1fr;padding:var(--space-4)}}