/* Role accents express active identity, while status colors keep their meanings. */
html[data-page-role="customer"] { --md-sys-color-primary: #3f5f96; --md-sys-color-on-primary: #fff; --md-sys-color-primary-container: #d8e3ff; --md-sys-color-on-primary-container: #001a41; --md-sys-color-secondary: #565f71; --md-sys-color-secondary-container: #dae2f9; --md-sys-color-on-secondary-container: #131c2b; --role-accent: var(--md-sys-color-primary); --role-soft: var(--md-sys-color-primary-container); --role-dark: var(--md-sys-color-on-primary-container); }
html[data-page-role="worker"] { --md-sys-color-primary: #006b52; --md-sys-color-on-primary: #fff; --md-sys-color-primary-container: #8df7d1; --md-sys-color-on-primary-container: #002116; --md-sys-color-secondary: #4d6358; --md-sys-color-secondary-container: #d0e8d9; --md-sys-color-on-secondary-container: #0b1f15; --role-accent: var(--md-sys-color-primary); --role-soft: var(--md-sys-color-primary-container); --role-dark: var(--md-sys-color-on-primary-container); }
html[data-page-role="assessor"] { --md-sys-color-primary: #6d4d9c; --md-sys-color-on-primary: #fff; --md-sys-color-primary-container: #ecdcff; --md-sys-color-on-primary-container: #270e50; --md-sys-color-secondary: #645b70; --md-sys-color-secondary-container: #e8def8; --md-sys-color-on-secondary-container: #1f172b; --role-accent: var(--md-sys-color-primary); --role-soft: var(--md-sys-color-primary-container); --role-dark: var(--md-sys-color-on-primary-container); }
html[data-page-role="operator"] { --md-sys-color-primary: #535f72; --md-sys-color-on-primary: #fff; --md-sys-color-primary-container: #d7e3f9; --md-sys-color-on-primary-container: #101c2b; --md-sys-color-secondary: #5b6070; --md-sys-color-secondary-container: #dfe2f9; --md-sys-color-on-secondary-container: #171b2b; --role-accent: var(--md-sys-color-primary); --role-soft: var(--md-sys-color-primary-container); --role-dark: var(--md-sys-color-on-primary-container); }
html[data-page-role] {
  --primary: var(--md-sys-color-primary) !important;
  --primary-dark: var(--md-sys-color-primary) !important;
  --primary-soft: var(--md-sys-color-primary-container) !important;
  --navy: var(--role-accent) !important;
  --blue-soft: var(--role-soft) !important;
}
html[data-page-role] .sidebar nav .nav-item.active { color: var(--md-sys-color-on-primary-container); background: var(--md-sys-color-primary-container); }
html[data-page-role] .sidebar .nav-item.active::before { background: var(--role-accent); }
html[data-page-role] .primary-button:hover:not(:disabled),
html[data-page-role] .button.primary:hover:not(:disabled) { background: var(--role-dark); border-color: var(--role-dark); }
html[data-page-role] .welcome-row .eyebrow,
html[data-page-role] .page-head .eyebrow,
html[data-page-role] .sidebar .page-brand-role { color: var(--role-dark); }
html[data-page-embedded] #site-banner { display: none !important; }
html[data-page-embedded] #task-sandbox-banner,
html[data-page-embedded] #operator-sandbox-notice,
html[data-page-embedded] [data-environment-notice],
html[data-page-embedded] [data-auth-environment],
html[data-page-embedded] #environment-badge { display: none !important; }
html[data-page-role] .stepper li.active > span {
  background: var(--role-accent); border-color: var(--role-accent);
  box-shadow: 0 0 0 4px var(--role-soft);
}
html[data-page-role] .stepper li.active strong { color: var(--role-dark); }
html[data-page-role] .online-toggle input:checked + span { background: var(--role-accent); }
html[data-page-embedded] { --site-banner-height: 0px !important; }
.assessor-growth { margin: 20px clamp(16px, 3vw, 26px) 24px; padding: 20px; background: var(--role-soft); border: 1px solid var(--line); border-radius: 14px; }
.assessor-growth strong { color: var(--role-dark); font-size: 20px; font-weight: 700; line-height: 1.5; }
.assessor-growth p { margin: 10px 0 0; color: var(--muted); font-size: 17px; font-weight: 600; line-height: 1.85; }