/* Compact reference layout; canonical tokens remain unchanged. */
#spacing.spacing-reference{container-type:inline-size;padding:var(--space-8);max-width:1440px}
#spacing .sp-system-layout{display:grid;grid-template-columns:minmax(240px,1.12fr) minmax(0,3fr);gap:var(--space-4);align-items:stretch}
#spacing .sp-scale-card,#spacing .sp-grid-card{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);min-width:0}
#spacing .sp-scale-card{padding:var(--space-4)}
#spacing .sp-scale-card header{min-height:var(--space-16);margin-bottom:var(--space-4)}
#spacing .sp-scale-card h3{margin:0 0 var(--space-1);font-size:var(--type-h4);line-height:1.3}
#spacing .sp-scale-card header p{font-size:var(--type-small);color:var(--muted);margin:0}
#spacing .sp-scale{margin:0}
#spacing .sp-scale-row{display:grid;grid-template-columns:var(--space-16) minmax(0,1fr) var(--space-10);align-items:center;gap:var(--space-2);height:calc(var(--space-8) + 1px);font-size:var(--type-small)}
#spacing .sp-scale-row dt{white-space:nowrap}#spacing .sp-scale-row dd{margin:0}
#spacing .sp-bar-track{min-width:0}
#spacing .sp-bar{display:block;height:var(--space-5);background:color-mix(in srgb,var(--color-brand-500) 14%,var(--bg));border-left:2px solid var(--color-teal-700);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
#spacing .sp-value{text-align:right;white-space:nowrap;color:var(--muted)}
#spacing .sp-grid-system{min-width:0}
#spacing .sp-grid-heading{padding-top:var(--space-2);margin-bottom:var(--space-6)}
#spacing .sp-grid-heading h3{font-size:var(--type-h4);line-height:1.3;margin:0 0 var(--space-1)}
#spacing .sp-grid-heading p{margin:0;font-size:var(--type-small);color:var(--muted);line-height:1.5}
#spacing .sp-platform-tabs{display:flex;gap:0;margin-bottom:var(--space-4)}
#spacing .sp-platform-tabs button{flex:1;min-width:0;min-height:var(--space-10);border:0;border-bottom:2px solid transparent;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);background:var(--surface);color:var(--muted);font-size:var(--type-body);font-weight:600;line-height:1.4;cursor:pointer}
#spacing .sp-platform-tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--text);border-bottom-color:var(--action)}
#spacing .sp-platform-tabs button:hover{color:var(--text)}
#spacing .sp-platform-tabs button:focus-visible,#spacing [role="tabpanel"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#spacing .sp-grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
#spacing [hidden]{display:none!important}
#spacing .sp-grid-card{padding:var(--space-4)}
#spacing .sp-grid-card h4{font-size:var(--type-body);font-weight:700;line-height:1.3;margin:0 0 var(--space-1)}
#spacing .sp-breakpoint{font-size:var(--type-small);color:var(--muted);line-height:1.5;margin:0 0 var(--space-3)}
#spacing .sp-columns{display:grid;grid-template-columns:repeat(var(--sp-cols),minmax(0,1fr));gap:calc(var(--sp-gutter) / 4);height:calc(var(--space-24) - var(--space-2));margin-bottom:var(--space-3)}
#spacing .sp-columns>span{display:block;background:color-mix(in srgb,var(--color-brand-500) 20%,var(--bg));border-radius:2px;min-width:0}
#spacing .sp-gutter-label{display:flex;align-items:center;gap:var(--space-2);min-height:var(--space-6);font-size:12px;color:var(--text);line-height:1.5;margin:0 0 var(--space-3)}
#spacing .sp-gutter-measure{display:block;width:var(--space-6);height:var(--space-5);position:relative;border-left:1px solid var(--muted);border-right:1px solid var(--muted);flex-shrink:0}
#spacing .sp-gutter-measure:before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--muted)}
#spacing .sp-card-specs{margin:0;font-size:12px}
#spacing .sp-card-specs>div{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);min-height:var(--space-8);padding-block:var(--space-1);border-top:1px solid var(--border)}
#spacing .sp-card-specs dt{color:var(--muted)}#spacing .sp-card-specs dd{margin:0;text-align:right;white-space:nowrap}
#spacing .sp-card-specs>div:first-child dt{color:var(--text)}
#spacing .sp-technical{margin-top:var(--space-4)}
#spacing .sp-technical dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:var(--space-4) 0}
#spacing .sp-technical dl>div{display:flex;gap:var(--space-2);flex-wrap:wrap}#spacing .sp-technical dd{margin:0;color:var(--muted)}
#spacing .sp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@container(max-width:900px){#spacing .sp-system-layout{grid-template-columns:minmax(0,1fr)}#spacing .sp-scale-card{max-width:100%}#spacing .sp-scale-row{grid-template-columns:var(--space-20) minmax(0,1fr) var(--space-12)}}
@container(max-width:600px){#spacing .sp-grid-cards{grid-template-columns:1fr}#spacing .sp-platform-tabs button{font-size:var(--type-small);padding-inline:var(--space-2)}#spacing .sp-technical dl{grid-template-columns:1fr}}