/* Wallet / miles screen (v2 P2P). Tokens only — no raw colour values. */
.wallet {
  padding: 0 var(--s-4) calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-6));
  /* In-place SSE re-renders restore scrollTop themselves; browser scroll
     anchoring fights that restore and drifts the position. */
  overflow-anchor: none;
  /* Screen-local amber, token-derived. Light --accent-strong (#C78E00) is only
     2.9:1 on white cards; mixing --text in deepens it (~#836010, 5.8:1 on
     white, 5.1:1 on the amber-dim chip) so every amber text/mark clears AA.
     Dark tokens already clear AA — restored untouched below. */
  --wl-amber-strong: color-mix(in srgb, var(--accent-strong) 62%, var(--text));
  --wl-amber-mark: var(--wl-amber-strong);
}
@media (prefers-color-scheme: dark) {
  .wallet {
    --wl-amber-strong: var(--accent-strong);
    --wl-amber-mark: var(--accent);
  }
}
.wallet .section-label.wl-label { padding: var(--s-6) var(--s-1) var(--s-2); }

/* Pinned header: hairline + soft lift once content scrolls beneath its edge. */
.wl-header {
  position: relative; z-index: 2;
  background: var(--bg);
  transition: box-shadow var(--t-fast) var(--ease);
}
.wl-header.scrolled {
  box-shadow: 0 1px 0 var(--line), var(--shadow-2);
}

.wl-in { animation: wl-in var(--t-med) var(--ease-out) both; }
@keyframes wl-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
/* SSE refreshes re-render in place: entrance stagger is first-render only. */
.wallet.no-anim .wl-in { animation: none; }

.wallet .grow { flex: 1; min-width: 0; }
/* Sub lines carry real data (drive/lift counts, timestamps): 66% --text
   measures 5.9:1 on white cards (54% was 3.9:1, under AA). */
.wl-sub { font-size: var(--fs-xs); color: color-mix(in srgb, var(--text) 66%, transparent); }
.wl-mi {
  font-size: 0.62em; font-weight: var(--fw-med);
  color: color-mix(in srgb, var(--text) 66%, transparent);
  margin-left: 3px; letter-spacing: 0;
}

/* The one muted red for debt everywhere on this screen: enough --text mixed in
   to stay dignified (not alarm-red) and AA-readable in both themes. */
.wl-lb-bal.neg,
.wl-tx-ic.neg,
.wl-tx-amt.neg,
.wl-balance.neg { color: color-mix(in srgb, var(--bad) 75%, var(--text)); }

/* ---- hero ---- */
.wl-hero { position: relative; text-align: center; padding: var(--s-6) 0 var(--s-5); }
.wl-glow {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 330px; height: 280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 13%, transparent), transparent);
}
/* Debt keeps a glow — dimmer and in the muted red, not a spotlight. */
.wl-glow.neg {
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--bad) 8%, transparent), transparent);
}
.wl-hero-label {
  position: relative;
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wl-amber-mark); margin-bottom: var(--s-2);
}
.wl-balance {
  position: relative;
  font-size: 72px; line-height: 1.05; font-weight: var(--fw-bold);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.wl-balance.bump { animation: wl-bump 600ms var(--ease-spring); }
@keyframes wl-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.wl-caption {
  position: relative;
  font-size: var(--fs-sm); color: var(--text-2);
  max-width: 250px; margin: var(--s-2) auto 0;
}

/* hero skeleton */
.wl-hero .wl-hero-label.skel,
.wl-hero .wl-balance.skel,
.wl-hero .wl-caption.skel { border-radius: var(--r-sm); }
.wl-hero .wl-balance.skel { max-width: 190px; margin: 0 auto; }
.wl-hero .wl-caption.skel { max-width: 230px; }
.wl-skel-line { height: 12px; }

/* ---- leaderboard ---- */
.wl-board { padding: var(--s-2); }
.wl-lb-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2); min-height: 52px;
  border-radius: var(--r-sm);
}
.wl-lb-row.me {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.wl-rank {
  width: 26px; flex-shrink: 0; text-align: center;
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: color-mix(in srgb, var(--text) 66%, transparent);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.wl-rank.top { color: var(--wl-amber-mark); }
.wl-rank svg { width: 19px; height: 19px; }
.wl-lb-name {
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  display: flex; align-items: baseline; gap: var(--s-2);
  white-space: nowrap; overflow: hidden;
}
.wl-lb-nm { overflow: hidden; text-overflow: ellipsis; }
/* Member's own brand, as a whispered caption beside the name. */
.wl-brand {
  flex-shrink: 0;
  font-size: 10px; font-weight: var(--fw-semi); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
}
.wl-you {
  flex-shrink: 0; align-self: center;
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wl-amber-strong);
  background: var(--accent-dim); border-radius: var(--r-full);
  padding: 1px 7px;
}
.wl-lb-bal {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.wl-lb-bal.top { color: var(--wl-amber-strong); }

/* ---- ledger ---- */
.wl-day {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2);
  padding: var(--s-3) var(--s-1) var(--s-2);
}
.wl-txs { padding: var(--s-1) var(--s-3); }
.wl-txs.card + .wl-day { margin-top: var(--s-1); }
.wl-tx { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; }
.wl-tx + .wl-tx { border-top: 1px solid var(--line); }
.wl-tx-ic {
  width: 38px; height: 38px; border-radius: var(--r-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.wl-tx-ic svg { width: 20px; height: 20px; }
.wl-tx-ic.pos { background: var(--accent-dim); color: var(--wl-amber-strong); }
.wl-tx-ic.neg { background: var(--bad-dim); }
.wl-tx-title {
  font-size: var(--fs-md); font-weight: var(--fw-med);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The route is the row's data ("Woking Station → Home"): its own line,
   wrapping freely so the destination is readable at every width. */
.wl-tx-route {
  font-size: var(--fs-sm); color: var(--text-2);
  overflow-wrap: anywhere; margin: 1px 0 2px;
}
.wl-tx-amt {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.wl-tx-amt.pos { color: var(--wl-amber-strong); }

@media (max-width: 339px) {
  .wl-balance { font-size: 56px; }
}
/* Narrow: on your own row the brand caption + YOU chip squeeze the name to
   an ellipsis — drop the caption there; you know your own brand. */
@media (max-width: 374px) {
  .wl-lb-row.me .wl-brand { display: none; }
}