/* Portfolio pages extend the existing components and brand tokens. */
.portfolio-example-notice{display:flex;align-items:center;gap:var(--s2);margin:0;padding:0 var(--s1);font-size:var(--xs);color:var(--muted);min-height:var(--s6)}
.portfolio-example-notice>.icon{width:var(--s4);height:var(--s4)}
.portfolio-example-notice>span{flex:1;min-width:0}
.portfolio-example-notice strong{display:block;font-size:var(--sm)}
.portfolio-example-notice small{display:block;font-size:var(--xs);margin-top:var(--s1)}
.portfolio-example-notice>.button{flex-shrink:0}
/* Reuse the dashboard metric component; do not duplicate its colours or icon style. */
.portfolio-metrics .dashboard-metric-copy p{white-space:normal}
.portfolio-metrics .dashboard-metric-footer{white-space:normal;line-height:1.4}
.portfolio-metrics .dashboard-metric-footer small{font-size:inherit}
.portfolio-metrics .dashboard-metric-footer .text-link{color:var(--purple);font-size:inherit;gap:var(--s2)}
.portfolio-metrics .dashboard-metric-footer .text-link>.icon{width:var(--s4);height:var(--s4)}
.portfolio-metrics .metric-status .dashboard-metric-copy>strong{font-size:var(--xl)}
.positions-table td>small{display:block;font-size:var(--xs);margin-top:var(--s1)}
.positions-table .identity small{display:block;font-size:var(--xs);margin-top:var(--s1)}
.positions-table td:last-child>.button,.rewards-view .panel-card td:last-child>.button{width:100%;justify-content:space-between;white-space:nowrap}
.positions-table td:nth-child(4){white-space:nowrap}
.positions-view .section-heading>.text-link,.rewards-view .section-heading>.text-link{color:var(--purple)}
.positions-view .positions-table .identity>div{max-width:240px}
.positions-view .positions-table td:first-child{min-width:220px}
.positions-view .table-note{font-size:var(--xs);line-height:1.6}
.portfolio-attention{padding:var(--s4);border:0;background:var(--peach)}
.portfolio-attention .section-heading{padding:0 0 var(--s4)}
.portfolio-attention>.attention-row{width:100%;background:var(--surface);border-radius:var(--r2);padding:var(--s3);margin-bottom:var(--s3);text-align:left}
.portfolio-attention>.attention-row>.icon:first-child{color:var(--amber)}
.portfolio-attention>.subtle{font-size:var(--xs)}
.native-rewards-compact{padding:var(--s4) var(--s5)}
.native-auto-row{display:flex;align-items:center;gap:var(--s3)}
.native-auto-row>.round-icon{width:var(--s10);height:var(--s10)}
.native-auto-row>.round-icon>.icon{width:var(--s6);height:var(--s6)}
.native-auto-copy{flex:1;min-width:0}
.native-auto-copy h2{display:flex;align-items:center;gap:var(--s1);font-size:var(--md)}
.native-auto-copy p,.native-auto-note{font-size:var(--xs);color:var(--muted);line-height:1.5;margin:var(--s1) 0 0}
.native-auto-control{display:flex;align-items:center;gap:var(--s2);flex:none}
.native-auto-control>span{font-size:var(--xs);color:var(--muted)}
.native-auto-switch{position:relative;display:block;flex:none;width:52px;height:44px;padding:0;border:0;border-radius:var(--pill);background:none}
.native-auto-switch:before{content:'';position:absolute;width:52px;height:28px;left:0;top:8px;border-radius:var(--pill);background:var(--border);transition:background var(--speed)}
.native-auto-switch>span{position:absolute;left:3px;top:11px;width:22px;height:22px;border-radius:var(--pill);background:var(--surface);box-shadow:var(--shadow);transition:transform var(--speed)}
.native-auto-switch[aria-checked="true"]:before{background:var(--purple)}
.native-auto-switch[aria-checked="true"]>span{transform:translateX(24px)}
.native-auto-error{margin-top:var(--s2)}
.native-auto-retry{font-size:var(--xs);margin-top:var(--s2)}
.rewards-view .knowledge-list>div{padding:var(--s3) 0;align-items:center}
.rewards-view .knowledge-list .round-icon{width:var(--s8);height:var(--s8)}
.rewards-view .knowledge-list .round-icon>.icon{width:var(--s5);height:var(--s5)}
.rewards-view .identity>strong{white-space:normal}
.rewards-view .native-rewards-card .native-autoclaim .button{white-space:nowrap}
.reward-status{padding:0 var(--s2);min-height:36px;font-size:var(--xs);color:var(--muted);gap:var(--s2)}
.reward-status>span{flex:1;min-width:0}
.reward-status>.icon{width:16px;height:16px;flex:none}
.reward-status>.text-link{flex:none;min-height:36px;font-size:var(--xs)}
.reward-status.feed-notice{padding:var(--s2) var(--s3);color:var(--ink)}
.reward-empty{margin:0;padding:var(--s5);font-size:var(--sm);color:var(--muted)}
.rewards-table{table-layout:fixed;min-width:590px}
.rewards-table th:first-child{width:36%}
.rewards-table th:nth-child(2){width:28%}
.rewards-table th:nth-child(3){width:16%}
.rewards-table th:last-child{width:20%}
.rewards-table .identity>div{min-width:0;overflow-wrap:anywhere}
.rewards-table .identity strong{white-space:normal;overflow:visible;text-overflow:clip}
.rewards-table td:nth-child(2){font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.reward-auto-label{display:block;color:var(--green);font-size:var(--xs);margin-top:var(--s1)}
.reward-tile .identity>div{min-width:0}
.reward-tile .identity strong,.reward-tile .identity span{overflow-wrap:anywhere;white-space:normal}
@media(max-width:600px){
  .rewards-view .portfolio-metric{min-height:0;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto auto;gap:6px}
  .rewards-view .portfolio-metric>.metric-icon{grid-column:1;grid-row:1;width:28px;height:32px;border-radius:10px}
  .rewards-view .portfolio-metric>.metric-icon>.icon{width:20px;height:20px}
  .rewards-view .portfolio-metric .dashboard-metric-copy{display:contents}
  .rewards-view .portfolio-metric .dashboard-metric-copy>p{grid-column:2;grid-row:1;align-self:center}
  .rewards-view .portfolio-metric .dashboard-metric-copy>strong{grid-column:1/-1;grid-row:2}
  .rewards-view .portfolio-metric .dashboard-metric-footer{grid-column:1/-1;grid-row:3;align-self:start;min-height:0}
  .native-rewards-compact{padding:var(--s3)}
  .native-auto-row{gap:var(--s2)}
  .native-auto-row>.round-icon{display:none}
  .native-auto-control{flex-direction:column;gap:0}
  .native-auto-control>span{max-width:100px;text-align:center;font-size:var(--xs)}
  .positions-view .positions-table td:first-child{min-width:0}
  .positions-table tr{grid-template-columns:minmax(0,1fr) 110px}
  .positions-table .identity>div>span{white-space:normal;overflow-wrap:anywhere}
  .positions-view .positions-table td:nth-child(5){grid-column:1;grid-row:3}
  .positions-view .positions-table td:nth-child(6){grid-column:2;grid-row:2/4}
  .positions-table td:nth-child(3)>strong{font-size:var(--base)}
}
@media(prefers-reduced-motion:reduce){.native-auto-switch:before,.native-auto-switch>span{transition:none}}
/* One wallet prompt replaces disconnected example portfolios. */
.wallet-connect-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s5);min-width:0}
.wallet-connect-card>div{min-width:0}
.wallet-connect-card h2{font-size:var(--md);margin:0 0 var(--s1)}
.wallet-connect-card p{font-size:var(--sm);color:var(--muted);line-height:1.5;margin:0}
.wallet-connect-actions{display:flex;align-items:center;gap:var(--s4);margin-left:auto;flex-shrink:0}
.wallet-connect-actions>.text-link{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--sm)}
.transaction-activity{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s3) 0;font-size:var(--sm)}
.activity-card>.transaction-activity{margin-inline:var(--s4)}
@media(max-width:900px){.wallet-connect-card{flex-wrap:wrap}.wallet-connect-actions{margin-left:0;width:100%;flex-wrap:wrap}.wallet-connect-actions>.button{flex:1}.wallet-connect-card>.round-icon{flex:none}}
@media(max-width:600px){
  .positions-view .main-stack>.notice:not(.live-notice){display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start}
  .positions-view .main-stack>.notice:not(.live-notice)>span{min-width:0}
  .positions-view .main-stack>.notice:not(.live-notice)>.button{grid-column:2;justify-self:start;min-width:0;max-width:100%;white-space:normal}
}