/* Rewards page. Card pieces follow the club reward card; components live in ../css/components.css */
.appbar .brandmark { white-space: nowrap; }
@media (min-width: 900px) { .topnav { flex-wrap: wrap; min-width: 0; flex: 1 1 auto; row-gap: 4px; } .topnav a { padding-inline: 10px; } }
.rw { display: grid; gap: var(--sp-6); padding-block-end: calc(var(--sp-12, 48px) + 64px); }
@media (min-width: 900px) { .rw { padding-block-end: var(--sp-12, 48px); } }
.rw__h2 { margin: 0 0 12px; font-size: var(--fs-title-3); font-weight: 800; line-height: 1.5; }
.rw__bar { display: grid; gap: 8px; }
.rw__grid { display: grid; gap: 12px; min-height: 180px; }
@media (min-width: 700px) { .rw__grid { grid-template-columns: 1fr 1fr; } }
.rw__skel, .reward { min-height: 168px; }
.reward { display: grid; gap: 10px; align-content: start; padding: 16px; }
.reward__top { display: flex; align-items: center; gap: 12px; }
.reward__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-accent-tint); color: var(--brand-accent); flex: none; }
.reward__name { font-weight: 800; font-size: var(--fs-callout); line-height: 1.6; }
.reward__cost { font-size: var(--fs-title-3, 1.25rem); font-weight: 800; color: var(--brand-primary); }
.reward__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.reward__note { font-size: var(--fs-footnote); color: var(--text-2); font-weight: 600; }
.reward.is-locked .reward__icon { background: var(--surface-3); color: var(--text-3); }
.reward.is-locked .reward__cost { color: var(--text-2); }
.reward__alert { grid-column: 1 / -1; }
.rw__list { margin: 0; padding: 0; list-style: none; min-height: 144px; }
.rw__list .list__text { display: grid; gap: 2px; }
.rw__more { display: grid; justify-items: center; margin-block-start: 12px; }
#rdList { min-height: 144px; }