@layer components {
 .r4x-supporting-graphic { margin:var(--s4) 0; padding:var(--s4); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-muted); color:var(--text); min-width:0; }
 .r4x-supporting-graphic figcaption { font-weight:700; font-size:.875rem; margin-bottom:var(--s3); color:var(--text); }
 .r4x-supporting-graphic p { margin:var(--s2) 0 0; font-size:.8rem; color:var(--text-muted); }
 .r4x-supporting-graphic svg,.r4x-rule-graphic svg { display:block; width:100%; height:auto; overflow:visible; }
 .r4x-graphic-labels { display:flex; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s2); font-size:.8rem; line-height:1.5; color:var(--text-muted); }
 .r4x-graphic-labels > :last-child { text-align:right; }
 .r4x-policy-bars { display:grid; gap:var(--s5); }
 .r4x-policy-bar strong { display:block; margin-bottom:var(--s2); font-size:.875rem; }
 .r4x-policy-bar svg { max-height:var(--s7); }
 .r4x-supporting-graphic--compact svg { max-height:var(--s5); }
 .r4x-supporting-graphic .r4x-graphic-date { text-align:center; }
 .r4x-graphic-track { stroke:var(--border); }
 .r4x-graphic-base { fill:var(--border-soft); }
 .r4x-graphic-fill { fill:var(--accent-text); }
 .r4x-graphic-stroke { stroke:var(--accent-text); }
 .r4x-graphic-free { fill:var(--info); }
 .r4x-graphic-free-stroke { stroke:var(--info); }
 .r4x-graphic-mark { stroke:var(--text); }
 .r4x-rule-graphic { display:block; grid-column:1 / -1; width:100%; margin-top:var(--s2); }
 .r4x-rule-graphic svg { max-height:var(--s4); }
 .r4x-quota-ring { display:inline-flex; flex:0 0 auto; vertical-align:middle; width:var(--s5); height:var(--s5); margin-inline:var(--s2); }
 .r4x-quota-ring svg { display:block; width:100%; height:100%; }
}