/* performance.css - the Performance box on the profile (his order, 2026-10-28).
   Theme tokens only, so dark and light both follow. Green and red keep the
   meaning they have everywhere in the app: money made, money lost. */
#perfCard .view-tag.paper{ background:var(--dk-row); color:var(--dk-muted); }

#allTradesCard .pf-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px;
  margin:4px 0 14px; }
#allTradesCard .pf-group{ display:flex; flex-wrap:wrap; gap:6px; }

#allTradesCard .pf-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-bottom:8px; }
#allTradesCard .pf-result{ font-size:28px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--dk-text); line-height:1.1; }
#allTradesCard .pf-say{ font-size:13px; color:var(--dk-muted); }
#allTradesCard .up{ color:var(--dk-green); }
#allTradesCard .down{ color:var(--dk-red); }

#allTradesCard .pf-chart{ position:relative; margin:0 0 14px; }
#allTradesCard .pf-chart svg{ display:block; overflow:visible; touch-action:pan-y; }
#allTradesCard .pf-grid{ stroke:var(--dk-line); stroke-width:1; }
#allTradesCard .pf-zero{ stroke:var(--dk-line-strong); stroke-width:1; stroke-dasharray:3 3; }
#allTradesCard .pf-line{ fill:none; stroke-width:2; stroke-linejoin:round; }
#allTradesCard .pf-line.flat{ stroke:var(--dk-muted); }
#allTradesCard .pf-line.up{ stroke:var(--dk-green); }
#allTradesCard .pf-line.down{ stroke:var(--dk-red); }
#allTradesCard .pf-area{ stroke:none; opacity:.12; }
#allTradesCard .pf-area.up{ fill:var(--dk-green); }
#allTradesCard .pf-area.down{ fill:var(--dk-red); }
#allTradesCard .pf-dot{ stroke:var(--dk-panel); stroke-width:2; }
#allTradesCard .pf-dot.up{ fill:var(--dk-green); }
#allTradesCard .pf-dot.down{ fill:var(--dk-red); }
#allTradesCard .pf-cross{ stroke:var(--dk-muted); stroke-width:1; stroke-dasharray:2 3; }
#allTradesCard .pf-axis{ fill:var(--dk-muted); font-size:11px; font-family:Inter, system-ui, sans-serif;
  font-variant-numeric:tabular-nums; }
#allTradesCard .pf-tip{ position:absolute; top:0; pointer-events:none; z-index:2; min-width:170px;
  background:var(--dk-panel); box-shadow:0 0 0 1px var(--dk-line-strong), 0 6px 18px rgba(0,0,0,.25);
  border-radius:6px; padding:8px 10px; font-size:12px; color:var(--dk-text-2); line-height:1.5; }
#allTradesCard .pf-tip b{ display:block; color:var(--dk-text); font-weight:600; }
#allTradesCard .pf-tip span{ display:block; }
#allTradesCard .pf-tip em{ font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; }

#allTradesCard .pf-tiles{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-bottom:18px; }
#allTradesCard .pf-tile{ background:var(--dk-row); border-radius:6px; padding:9px 11px; min-width:0; }
#allTradesCard .pf-tile span{ display:block; font-size:12px; color:var(--dk-muted); }
#allTradesCard .pf-tile b{ display:block; font-size:17px; font-weight:600; color:var(--dk-text);
  font-variant-numeric:tabular-nums; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#allTradesCard .pf-tile b.up{ color:var(--dk-green); }
#allTradesCard .pf-tile b.down{ color:var(--dk-red); }
#allTradesCard .pf-tile em{ display:block; font-style:normal; font-size:11.5px; color:var(--dk-muted);
  margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#allTradesCard .pf-empty{ font-size:13px; color:var(--dk-muted); padding:18px 0 10px; line-height:1.5; }
#allTradesCard .pf-note{ font-size:12.5px; color:var(--dk-muted); background:var(--dk-row);
  border-radius:6px; padding:8px 10px; margin:-6px 0 16px; line-height:1.45; }
/* the list's own heading already draws the dividing line above it */
#allTradesCard .pf-list .tr-title{ margin-top:4px; }

@media (max-width:640px){
  #allTradesCard .pf-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #allTradesCard .pf-result{ font-size:24px; }
  #allTradesCard .pf-bar{ flex-direction:column; }
  #allTradesCard .pf-tile em{ white-space:normal; }
}