/* Wallet record and portfolio (w.html, /w/<wallet> and /portfolio): the nearswaps skin.
   Brand tokens from brand.css; every figure in the mono font, tabular; one accent (mint for gains and the primary
   action, red only for losses and sells); hairlines, no gradients. assets/wallet-page.js writes the rows. */
:root{
  /* Page names for the brand tokens. Change colours in brand.css, not here. */
  --bg:var(--ns-ground); --surface:var(--ns-card); --surface-2:var(--ns-raise); --surface-3:var(--ns-raise-2); --surface-4:var(--ns-raise-3);
  --border:var(--ns-line); --line:var(--ns-line); --line-2:var(--ns-line-strong);
  --text:var(--ns-ink); --text-dim:var(--ns-body); --faint:var(--ns-muted);
  --accent:var(--ns-mint); --accent-ink:var(--ns-mint-ink); --mint:var(--ns-mint); --danger:var(--ns-red);
  --up:var(--ns-mint); --down:var(--ns-red); --num:var(--ns-mono);
}
*{box-sizing:border-box;}
body{margin:0;min-height:100vh;background:var(--ns-ground);color:var(--ns-ink);font:500 14px/1.45 var(--ns-font);}
a{color:inherit;text-decoration:none;}
button,input{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;}
[hidden]{display:none !important;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.page{max-width:1160px;margin:0 auto;padding:0 32px 40px;display:flex;flex-direction:column;}
.page > .topbar{border-bottom:1px solid var(--ns-line);margin:0 -32px;padding:10px 32px;width:auto;}
.wl-main{display:flex;flex-direction:column;gap:14px;padding-top:20px;}
.card{background:var(--ns-card);border:1px solid var(--ns-line);border-radius:var(--ns-r-lg);min-width:0;}

/* search */
.find{display:flex;gap:8px;align-items:center;}
.find input{flex:1;min-width:0;height:var(--ns-touch);padding:0 14px;border-radius:var(--ns-r-sm);border:1px solid var(--ns-line);background:var(--ns-card);color:var(--ns-ink);outline:none;font-size:15px;}
.find input:focus{border-color:var(--ns-line-strong);}
.find input::placeholder{color:var(--ns-muted);}
.find button{height:var(--ns-touch);padding:0 18px;border-radius:var(--ns-r-sm);border:0;background:var(--ns-mint);color:var(--ns-mint-ink);font-weight:800;}

/* who */
.who{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 20px;}
.ava{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:600 20px var(--ns-mono);color:var(--ns-ink);background:var(--ns-raise-3);border:1px solid var(--ns-line-strong);}
.who h1{margin:0;font:600 20px/1.25 var(--ns-mono);letter-spacing:-0.01em;word-break:break-all;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;}
.who h1 small{font:600 13px var(--ns-font);color:var(--ns-body);}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--ns-r-pill);font-size:12px;font-weight:600;border:1px solid var(--ns-line);color:var(--ns-body);}
.badge.top{color:var(--ns-ink);border-color:var(--ns-line-strong);}
.badge.live,.badge.you{color:var(--ns-mint);border-color:rgb(var(--ns-mint-rgb) / 0.3);}
.acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.pill{min-height:40px;padding:0 14px;border-radius:var(--ns-r-pill);border:1px solid var(--ns-line-strong);background:transparent;font-size:13px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.pill:hover{border-color:var(--ns-ink);}
.pill.primary{background:var(--ns-mint);color:var(--ns-mint-ink);border-color:var(--ns-mint);}
.pill.on{border-color:var(--ns-mint);color:var(--ns-mint);}
.pill.sm{min-height:32px;padding:0 11px;font-size:12px;}

/* kpis */
.kp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0;flex-wrap:wrap;}
.kp-head h2,.sec h2{margin:0;font:700 15px var(--ns-font);letter-spacing:-0.01em;}
.kp-side{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.kp-head small{color:var(--ns-muted);font-size:12px;}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--ns-r-pill);background:var(--ns-ground);border:1px solid var(--ns-line);}
.seg button{min-height:34px;padding:0 12px;border:0;border-radius:var(--ns-r-pill);background:none;color:var(--ns-body);font-size:13px;font-weight:700;}
.seg button.on{background:var(--ns-ink);color:var(--ns-ground);}
.seg button:disabled{opacity:0.4;cursor:default;}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:14px 20px 18px;border:1px solid var(--ns-line);border-radius:var(--ns-r-md);overflow:hidden;}
.kpi{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-right:1px solid var(--ns-line);margin:0 -1px 0 0;}
.kpi dt{margin:0;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ns-muted);}
.kpi dd{margin:0;font:500 22px/1.1 var(--ns-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.02em;}
.kpi dd small{display:block;margin-top:5px;font:500 12px var(--ns-mono);letter-spacing:0;color:var(--ns-body);}
.kpi.big dd{font-size:28px;}
.up{color:var(--ns-mint) !important;} .dn{color:var(--ns-red) !important;}
.empty{padding:16px 20px 18px;color:var(--ns-body);font-size:13.5px;line-height:1.55;}
.empty a{color:var(--ns-mint);text-decoration:underline;}

/* portfolio */
.alloc{padding:0 20px 12px;display:flex;flex-direction:column;gap:8px;}
.alloc .bar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;background:var(--ns-raise-3);}
.alloc .bar i{display:block;height:100%;min-width:2px;}
.alloc .legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ns-body);}
.alloc .legend span{display:inline-flex;align-items:center;gap:6px;}
.alloc .legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}
.sw{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:8px;vertical-align:middle;}
.cov{font:500 11px var(--ns-mono);color:var(--ns-muted);margin-left:6px;}
.pf-note{padding:10px 20px 16px;font-size:12px;color:var(--ns-muted);line-height:1.5;}
.pf-note a{color:var(--ns-mint);text-decoration:underline;}

