/* My account dashboard (G2) layout. Components (tier-card, progress, kpi, list, badge, alert, skeleton, empty) live in ../css/components.css */
.appbar .brandmark { white-space: nowrap; }
.dash { display: grid; gap: var(--sp-6); padding-block-end: calc(var(--sp-12, 48px) + 64px); }
@media (min-width: 900px) { .dash { grid-template-columns: 1.5fr 1fr; align-items: start; padding-block-end: var(--sp-12, 48px); } .dash__tier { grid-column: 1 / -1; } }
.dash__h2 { margin: 0 0 12px; font-size: var(--fs-title-3); font-weight: 800; line-height: 1.5; }
.dash__tier-body { display: grid; gap: 12px; }
@media (min-width: 900px) { .dash__tier-body { grid-template-columns: 1.1fr 1fr; } .dash__history { grid-row: 2; grid-column: 1; } .dash__links { grid-row: 2; grid-column: 2; } }
/* skeletons keep the final heights (no shift when GET /club/me answers) */
.dash__skel-card, .dash .tier-card { min-height: 236px; }
.dash__skel-stats, .dash__info { min-height: 236px; }
.dash__skel-history { min-height: 210px; }
.dash__card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash__since { font-size: var(--fs-footnote); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.62); }
.dash__pts { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-block-end: 8px; }
.dash__msg { margin-block-start: 8px; }
.dash__info { display: grid; gap: 10px; align-content: start; }
.dash__info .headline { margin: 0; }
.dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.dash__kpi dd { margin: 0; font-size: var(--fs-headline); }
.dash__kpi dt { line-height: 1.5; }
.dash__perks { display: flex; flex-wrap: wrap; gap: 8px; }
.dash__perks .badge { white-space: normal; line-height: 1.6; min-height: 28px; }
.dash__links .list__item { text-decoration: none; }
.dash__links .list__text { display: grid; }
.dash__history-body .empty { gap: 8px; }
.dash__history-body .empty .footnote { color: var(--text-2); margin: 0; max-width: 36ch; }
.dash__timeline { margin: 0; padding: 0; list-style: none; }
.dash__timeline .list__text { display: grid; gap: 2px; }
.dash__step-icon.is-silver { background: light-dark(#eef1f5, #2a2f36); color: light-dark(#3d4957, #c9d1db); }
.dash__step-icon.is-gold { background: light-dark(#f8ecd4, #3a2c12); color: light-dark(#6b4500, #f5d38f); }
.dash__step-icon.is-diamond { background: light-dark(#e3f4fb, #10303d); color: light-dark(#0b4a63, #9fdcf2); }
.dash__now { vertical-align: middle; }