/* Sippar budget panel (#5338), shared by /connect/ and /budget/. Uses the page's color tokens
   (--bg, --panel, --ink, --ink-2, --grey, --border, --copper, --danger, --ok). */

/* Text-link button (the quiet "Remove Sippar's access"). */
.link{appearance:none; background:none; border:0; padding:10px 8px; min-height:44px;
  color:var(--copper); font-family:inherit; font-size:13px; line-height:1; font-weight:600; cursor:pointer; border-radius:8px}
.link:hover{text-decoration:underline}
.link:focus-visible{outline:2px solid var(--copper); outline-offset:1px}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; word-break:break-all}

/* Setup */
.how{margin:14px 0 4px; padding:0; list-style:none; counter-reset:how; display:grid; gap:8px}
.how li{counter-increment:how; position:relative; padding-left:30px; font-size:14px; color:var(--ink-2); line-height:1.45}
.how li::before{content:counter(how); position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--copper); color:var(--copper); font-family:inherit; font-size:11px; line-height:18px; font-weight:600; text-align:center}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
@media (max-width:420px){ .pair{grid-template-columns:1fr} }
.f{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-top:16px}
.f .opt{font-weight:400; color:var(--grey)}
.f .help{display:block; font-weight:400; color:var(--grey); margin-top:6px; line-height:1.4}
.f input{display:block; width:100%; margin-top:6px; min-height:44px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg); color:var(--ink); font-family:inherit; font-size:16px; line-height:1.4}
.money{position:relative; display:block; margin-top:6px}
.money .cur{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--grey); font-size:16px; pointer-events:none}
.money input{margin-top:0; padding-left:26px; font-variant-numeric:tabular-nums}
.f input:focus-visible{outline:2px solid var(--copper); outline-offset:1px}

/* Budget summary */
.hero{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:6px 0 10px}
.hero .big{font-size:34px; font-weight:650; letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1.1}
.hero .sub{color:var(--grey); font-size:14px}
.barnote{margin:8px 0 0; font-size:13px; color:var(--grey); font-variant-numeric:tabular-nums}
.bar{height:6px; border-radius:6px; background:var(--border); overflow:hidden}
.bar span{display:block; height:100%; background:var(--copper); border-radius:6px}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 4px}
.stats > div{border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-width:0}
.stats .k{display:block; font-size:12px; color:var(--grey)}
.stats .v{display:block; font-size:17px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums}
.callout{margin:14px 0 0; padding:10px 12px; border-radius:10px; border:1px solid var(--copper); color:var(--ink); font-size:14px}
.addfunds{margin-top:4px}
.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.row .btn{flex:1 1 180px}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--border)}
.btn.ghost.danger{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 55%, var(--border))}
.more{margin-top:18px; border-top:1px solid var(--border); padding-top:12px; font-size:13px}
.more summary{cursor:pointer; color:var(--grey); min-height:32px; display:flex; align-items:center}
.more summary:focus-visible{outline:2px solid var(--copper); outline-offset:2px; border-radius:6px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:10px 0 0}
.kv dt{color:var(--grey)} .kv dd{margin:0; min-width:0}
.quiet{margin:14px 0 0; text-align:center}
.link.danger{color:var(--danger); font-weight:500}
.addfunds + .status, .status{margin-top:12px}
.status:empty{min-height:0; margin:0}
/* Apple Pay top-up (#5391) */
.onramp{margin-top:16px; padding-top:16px; border-top:1px solid var(--border)}
.f.check{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-2)}
.f.check input{width:auto; margin-top:3px}
/* "Your wallets" (shared/wallet/wallet-links.js), on /pass/, /budget/ and /connect/. */
.wl .btn{margin-top:10px}
.wl-list{list-style:none; margin:10px 0 0; padding:0}
.wl-list li{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; border-bottom:1px solid var(--border)}
.wl-list li:last-child{border-bottom:0}
.wl-tag{font-size:12px; color:var(--grey)}