/* Trader profile, portfolio and how it works. Layout only; every colour, size and radius comes from tokens.css. */
:is(.screen-trader, .screen-portfolio, .screen-how) { display: grid; gap: var(--s-4); min-width: 0; }
a.btn { text-decoration: none; }
.tag, .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2); border-radius: var(--radius-pill); background: var(--panel-2);
  font: 500 var(--t-xs); color: var(--muted); vertical-align: middle; }
.badge { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }

/* header: avatar, name, address */
.profile-head, .pf-head { display: flex; align-items: center; gap: var(--s-4); min-width: 0; margin-bottom: var(--s-2); }
.pf-head { justify-content: space-between; flex-wrap: wrap; }
.who { min-width: 0; }
.avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: var(--text);
  font: 600 22px/1 var(--font); background: var(--panel-3); }
.avatar.sk { border-radius: 50%; }
.ids { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin-top: var(--s-1); color: var(--muted); }
.addr { font: var(--t-sm); font-variant-numeric: tabular-nums; background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; }
.addr:hover, .x:hover { color: var(--text); }
.x { color: var(--muted); text-decoration: none; font: var(--t-sm); }

/* PnL chart: the number, the window switch, the line */
.pnl-card { display: grid; gap: var(--s-2); }
.pnl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.pnl-when { font: var(--t-sm); color: var(--muted); }
.pnl-big { margin-top: var(--s-1); font: 600 var(--t-3xl); letter-spacing: -.02em; }
.pnl-chart { margin-top: var(--s-4); height: clamp(180px, 22vw, 280px); touch-action: pan-y; }
.pnl-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pnl-line { fill: none; stroke: var(--up); stroke-width: 2; stroke-linejoin: round; }
.pnl-area { fill: color-mix(in srgb, var(--up) 10%, transparent); }
.pnl-svg.down .pnl-line { stroke: var(--down); }
.pnl-svg.down .pnl-area { fill: color-mix(in srgb, var(--down) 10%, transparent); }
.pnl-zero { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.pnl-cursor { stroke: var(--muted); stroke-width: 1; }
.pnl-card .sk + .sk { margin-top: var(--s-2); }

/* market and bet rows */
.mkt-list, .pos-list { list-style: none; margin: 0; padding: 0 var(--s-5); display: grid; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.mkt, .pos { display: flex; align-items: center; gap: var(--s-3) var(--s-4); flex-wrap: wrap; padding: var(--s-4) 0; border-top: 1px solid var(--line); min-width: 0; }
:is(.mkt, .pos):first-child { border-top: 0; }
.mkt-main, .pos-main { flex: 1 1 260px; min-width: 0; }
.mkt-title { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.mkt-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.mkt-meta { margin-top: 2px; font: var(--t-sm); color: var(--faint); }
.mkt-meta .num { color: var(--muted); }
.mkt-actions, .pos-actions { display: flex; gap: var(--s-2); }
:is(.mkt-actions, .pos-actions) .btn .num { color: var(--muted); font-weight: 600; }
.pos-amount { text-align: right; min-width: 140px; }
.pos-amount p.num { font: 600 var(--t-md); font-variant-numeric: tabular-nums; }
.pos-amount .small { color: var(--faint); }
.pos-actions { min-width: 148px; justify-content: flex-end; }

/* portfolio */
.stats-panel { padding: var(--s-4) var(--s-5); }
.stats-panel .sk + .sk { margin-top: var(--s-2); }
.claim-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.claim-big { font: var(--t-lg); }
.claim-big b { font-weight: 600; }
.claim-status { color: var(--muted); }
.claim-status:empty { display: none; }
.pf-group { display: grid; margin-top: var(--s-4); }
.share-dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); color: var(--text);
  padding: var(--s-4); width: min(640px, calc(100vw - 32px)); }
.share-dialog::backdrop { background: var(--sheet-shade); }
.share-dialog img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.share-actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-3); flex-wrap: wrap; }
.empty .small a { color: var(--muted); }

/* how it works */
.screen-how { max-width: 880px; }
.steps { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-4); }
.steps li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-3); font: 600 var(--t-sm); }
.steps h2 { font: 600 var(--t-lg); }
.steps p { color: var(--muted); }
.how-list { display: grid; }
.how-list section { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-2) var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.how-list h2 { font: 600 var(--t-lg); }
.how-list section > div { display: grid; gap: var(--s-3); line-height: 22px; }
.how-list ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-1); }
.how-list strong { font-weight: 600; }
.how-list a { text-underline-offset: 3px; }
.how-table td { font-variant-numeric: tabular-nums; color: var(--muted); }
.how-table tbody th { text-align: left; font: 600 var(--t-md); color: var(--text); padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--line); }
.how-table tbody tr:last-child th { border-bottom: 0; }
.how-cta { padding-top: var(--s-5); border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .how-list section { grid-template-columns: minmax(0, 1fr); }
  .how-table { font: var(--t-sm); }
  .how-table :is(th, td) { padding: var(--s-2); }
  .mkt-list, .pos-list { padding: 0 var(--s-4); }
  .stats-panel { padding: var(--s-4); }
  .pnl-big { font-size: 30px; line-height: 36px; }
}
@media (max-width: 520px) {
  .avatar { width: 52px; height: 52px; font-size: 18px; }
  .pos-amount { text-align: left; min-width: 0; }
  .mkt-actions, .pos-actions { width: 100%; min-width: 0; justify-content: stretch; }
  .mkt-actions .btn, .pos-actions .btn { flex: 1; }
}