/* the new look: trades area (class-only, .u- prefix). */

/* a little air between the heading, the source picker, the range buttons and the numbers */
.u-trades > .u-source{ margin-top:14px; }
.u-trades > .u-ranges{ margin-top:4px; }
.u-trades-stats{ margin-top:6px; }

/* which list: Completed (closed round trips) or Orders (all fills) */
.u-trades-view{ margin-top:22px; }
.u-trades-cap{ margin:6px var(--u-pad) 0; font-size:13.5px; color:var(--u-t3); }

/* on a phone the filters fold behind one row ("Filter & sort · All · Recent · any date") */
.u-trades-ftoggles{ margin-top:8px; }
.u-trades-ftoggle .chev{ transition:transform .15s; }
.u-trades-ftoggle.open .chev{ transform:rotate(90deg); }
@media (max-width:1023px){ .u-trades-filters:not(.open){ display:none; } }
@media (min-width:1024px){ .u-trades-ftoggles, .u-trades-ftoggle{ display:none; } }

/* the filters: result, sort, date range — labelled, one group under the other on a phone */
.u-trades-filters{ display:flex; flex-direction:column; margin-top:6px; min-width:0; }
.u-trades-grp{ min-width:0; margin-top:12px; }
.u-trades-lab{ padding:0 var(--u-pad); font-size:13.5px; font-weight:600; color:var(--u-t3); }
.u-trades-grp .u-tabs{ padding-top:6px; }
.u-trades-dr{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; padding:6px var(--u-pad) 0; }
.u-trades-dr .u-input{ min-width:0; padding:0 10px; color-scheme:dark; }
:root[data-theme="light"] .u-trades-dr .u-input{ color-scheme:light; }
.u-trades-dr .u-mute{ font-size:14px; }

/* "Showing 12 trades" + Clear dates */
.u-trades-count{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin:14px var(--u-pad) 0;
                 font-size:14px; font-weight:600; color:var(--u-t3); border-bottom:1px solid var(--u-line2); }
.u-trades-count .u-btn{ margin-right:-8px; }

/* phone rows: the small lines wrap between their parts, so nothing is cut off */
.u-trades-row{ min-height:72px; align-items:start; padding:12px 0; }
.u-trades-row .v{ padding-top:1px; }
.u-trades-main{ min-width:0; }
.u-trades-row .s{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.45; }
.u-trades-row .s .u-nowrap{ white-space:nowrap; }
.u-trades-row .v small{ margin-top:2px; }

/* computer table (from 1100px, where the page is wide enough for every column) */
.u-trades-table{ display:none; margin-top:0; }
.u-trades-table td{ vertical-align:top; }
.u-trades-table td b{ font-weight:600; }
.u-trades-table td.u-trades-why{ white-space:normal; min-width:88px; }
.u-trades-table td.u-up{ color:var(--u-green); } .u-trades-table td.u-down{ color:var(--u-red); } .u-trades-table td.u-mute{ color:var(--u-t3); }
.u-trades-sm{ font-size:13px; color:var(--u-t3); margin-top:2px; font-weight:500; }

.u-trades-more{ padding-top:18px; }

@media (min-width:1100px){
  .u-trades-list{ display:none; }
  .u-trades-table{ display:block; }
  .u-trades-count{ border-bottom:0; }
}
@media (min-width:1024px){
  .u-trades > .u-source{ margin-top:16px; }
  .u-trades-view{ display:flex; align-items:center; gap:14px; margin-top:28px; }
  .u-trades-view .u-tabs{ padding:0; }
  .u-trades-cap{ margin:0; }
  .u-trades-filters{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:0 28px; }
  .u-trades-lab{ padding:0; }
  .u-trades-dr{ padding:6px 0 0; grid-template-columns:168px auto 168px; }
  .u-trades-dr .u-input{ min-height:38px; font-size:15px; }
  .u-trades-count{ margin:22px 0 0; min-height:36px; }
  .u-trades-more{ padding-top:20px; }
}

/* a text column right after a number column gets room, so "+0.29%" and "Win" never touch */
.u-trades-table td.n + td:not(.n), .u-trades-table th.n + th:not(.n){ padding-left:18px; }