/* Usage is communicated with both a text label and a consistent color. */
:root,[data-name-usage="X"]{--name-accent:#506176;--name-wash:#f0f3f6;--name-tint:#e2e8f0;--name-border:#cbd5df}
[data-name-usage="F"]{--name-accent:#b43c72;--name-wash:#fff0f5;--name-tint:#f8dce8;--name-border:#e9c0d2}
[data-name-usage="M"]{--name-accent:#2859ce;--name-wash:#edf3ff;--name-tint:#dce8ff;--name-border:#bfd0f1}
[data-name-usage="U"]{--name-accent:#7251a0;--name-wash:#f4effa;--name-tint:#e8ddf6;--name-border:#d7c5e8}
.name-card[data-name-usage]{border-color:var(--name-border)}
.name-card[data-name-usage] h3,.name-card[data-name-usage] .name-usage{color:var(--name-accent)}
.name-card[data-name-usage] .name-usage{background:var(--name-wash);border-radius:5px;padding:3px 6px}
.name-card-bottom>a{width:auto;min-width:30px;font-size:12px;color:var(--name-accent);font-weight:700}
.classic-profile .name-hero{background:var(--name-wash)}
.classic-profile .name-hero h1,.classic-profile .name-hero .eyebrow,.classic-profile .name-hero .text-link,.classic-profile .pop-stats strong{color:var(--name-accent)}
.classic-profile .name-hero .button{background:var(--name-accent);border-color:var(--name-accent)}
.chart-legend span:first-child{color:#b43c72}.chart-legend span:last-child{color:#2859ce}
@media(max-width:600px){.name-card-bottom>a{font-size:11px;width:auto;min-width:28px}.name-card[data-name-usage] .name-usage{padding:3px 4px}}