#root .trade-result,#root :is(.trade-row,.signal-trade-record) .trade-result{display:grid;grid-template-columns:max-content max-content;align-items:baseline;justify-content:start;gap:8px 18px;min-width:0;border-left:0;border-inline-start:0;padding-inline-start:0;text-align:start}
#root .trade-result>span{display:block;grid-column:1;grid-row:1;margin:0;font-size:calc(10px * var(--font-scale))}
#root .trade-result .trade-result-values,#root .trade-result .trade-result-values>.trade-return-breakdown,#root .trade-result .trade-return-breakdown>div{display:contents}
#root .trade-result .trade-result-values>strong{grid-column:1;grid-row:2}
#root .trade-result .trade-return-breakdown dt{grid-column:2;grid-row:1;margin:0;color:var(--muted);font-size:calc(10px * var(--font-scale));font-weight:400;text-align:start;white-space:nowrap}
#root .trade-result .trade-return-breakdown dd.trade-price-change{grid-column:2;grid-row:2;margin:0;font-size:calc(11px * var(--font-scale));line-height:1.4;text-align:start}
#root .trade-result .trade-result-values>.pnl-status{grid-column:1/-1;grid-row:3;justify-content:start}
#root .trade-result .trade-result-values>.pnl-movement{grid-column:1/-1;grid-row:4}

/* Every labelled field in a trade card uses the same label-to-value gap. */
#root .recent-trades .trade-row{--trade-label-gap:8px;--trade-label-line-height:calc(12.5px * var(--font-scale))}
#root .recent-trades .trade-card-body{align-items:start}
#root .recent-trades .trade-metrics>div,#root .recent-trades .trade-financials dl>div{display:flex;flex-direction:column;gap:var(--trade-label-gap)}
#root .recent-trades .trade-metrics dt,#root .recent-trades .trade-financials dt{margin:0}
#root .recent-trades .trade-result{align-items:start;row-gap:var(--trade-label-gap)}
#root .recent-trades .trade-row .trade-result>span{margin:0}
#root .recent-trades .trade-metrics dt,#root .recent-trades .trade-result>span,#root .recent-trades .trade-result .trade-return-breakdown dt{line-height:var(--trade-label-line-height)}

.recent-trades .trade-row-details{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:12px 16px;min-width:0;border-top:1px solid var(--line);padding-top:10px;margin-top:0}
.recent-trades .trade-row-details>.trade-meta{grid-column:auto;min-width:0;gap:6px 10px;margin:0;padding:0;border:0;align-items:center}
.recent-trades .trade-row-details .trade-lifecycle{gap:5px}
.recent-trades .trade-row-details .message-stamp{padding:3px 6px}
.recent-trades .trade-row-details>.trade-financials{grid-column:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0;margin:0;padding:0 0 0 16px;border-top:0;border-inline-start:1px solid var(--line)}
.recent-trades .trade-row-details .trade-finance-state{flex:0 1 100px;margin:0;line-height:1.4}
.recent-trades .trade-row-details .trade-financials dl{flex:1 1 260px;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px}
.recent-trades .trade-row-details .trade-financials dt{margin-bottom:3px}
.recent-trades .trade-row-details .trade-financials p{flex-basis:100%;margin:0}
.recent-trades .trade-row-details .trade-financials.legacy{gap:4px 10px}
@container(max-width:700px){.recent-trades .trade-row-details{grid-template-columns:minmax(0,1fr);gap:10px}.recent-trades .trade-row-details>.trade-financials{border-inline-start:0;padding-inline-start:0}.recent-trades .trade-row-details .trade-finance-state{flex-basis:auto}}
@container(max-width:480px){.recent-trades .trade-row-details .trade-financials dl{flex-basis:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.recent-trades .trade-row-details .trade-lifecycle{gap:5px}}

/* Both rows use the same tracks: account balances follow exit, SL and TP. */
@media(min-width:1101px){
  @container(min-width:761px){
    .recent-trades.trade-book .trade-row{--trade-heading-width:180px;grid-template-columns:var(--trade-heading-width) repeat(8,minmax(0,1fr));column-gap:12px}
    .recent-trades.trade-book .trade-card-heading{grid-column:1}
    .recent-trades.trade-book .trade-card-body{grid-column:2/-1;display:grid;grid-template-columns:subgrid;column-gap:12px}
    .recent-trades.trade-book .trade-metrics{grid-column:1/7;grid-template-columns:subgrid;column-gap:12px}
    #root .recent-trades.trade-book .trade-result{grid-column:7/-1;grid-template-columns:subgrid;column-gap:12px}
    .recent-trades.trade-book .trade-row-details{grid-template-columns:subgrid;column-gap:12px}
    .recent-trades.trade-book .trade-row-details>.trade-meta{grid-column:1/4}
    .recent-trades.trade-book .trade-row-details>.trade-financials{grid-column:4/-1;display:grid;grid-template-columns:subgrid;column-gap:12px;border:0;padding:0}
    .recent-trades.trade-book .trade-row-details .trade-finance-state{grid-column:1;min-width:0}
    .recent-trades.trade-book .trade-row-details .trade-financials dl{grid-column:2/-1;grid-template-columns:subgrid;column-gap:12px}
    .recent-trades.trade-book .trade-row-details .trade-financials p{grid-column:1/-1}
    .recent-trades.trade-book .trade-row-details>.trade-financials.legacy{display:flex}
  }
}
@media(min-width:1101px) and (max-width:1250px){@container(min-width:761px){.recent-trades.trade-book .trade-row{--trade-heading-width:140px}}}
@media(min-width:1101px) and (max-height:900px){@container(min-width:761px){.recent-trades.trade-book .trade-row{--trade-heading-width:clamp(120px,11vw,190px)}}}

/* Wrapped cards keep the same column spacing for metrics and both P/L fields. */
@container(max-width:760px){
  #root .recent-trades .trade-card-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  #root .recent-trades .trade-metrics{display:contents}
  #root .recent-trades .trade-row .trade-result{grid-column:3/-1;grid-template-columns:subgrid;column-gap:16px}
}
@container(max-width:480px){
  #root .recent-trades .trade-card-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  #root .recent-trades .trade-row .trade-result{grid-column:1/-1}
}