/* tables */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;}
.two:first-of-type{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);}
.sec h2{padding:16px 20px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.sec h2 small{font:500 12px var(--ns-mono);color:var(--ns-muted);}
.subh{padding:14px 20px 4px;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ns-muted);}
.tbl{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{padding:8px 12px;text-align:left;font-size:11px;font-weight:600;color:var(--ns-muted);text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--ns-line);white-space:nowrap;}
td{padding:10px 12px;border-bottom:1px solid var(--ns-line);vertical-align:middle;}
th:first-child,td:first-child{padding-left:20px;}
th:last-child,td:last-child{padding-right:20px;}
tr:last-child td{border-bottom:0;}
td.r,th.r{text-align:right;}
td.r,td.num,td.muted{font-family:var(--ns-mono);font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap;}
td.num{white-space:normal;}
td a.tk{font-weight:700;color:var(--ns-ink);}
td a.tk:hover{color:var(--ns-mint);}
.side-b{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;}
.side-b.buy,.side-b.swap{color:var(--ns-mint);} .side-b.sell{color:var(--ns-red);} .side-b.cash,.side-b.arb,.side-b.skip{color:var(--ns-muted);}
.muted{color:var(--ns-muted);}
.foot{font-size:12px;color:var(--ns-muted);line-height:1.65;padding:0 4px;margin:6px 0 0;}
.foot a{text-decoration:underline;text-underline-offset:2px;}
.toast{position:fixed;left:50%;bottom:22px;z-index:80;transform:translate(-50%,0);opacity:0;pointer-events:none;background:var(--ns-raise-3);border:1px solid var(--ns-line-strong);border-radius:var(--ns-r-sm);padding:10px 14px;font-size:13px;max-width:min(92vw,520px);}
.toast.show{opacity:1;pointer-events:auto;}
.toast a{color:var(--ns-mint);text-decoration:underline;}

