/*
 * CC Rewards ranks: neutral layout only; colours and fonts come from the theme.
 * Sites restyle through these variables (or the classes):
 *   --cc-rank-accent  progress bar fill (default: currentColor)
 *   --cc-rank-track   progress bar track
 *   --cc-rank-colour  set per level from its colour setting (badges)
 */
.cc-rank { --cc-rank-track: rgba(127, 127, 127, 0.25); margin: 0 0 1.5em; }
.cc-rank__eyebrow { margin: 0 0 0.25em; font-size: 0.75em; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.cc-rank__current { display: flex; align-items: center; gap: 0.5em; margin: 0 0 0.75em; font-size: 1.5em; font-weight: 700; }
.cc-rank__badge { display: inline-block; flex: none; width: 2.2em; height: 0.6em; background: var(--cc-rank-colour, currentColor); border: 1px solid rgba(127, 127, 127, 0.5); }
.cc-rank__bar { height: 8px; background: var(--cc-rank-track); overflow: hidden; }
.cc-rank__bar > span { display: block; height: 100%; background: var(--cc-rank-accent, currentColor); transition: width 0.6s ease; }
.cc-rank__next { margin: 0.6em 0 0; }
.cc-rank__earned { margin-top: 1em; padding: 1em; border: 1px solid var(--cc-rank-accent, currentColor); }
.cc-rank__earned p { margin: 0 0 0.5em; }
.cc-rank__earned-title { font-weight: 700; }
.cc-rank__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; word-break: break-all; user-select: all; }
.cc-rank-account__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: 1em; margin: 0 0 2em; }
.cc-rank-account__stats div { padding: 1em; border: 1px solid rgba(127, 127, 127, 0.3); }
.cc-rank-account__stats dt { font-size: 0.8em; opacity: 0.7; }
.cc-rank-account__stats dd { margin: 0; font-size: 1.25em; font-weight: 700; }
.cc-rank-ladder, .cc-rank-levels, .cc-rank-codes { list-style: none; margin: 0 0 2em; padding: 0; }
.cc-rank-ladder__level, .cc-rank-levels__level { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "badge name from" "badge reward reward"; column-gap: 0.75em; align-items: center; padding: 0.75em 0; border-bottom: 1px solid rgba(127, 127, 127, 0.2); }
.cc-rank-ladder__level .cc-rank__badge, .cc-rank-levels__level .cc-rank__badge { grid-area: badge; }
.cc-rank-ladder__name, .cc-rank-levels__name { grid-area: name; font-weight: 700; }
.cc-rank-ladder__from, .cc-rank-levels__from { grid-area: from; text-align: right; }
.cc-rank-ladder__reward, .cc-rank-levels__reward { grid-area: reward; font-size: 0.9em; opacity: 0.8; }
.cc-rank-ladder__level.is-next { opacity: 0.6; }
.cc-rank-ladder__level.is-current .cc-rank-ladder__name::after { content: " \2190"; }
.cc-rank-codes__item { display: grid; gap: 0.25em; padding: 0.75em 0; border-bottom: 1px solid rgba(127, 127, 127, 0.2); }
.cc-rank-codes__item:not(.is-available) { opacity: 0.55; }
.cc-rank-codes__item:not(.is-available) .cc-rank__code { text-decoration: line-through; }
.cc-rank-codes__level { font-weight: 700; }
.cc-rank-codes__status, .cc-rank-codes__note { font-size: 0.85em; opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .cc-rank__bar > span { transition: none; } }