/* v2 only: utility classes that replace v1 inline styles (CSP forbids style=""). Tokens and percentages only. */

/* Width steps (0% to 100% in 5% increments) for meters and bars */
.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/* Avatar tones mapped to token pairs */
.tone-1, .avatar.tone-1, .tone-manual { background: var(--m-manual); color: var(--on-manual); }
.tone-2, .avatar.tone-2, .tone-hybrid { background: var(--m-hybrid); color: var(--on-hybrid); }
.tone-3, .avatar.tone-3, .tone-system { background: var(--m-system); color: var(--on-system); }
.tone-4, .avatar.tone-4, .tone-automated { background: var(--m-automated); color: var(--on-automated); }
.tone-5, .avatar.tone-5, .tone-unrated { background: var(--m-unrated); color: var(--on-unrated); }
.tone-6, .avatar.tone-6, .tone-accent { background: var(--accent); color: var(--on-accent); }

/* An <a> styled as v1's primary button (v1 only used <button>). */
a.primary-btn{text-decoration:none}