@media (max-width:860px){
  .two,.two:first-of-type{grid-template-columns:minmax(0,1fr);}
  .who{grid-template-columns:auto minmax(0,1fr);}
  .acts{grid-column:1/-1;justify-content:flex-start;}
}
@media (max-width:760px){
  .page{padding:0 var(--ns-gutter) 24px;}
  .page > .topbar{margin:0 calc(-1 * var(--ns-gutter));padding:6px var(--ns-gutter);}
  .wl-main{padding-top:14px;gap:12px;}
  .toast{bottom:calc(var(--ns-tabbar-h) + 16px + env(safe-area-inset-bottom,0px));}
}
@media (max-width:480px){
  .kpis{grid-template-columns:1fr 1fr;margin:12px 14px 14px;}
  .kpi{border-bottom:1px solid var(--ns-line);}
  .hide-sm{display:none;}
  .who{padding:14px;gap:12px;}
  .who h1{font-size:17px;}
  .ava{width:44px;height:44px;font-size:17px;}
  .kp-head{padding:14px 14px 0;}
  .sec h2{padding:14px 14px 6px;}
  .alloc,.empty,.pf-note{padding-left:14px;padding-right:14px;}
  th:first-child,td:first-child{padding-left:14px;}
  th:last-child,td:last-child{padding-right:14px;}
  th,td{padding-left:8px;padding-right:8px;}
  .find button{padding:0 14px;}
  #ord td.r,#ord td.muted{white-space:normal;}
  #ord td:first-child .side-b{display:block;}
}

/* nearswaps points card (wallet-page.js loadPoints): one line under the wallet header, links to /points */
.ptsc{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-height:var(--ns-touch);padding:12px 20px;color:var(--ns-body);font-size:13.5px;}
.ptsc:hover{border-color:var(--ns-line-strong);}
/* Loading: the typical loaded height (holdings 450 to 620 px, the profit tiles 197 px on a computer; 630 to 870 and 450 on
   a phone), so the cards below don't jump as each answer arrives (speed report F6). An empty wallet shrinks once. */
#pfCard.is-loading{min-height:440px;}
#kpCard.is-loading{min-height:197px;}
@media (max-width: 640px){ #pfCard.is-loading{min-height:600px;} #kpCard.is-loading{min-height:450px;} }
.ptsc-l{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ns-muted);}
.ptsc-v{font:500 20px/1.1 var(--ns-mono);font-variant-numeric:tabular-nums;color:var(--ns-mint);}
.ptsc-v:empty{display:none;}
.ptsc-s{flex:1 1 auto;min-width:0;}
.ptsc-go{margin-left:auto;font-weight:700;color:var(--ns-ink);white-space:nowrap;}
.ptsc-go::after{content:" \2192";}
@media (max-width:480px){.ptsc{padding:12px 14px;}}

/* ---------- session 5 UI pass ---------- */
/* No wallet yet: the starting card only. */
.wl-intro{display:none;}
body.wl-empty .wl-intro{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;}
body.wl-empty #who,body.wl-empty .foot,body.wl-empty #pfCard,body.wl-empty #kpCard,body.wl-empty .two,body.wl-empty #ptsCard{display:none !important;}
.wl-intro h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:var(--ns-ink);}
.wl-intro p{margin:0;font-size:15px;line-height:1.55;color:var(--ns-body);max-width:60ch;}
.wl-intro p a{color:var(--ns-ink);text-decoration:underline;text-underline-offset:2px;}
.btn-mint{min-height:48px;padding:0 22px;border:0;border-radius:var(--ns-r-pill);background:var(--ns-mint);color:var(--ns-ground);font:700 15px var(--ns-font);cursor:pointer;}
.btn-mint:hover{filter:brightness(1.06);}
/* Words in the word font, numbers in mono. */
.who h1{font-family:var(--ns-font);font-weight:700;}
.kpi dd small,.cov,.sec h2 small{font-family:var(--ns-font);}
.cov,.sec h2 small{color:var(--ns-body);}
/* The selected time window stays readable even when the choice is disabled. */
.seg button.on:disabled{opacity:1;}
/* Fine print. */
.foot{font-size:13px;color:var(--ns-body);max-width:72ch;}
/* Icon buttons in the wallet header: 44 x 44, so the four actions fit one row on a phone. */
.pill.ib{width:44px;min-width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
@media (max-width:760px),(pointer:coarse){ .seg button,.pill.sm{min-height:44px;} }