#wallet-holdings dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-3) var(--sp-6);padding-block:var(--sp-4);border-block:1px solid var(--border);font-size:var(--fs-sm)}
#wallet-holdings dt{color:var(--fg)}
#wallet-holdings dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#wallet-holdings details{padding-block:var(--sp-4)}
#wallet-holdings summary{cursor:pointer;font-weight:600}
#wallet-holdings form{border-top:1px solid var(--border);margin-top:var(--sp-4);padding-top:var(--sp-6)}
#wallet-holdings .holdings-evidence{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--fg);overflow-wrap:anywhere}
#wallet-holdings .holdings-warning{border-left:var(--sp-1) solid var(--warn);padding:var(--sp-3) var(--sp-4);color:var(--warn);background:var(--bg)}
.holdings-table{width:100%;border-collapse:collapse;margin-block:var(--sp-6);font-size:var(--fs-sm)}
.portfolio-overview{--allocation-0:var(--cat-1);--allocation-1:var(--cat-2);--allocation-2:var(--cat-4);--allocation-3:var(--cat-3);padding:24px;margin-bottom:32px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-sunk)}
.portfolio-overview h2{margin:8px 0 20px}.portfolio-value-card{padding:20px 0}.portfolio-value-card h3{font-size:14px;color:var(--fg-2)}
.portfolio-overview-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.portfolio-overview-header h2{font-size:24px!important;letter-spacing:-.025em;margin:8px 0!important}.portfolio-overview-header p{color:var(--fg-2);font-size:12px}
.portfolio-overview>p[role="status"]{border-bottom:1px solid var(--border);padding:14px 0;color:var(--fg-2)}
.retail-product .portfolio-value{font-size:clamp(32px,6vw,54px);font-weight:600;letter-spacing:-.04em;line-height:1.15;margin:12px 0;overflow-wrap:anywhere}
.portfolio-allocation{display:flex;height:14px;border-radius:var(--r-xs);overflow:hidden;margin:20px 0}.portfolio-allocation span{min-width:0}
.portfolio-allocation-list{list-style:none;padding:0;display:grid;gap:14px}.portfolio-allocation-list small{display:block;color:var(--fg-2);font-size:12px;margin-top:5px;overflow-wrap:anywhere}
.portfolio-allocation-list{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.portfolio-allocation-list li{border-left:4px solid var(--allocation-color);padding-left:12px;min-width:0}
.portfolio-overview>p.portfolio-coverage-partial{color:var(--warn);border-left:3px solid var(--warn);padding-left:12px}
@media(max-width:600px){.portfolio-overview{padding:16px}.portfolio-overview-header{display:block}.portfolio-overview .btn{width:100%;margin-top:12px}}
.holdings-table caption{text-align:left;color:var(--fg-2);padding-bottom:var(--sp-3)}
.holdings-table th,.holdings-table td{text-align:left;padding:var(--sp-3);border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.holdings-table th{font-size:var(--fs-2xs);color:var(--fg-2)}
.holdings-table small{display:block;color:var(--fg-2)}
.holdings-table td:last-child small,.holdings-table td:last-child code{flex-basis:100%;max-width:24rem;overflow-wrap:anywhere;font-size:var(--fs-2xs)}
.holdings-table td:last-child{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
@media(max-width:600px){.holdings-table th,.holdings-table td{padding:var(--sp-1);font-size:var(--fs-2xs)}.holdings-table td:last-child{display:table-cell}.holdings-table td:last-child a{display:block;padding-block:var(--sp-2)}}
@media(max-width:600px){#wallet-holdings dl{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}#wallet-holdings dd{padding-bottom:var(--sp-3)}}

/* Portfolio: the saved-holdings lookup, offered collapsed. */
.saved-lookup,details.portfolio-guide{margin:var(--sp-3) 0;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-surface);overflow:hidden}
/* details./section.card outrank `.retail-product summary` and `.retail-product
   .card`, which load later and otherwise put the summary flush against the
   box edge and a second border inside the first. */
details.saved-lookup>summary,details.portfolio-guide>summary{cursor:pointer;display:block;min-height:0;padding:var(--sp-4) var(--card-pad,var(--sp-5));font:600 var(--fs-sm)/1.3 var(--sans);color:var(--fg-2)}
details.portfolio-guide>.investor-environment,.saved-lookup>section.card{margin:0;padding:var(--card-pad,var(--sp-5));border:0;border-top:1px solid var(--border-subtle);border-radius:0;box-shadow:none;background:transparent}

/* Portfolio (2 Oct): the Connect card is the page's first action, full width,
   copy on the left and the green primary on the right. Outranks the navy
   `.retail-product #wallet-connect` and the 480px `.retail-product #wallet-login`
   in retail-focus.css, which load later. */
.retail-product .funding-shell #wallet-login{max-width:none;margin:var(--sp-6) 0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-1) var(--sp-6)}
.retail-product .funding-shell #wallet-login[hidden]{display:none}
.retail-product .funding-shell #wallet-login>h2{grid-column:1;margin:0;font-size:var(--fs-h3)}
.retail-product .funding-shell #wallet-login>p{grid-column:1;margin:0}
.retail-product .funding-shell #wallet-login>#wallet-connect{grid-column:2;grid-row:1/span 2;justify-self:end;margin:0}
.retail-product .funding-shell #wallet-connect.btn.pri{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-on-fill)}
.retail-product .funding-shell #wallet-connect.btn.pri:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
@media(max-width:600px){.retail-product .funding-shell #wallet-login{grid-template-columns:1fr;row-gap:var(--sp-2)}.retail-product .funding-shell #wallet-login>#wallet-connect{grid-column:1;grid-row:auto;justify-self:stretch}}

/* Portfolio summary: positions, cost, value and P&L in Test USD. */
.investor-portfolio{margin-bottom:var(--sp-8)}
.investor-portfolio h2{margin:0 0 var(--sp-2)}
.investor-portfolio h3{font-size:var(--fs-md);margin:var(--sp-6) 0 var(--sp-3)}
.portfolio-status,.portfolio-note{color:var(--fg-muted);font-size:var(--fs-sm)}
.portfolio-positions caption{caption-side:bottom;text-align:left;color:var(--fg-muted);font-size:var(--fs-2xs);padding-top:var(--sp-2)}
.portfolio-positions td[data-sign="up"]{color:var(--ok)}
.portfolio-positions td[data-sign="down"]{color:var(--bad)}
.portfolio-positions tfoot th,.portfolio-positions tfoot td{font-weight:var(--fw-semibold);border-top:1px solid var(--border);border-bottom:0;background:none;color:var(--fg);text-transform:none;letter-spacing:normal;font-size:var(--fs-sm)}
.portfolio-positions .pill{font-size:var(--fs-micro);vertical-align:middle}
.portfolio-open-trade{padding:var(--sp-3) 0;border-top:1px solid var(--border-subtle)}
.portfolio-open-trade p{margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.portfolio-recent-list{list-style:none;margin:0;padding:0}
.portfolio-recent-what{display:inline-flex;align-items:center;gap:var(--sp-2);min-width:0}
.portfolio-recent-list li{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.portfolio-details{margin-top:var(--sp-6);border-top:1px solid var(--border);padding-top:var(--sp-4)}
.portfolio-details>summary{cursor:pointer;font-weight:var(--fw-semibold);color:var(--fg-2)}

#wallet-access-description:empty{display:none}

/* Open demo: no heading that repeats the button and no caption, so the card is
   the button alone, centred (owner, 2 Oct). Invite-only keeps its heading. */
.retail-product .funding-shell #wallet-login:has(>h2[hidden]):has(>#wallet-access-description:empty){grid-template-columns:1fr;justify-items:center}
.retail-product .funding-shell #wallet-login:has(>h2[hidden]):has(>#wallet-access-description:empty)>#wallet-connect{grid-column:1;grid-row:auto;justify-self:center;min-width:calc(var(--sp-30) + var(--sp-20))}
/* J24 (4 Oct): signed out, the card previews the page's shapes, muted and
   inert, with the Connect button centred over them. Any heading or caption
   (invite-only) follows below the preview. */
.retail-product .funding-shell #wallet-login:has(>#portfolio-preview){grid-template-columns:minmax(0,1fr)}
.retail-product .funding-shell #wallet-login>#portfolio-preview{grid-column:1;grid-row:1;justify-self:stretch}
/* K22: the card's own ground around the button (a spread shadow, so the
   focus outline stays the base ring) keeps the preview line off it. */
.retail-product .funding-shell #wallet-login:has(>#portfolio-preview):has(>#wallet-access-description)>#wallet-connect{grid-column:1;grid-row:1;align-self:center;justify-self:center;min-width:calc(var(--sp-30) + var(--sp-20));box-shadow:0 0 0 var(--sp-5) var(--bg-surface)}
.portfolio-preview{display:grid;gap:var(--sp-6);min-width:0;pointer-events:none;user-select:none}
.portfolio-preview .pp-bar{display:block;width:12ch;max-width:100%;height:var(--sp-3);border-radius:var(--r-xs);background:var(--bg-track)}
.portfolio-preview .pp-summary{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.8fr);padding-bottom:var(--sp-6);border-bottom:1px solid var(--border)}
.portfolio-preview .pp-block{display:grid;align-content:start;gap:var(--sp-3);padding-inline:var(--sp-6);min-width:0}
.portfolio-preview .pp-block:first-child{padding-left:0}
.portfolio-preview .pp-block:last-child{padding-right:0}
.portfolio-preview .pp-block+.pp-block{border-left:1px solid var(--border-subtle)}
.portfolio-preview .pp-total{width:16ch;height:var(--sp-10)}
.portfolio-preview .pp-thin{width:100%;height:var(--sp-1)}
.portfolio-preview .pp-value{height:var(--sp-6)}
.portfolio-preview .pp-button{width:10ch;height:var(--sp-10)}
.portfolio-preview .pp-charts{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp-8);align-items:center;padding-bottom:var(--sp-6);border-bottom:1px solid var(--border)}
.portfolio-preview .pp-line{display:block;width:100%;height:calc(var(--sp-20) * 2)}
.portfolio-preview .pp-donut{display:block;width:calc(var(--sp-20) * 1.5);height:auto;aspect-ratio:1;justify-self:center}
.portfolio-preview .pp-rows span{display:block;height:var(--sp-10);border-bottom:1px solid var(--border-subtle);background:linear-gradient(var(--bg-track),var(--bg-track)) left center/30% var(--sp-3) no-repeat}
@media(max-width:1000px){.portfolio-preview .pp-summary{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-5)}.portfolio-preview .pp-block:first-child{grid-column:1/-1;padding:0 0 var(--sp-5);border-bottom:1px solid var(--border-subtle)}.portfolio-preview .pp-block:nth-child(2){padding-left:0;border-left:0}}
@media(max-width:600px){.portfolio-preview .pp-summary{grid-template-columns:minmax(0,1fr)}.portfolio-preview .pp-block:nth-child(2){padding-right:0}.portfolio-preview .pp-block:last-child{padding:var(--sp-5) 0 0;border-left:0;border-top:1px solid var(--border-subtle)}.portfolio-preview .pp-charts{grid-template-columns:minmax(0,1fr)}.portfolio-preview .pp-donut{display:none}}
/* The boot skeleton (product-view-pages.mjs) is the same card: shapes with a
   placeholder button over them where Connect wallet will be. */
.boot-connect:has(>.portfolio-preview){justify-items:stretch}
.boot-connect>.portfolio-preview,.boot-connect:has(>.portfolio-preview)>.btn{grid-area:1/1}
.boot-connect:has(>.portfolio-preview)>.btn{align-self:center;justify-self:center;box-shadow:0 0 0 var(--sp-5) var(--bg-surface)}
/* E26: total value first, then the holdings rows. */
.portfolio-total-value{font-size:var(--fs-h1);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:var(--fg)}
.portfolio-total-change{font-size:var(--fs-sm);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.portfolio-total-change[data-sign="up"]{color:var(--ok)}
.portfolio-total-change[data-sign="down"]{color:var(--bad)}
.portfolio-trade-link{font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap}
.portfolio-trade-link:hover{text-decoration:underline;text-underline-offset:var(--sp-1)}
.portfolio-trade-links{white-space:nowrap}
.portfolio-trade-sep{color:var(--fg-muted)}
.portfolio-positions td:last-child{white-space:nowrap}
.investor-portfolio .tblwrap{overflow-x:auto;max-width:100%}
@media(max-width:600px){.portfolio-positions th,.portfolio-positions td{padding-inline:var(--sp-2)}.portfolio-total-value{font-size:var(--fs-h2)}}
.investor-portfolio,.investor-portfolio .tblwrap{min-width:0;max-width:100%}
.pos-amount-inline{display:none}
@media(max-width:600px){.portfolio-positions :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(7),:nth-child(9)){display:none}.pos-amount-inline{display:block;color:var(--fg-muted);font-variant-numeric:tabular-nums}}

/* F7 (3 Oct), J28 (4 Oct): summary and charts share one treatment inside the
   Your tokens card: unbordered on its ground, divided by hairlines.
   Owner, 4 Oct: three blocks in one row (total, invested, available), the
   total over two at tablet width, stacked on phones. */
.portfolio-summary{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.8fr);margin:var(--sp-4) 0 var(--sp-6);padding-bottom:var(--sp-6);border-bottom:1px solid var(--border)}
.portfolio-block{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);min-width:0;padding-inline:var(--sp-6)}
.portfolio-block:first-child{padding-left:0}
.portfolio-block:last-child{padding-right:0}
.portfolio-block+.portfolio-block{border-left:1px solid var(--border-subtle)}
.portfolio-part{min-width:0}
.portfolio-part-label{font-size:var(--fs-xs);color:var(--fg-muted)}
.portfolio-part-value{font-size:var(--fs-h3);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;color:var(--fg);overflow-wrap:anywhere}
.portfolio-summary .skel{display:inline-block;width:8ch;vertical-align:middle}
.portfolio-unit{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--fg-2)}
.portfolio-get{margin-top:var(--sp-2)}
.portfolio-bar{align-self:stretch;margin-top:var(--sp-2);height:var(--sp-1);border-radius:var(--r-xs);background:var(--bg-track);overflow:hidden}
.portfolio-bar span{display:block;width:0;height:100%;background:var(--accent-fill);border-radius:inherit}
.portfolio-split-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);font-size:var(--fs-2xs);color:var(--fg-2);font-variant-numeric:tabular-nums}
.portfolio-split-legend li{display:flex;align-items:center;gap:var(--sp-2)}
.portfolio-split-legend .invested{--swatch:var(--accent-fill)}
.portfolio-split-legend .available{--swatch:var(--bg-track)}
.portfolio-split-legend .available .portfolio-swatch{box-shadow:inset 0 0 0 1px var(--border-strong)}
@media(max-width:1000px){.portfolio-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-total{grid-column:1/-1;padding:0 0 var(--sp-5);margin-bottom:var(--sp-5);border-bottom:1px solid var(--border-subtle)}.portfolio-block.portfolio-invested{padding-left:0;border-left:0}}
@media(max-width:600px){.portfolio-summary{grid-template-columns:minmax(0,1fr)}.portfolio-block.portfolio-invested{padding-right:0}.portfolio-block.portfolio-available{padding:var(--sp-5) 0 0;margin-top:var(--sp-5);border-left:0;border-top:1px solid var(--border-subtle)}}
.portfolio-empty{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.portfolio-empty p{margin:0;color:var(--fg-2)}
.portfolio-recent-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.portfolio-recent-head h3{margin:var(--sp-6) 0 var(--sp-3)}
.portfolio-recent-head a{font-size:var(--fs-sm);font-weight:var(--fw-semibold)}

/* Investor Portfolio (3 Oct): the activity list refreshes itself and sign-out
   lives in the header wallet chip, so the page toolbar is not shown; an empty
   legacy panel is hidden; the holdings table fits a 390 px screen. */
.retail-product .funding-toolbar{display:none}
.retail-product .panel[hidden]{display:none}
@media(max-width:600px){.investor-portfolio .tblwrap th,.investor-portfolio .tblwrap td{padding-inline:var(--sp-2)}.investor-portfolio .tblwrap th:first-child,.investor-portfolio .tblwrap td:first-child{padding-left:0}.investor-portfolio .tblwrap th:last-child,.investor-portfolio .tblwrap td:last-child{padding-right:0;text-align:right}}

/* Cost basis and P&L (4 Oct): gains and losses carry ▲/▼ as well as colour;
   the percentage sits under the amount. Desktop shows every column; phones
   show Token, Value, Unrealized P&L and Trade (rules above). */
.portfolio-positions .pnl{white-space:nowrap}
.portfolio-positions .pnl-pct{display:block;color:var(--fg-muted);font-size:var(--fs-2xs)}
.portfolio-positions td[data-sign="up"] .pnl-pct,.portfolio-positions td[data-sign="down"] .pnl-pct{color:inherit}
.portfolio-positions td[title]{text-decoration:underline dotted var(--fg-muted);text-underline-offset:var(--sp-1)}
.portfolio-pnl{align-self:stretch;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);margin-top:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--border-subtle)}
.portfolio-pnl .portfolio-part{display:grid;align-content:start;gap:var(--sp-1)}
.portfolio-pnl .portfolio-part-label{font-size:var(--fs-2xs);white-space:nowrap}
.portfolio-pnl .portfolio-part-value{font-size:var(--fs-sm)}
.portfolio-pnl .portfolio-part-value[data-sign="up"]{color:var(--ok)}
.portfolio-pnl .portfolio-part-value[data-sign="down"]{color:var(--bad)}
.portfolio-pnl .skel{width:6ch}

