/* Points page (G3) layout. Components (card, kpi, list, chip, badge, alert, skeleton, empty) live in ../css/components.css */
.appbar .brandmark { white-space: nowrap; }
.pts { display: grid; gap: var(--sp-6); padding-block-end: calc(var(--sp-12, 48px) + 64px); }
@media (min-width: 900px) { .pts { grid-template-columns: 1fr 1.6fr; align-items: start; padding-block-end: var(--sp-12, 48px); } }
.pts__h2 { margin: 0 0 12px; font-size: var(--fs-title-3); font-weight: 800; line-height: 1.5; }
/* skeleton keeps the final height of the balance card (no shift when GET /points answers) */
.pts__skel, .pts__card { min-height: 214px; }
.pts__card { display: grid; gap: 14px; align-content: start; }
.pts__balance { display: flex; gap: 14px; align-items: center; }
.pts__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-primary); flex: none; }
.pts__icon .icon { width: 26px; height: 26px; }
.pts__big { font-size: var(--fs-title-1); font-weight: 800; line-height: 1.3; }
.pts__value { color: var(--text-2); font-size: var(--fs-footnote); font-weight: 600; line-height: 1.7; }
.pts__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding-block-start: 12px; border-block-start: 1px solid var(--separator); }
.pts__kpi dd { margin: 0; font-size: var(--fs-headline); }
.pts__rule { margin: 0; color: var(--text-2); }
.pts__ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pts__count { color: var(--text-2); }
.pts__filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-block-end: 12px; }
.pts__filters .chip-row { flex: 1 1 auto; min-width: 0; }
@media (min-width: 900px) { .pts__filters .chip-row { margin-inline: 0; padding-inline: 0; } }
.pts__period { width: auto; min-width: 150px; min-height: 40px; }
/* ledger: 5 skeleton rows ~ the height of the first rows */
.pts__list-box { min-height: 340px; }
.pts__list { margin: 0; padding: 0; list-style: none; }
.tx { align-items: flex-start; min-height: 68px; }
.tx--skel { align-items: center; }
.tx--skel .list__text { display: grid; gap: 8px; }
.tx .list__text { display: grid; gap: 4px; }
.tx__title { overflow-wrap: anywhere; }
.tx__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tx__type { min-height: 22px; font-size: var(--fs-caption); }
.tx__amt { display: grid; justify-items: end; gap: 2px; flex: none; text-align: end; }
.tx__pts { font-weight: 800; font-size: var(--fs-headline); direction: ltr; unicode-bidi: isolate; }
.tx__after { font-size: var(--fs-caption); color: var(--text-2); font-weight: 600; }
/* +/− colours: opaque text colours with >= 4.5:1 on the list surface in both themes */
.tx--plus .tx__pts { color: light-dark(#17703f, #5be09a); }
.tx--minus .tx__pts { color: light-dark(#b0232e, #ff8a91); }
.tx--plus .tx__icon { background: light-dark(#e3f4ea, #133524); color: light-dark(#17703f, #5be09a); }
.tx--minus .tx__icon { background: light-dark(#fbe7e8, #3d1a1d); color: light-dark(#b0232e, #ff8a91); }
.tx__type--earn { background: light-dark(#e3f4ea, #133524); color: light-dark(#17703f, #8ff0bb); }
.tx__type--spend { background: light-dark(#fbe7e8, #3d1a1d); color: light-dark(#a3202a, #ffb3b8); }
.tx__type--adjust { background: light-dark(#eef1f5, #2a2f36); color: light-dark(#3d4957, #c9d1db); }
.pts__more { display: grid; justify-items: center; gap: 10px; margin-block-start: 14px; }
.pts__more-err { width: 100%; }