/* ============================================================
   wallet-screen.css — ME › Wallet. Everything is scoped under .wal;
   nothing here touches drawers, terminal, or the rail.
   Tokens used: --fd (Mona Sans), --fm (IBM Plex Mono).
   ============================================================ */

/* Full-width, not a centred column (Ateet, live: "I need it full
   screen.. end to end.. not in the center") — same side padding every
   other screen's own .body already uses at this breakpoint, no
   max-width/margin:auto capping it. */
.wal{padding:28px 32px 48px;color:#c9cdd6;font-family:var(--fd)}

/* ---- hero ---- */
.wal__hero{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;
  padding:26px 28px;border-radius:2px;
  background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.wal__heroMain{min-width:0}
.wal__lbl{margin:0 0 8px;font:400 13px/1.2 var(--fd);color:#8b92a8}
.wal__bal{margin:0;font:600 40px/1 var(--fm);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.wal__cover{margin:10px 0 0;font:400 13px/1.4 var(--fd);color:#8b92a8}
.wal__spark{height:56px;min-width:0;align-self:stretch}
.wal__spark svg{width:100%;height:100%;display:block}
.wal__spark:empty{display:none}
.wal__add{
  height:44px;padding:0 22px;border:0;border-radius:2px;cursor:pointer;
  background:#ff9a1f;color:#08090d;font:600 13px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;
}
.wal__add:hover{background:#ffad47}
.wal__add:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- sections ---- */
.wal__sec{margin-top:36px}
.wal__h{margin:0 0 6px;font:500 13px/1.2 var(--fd);color:#8b92a8}
.wal__empty{margin:12px 0 0;padding:18px 0;border-top:1px solid rgba(255,255,255,.07);font:400 13.5px/1.5 var(--fd);color:#4e5568}

/* ---- active plans ---- */
.wal__plans{border-top:1px solid rgba(255,255,255,.07)}
.wal__plan{
  display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.wal__planDot{width:6px;height:6px;border-radius:50%;background:var(--cc,#8b92a8);box-shadow:0 0 8px var(--cc,transparent)}
.wal__planName{display:flex;flex-direction:column;gap:3px;min-width:0;font:500 14px/1.2 var(--fd);color:#fff}
.wal__planMeta{font:400 11px/1.2 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:#4e5568}
.wal__planPrice{font:500 15px/1 var(--fm);color:#c9cdd6;font-variant-numeric:tabular-nums;white-space:nowrap}
.wal__planRenew{font:400 12px/1 var(--fm);color:#8b92a8;white-space:nowrap;min-width:120px;text-align:right}

/* ---- ledger ---- */
.wal__tx{border-top:1px solid rgba(255,255,255,.07)}
.wal__row{
  display:grid;grid-template-columns:72px 1fr auto 110px;align-items:baseline;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.wal__when{font:400 12px/1 var(--fm);color:#4e5568;white-space:nowrap}
.wal__kind{font:400 14px/1.2 var(--fd);color:#c9cdd6;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wal__amt{font:500 15px/1 var(--fm);color:#c9cdd6;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.wal__amt.up{color:#3dd68c}
.wal__amt.dn{color:#8b92a8}
.wal__after{font:400 12px/1 var(--fm);color:#4e5568;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.wal__more{
  margin-top:14px;height:36px;padding:0 16px;border:0;border-radius:2px;cursor:pointer;background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font:500 12px/1 var(--fm);letter-spacing:.06em;color:#8b92a8;
}
.wal__more:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

/* ---- mobile ---- */
@media (max-width:767px){
  .wal{padding:18px 16px 40px}
  .wal__hero{grid-template-columns:1fr;gap:18px;padding:20px 18px}
  .wal__spark{height:44px}
  .wal__add{width:100%}
  .wal__bal{font-size:34px}
  .wal__plan{grid-template-columns:10px 1fr auto;grid-template-areas:"dot name price" "dot renew renew"}
  .wal__planDot{grid-area:dot}.wal__planName{grid-area:name}.wal__planPrice{grid-area:price}
  .wal__planRenew{grid-area:renew;text-align:left;min-width:0}
  .wal__row{grid-template-columns:1fr auto;grid-template-areas:"kind amt" "when after";row-gap:4px}
  .wal__kind{grid-area:kind}.wal__amt{grid-area:amt}.wal__when{grid-area:when}.wal__after{grid-area:after}
}