/* Portfolio charts (4 Oct): holdings value over time (wider) and allocation
   (narrower) side by side, stacked on phones. Fixed plot heights so nothing
   moves when the history arrives. */
.portfolio-charts{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp-8);margin:0 0 var(--sp-6);padding-bottom:var(--sp-6);border-bottom:1px solid var(--border)}
.portfolio-charts.single{grid-template-columns:minmax(0,1fr)}
.investor-portfolio .portfolio-chart{display:grid;align-content:start;gap:var(--sp-3);margin:0;min-width:0}
.investor-portfolio .portfolio-chart h3{margin:0;font-size:var(--fs-sm);color:var(--fg-2)}
.portfolio-chart-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.portfolio-value-plot{height:calc(var(--sp-20) * 2.5);min-width:0}
.portfolio-chart-note{margin:0;color:var(--fg-muted);font-size:var(--fs-2xs)}
.portfolio-donut{position:relative;width:calc(var(--sp-20) * 2);aspect-ratio:1;justify-self:center}
.portfolio-donut svg{display:block;width:100%;height:100%}
.portfolio-donut-centre{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:var(--sp-1)}
.portfolio-donut-centre .portfolio-part-label{flex-basis:auto}
.portfolio-donut-centre strong{font-size:var(--fs-md);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;color:var(--fg)}
.portfolio-legend{list-style:none;margin:0;padding:0;display:grid}
.portfolio-legend li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.portfolio-legend-token{font-weight:var(--fw-semibold);color:var(--fg)}
.portfolio-legend-value{color:var(--fg-2)}
.portfolio-legend-share{min-width:calc(var(--sp-12) + var(--sp-1));text-align:right;color:var(--fg)}
@media(max-width:760px){.portfolio-charts{grid-template-columns:minmax(0,1fr)}}
/* Page audit (4 Oct): the Activity heading has room above its filter. */
.wallet-trade-history>h2{margin-bottom:var(--sp-4)}