/* Track record styles: period badges, win/loss bar, accumulated P&L curve and tabs (live-track-record.js). */
.tr-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.tr-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(160, 255, 190, .04); min-width: 0; }
.tr-badge-label { font: 12px var(--mono); color: var(--muted); }
.tr-badge-value { font: 600 16px var(--mono); color: var(--text); direction: ltr; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: center; }
.tr-badge-sub { font: 11px var(--mono); color: var(--muted); }
.tr-badge.up { border-color: rgba(61, 220, 47, .35); } .tr-badge.up .tr-badge-value { color: var(--green); }
.tr-badge.down { border-color: rgba(246, 70, 93, .35); } .tr-badge.down .tr-badge-value { color: var(--red); }

.wl-box { margin-top: 22px; }
.wl-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); margin-top: 10px; }
.wl-win, .wl-loss { display: block; height: 100%; width: 0; transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.wl-win { background: var(--green-2); }
.wl-loss { background: var(--red); }
.wl-legend { display: flex; gap: 18px; margin-top: 8px; font: 12px var(--mono); color: var(--muted); }
.wl-key::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; background: currentColor; }
.wl-key.win { color: var(--green-2); } .wl-key.loss { color: var(--red); }

.tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.tr-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(160, 255, 190, .06); }
.tr-tab { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 12px var(--mono); cursor: pointer; }
.tr-tab[aria-selected="true"] { background: var(--line-2); color: var(--text); }
.tr-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.tr-chart { margin-top: 12px; min-height: 180px; }
.tr-plot { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.tr-yaxis { position: relative; min-width: 64px; }
.tr-ylabel { position: absolute; right: 0; transform: translateY(-50%); font: 11px var(--mono); color: var(--muted); direction: ltr; font-variant-numeric: tabular-nums; }
.tr-ylabel.zero { color: var(--text); }
.tr-svg { display: block; width: 100%; height: 180px; overflow: visible; }
.tr-zero { stroke: var(--line-2); stroke-dasharray: 4 5; }
.tr-area { opacity: 0; transition: opacity .9s ease-out; }
.tr-area.up { fill: rgba(61, 220, 47, .14); }
.tr-area.down { fill: rgba(246, 70, 93, .14); }
.tr-area.is-shown { opacity: 1; }
.tr-line { fill: none; stroke-width: 2.25; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .7, .2, 1); }
.tr-line.up { stroke: var(--green); }
.tr-line.down { stroke: var(--red); }
.tr-xaxis { display: flex; justify-content: space-between; margin: 8px 0 0 74px; font: 11px var(--mono); color: var(--muted); direction: ltr; }

@media (prefers-reduced-motion: reduce) {
  .wl-win, .wl-loss, .tr-area, .tr-line { transition: none !important; }
}

/* Live Performance additions: overview row, market and buy/sell breakdowns, recent timeline, unavailable notes, curve tooltip. */
.ov-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
@media (min-width: 760px) { .ov-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ov-cell { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); min-width: 0; }
.ov-value { font: 600 16px var(--mono); color: var(--text); direction: ltr; text-align: start; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ov-cell.up .ov-value { color: var(--green); }
.ov-cell.down .ov-value { color: var(--red); }

.tr-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
@media (min-width: 760px) { .tr-grid { grid-template-columns: 1.4fr 1fr; } }
.bd-box, .side-box { min-width: 0; }
.bd-row { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 0; }
.bd-sym { font: 600 13px var(--mono); color: var(--text); }
.bd-track { position: relative; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bd-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.bd-fill.up { background: var(--green-2); }
.bd-fill.down { background: var(--red); }
.bd-val { grid-column: 2; font: 11px var(--mono); color: var(--muted); direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }

.side-buy, .side-sell { display: block; height: 100%; width: 0; transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.side-buy { background: var(--green-2); }
.side-sell { background: var(--orange); }
.side-line { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font: 12px var(--mono); }
.side-key.buy { color: var(--green-2); }
.side-key.sell { color: var(--orange); }
.side-meta { color: var(--muted); direction: ltr; text-align: end; }

.rc-box { margin-top: 28px; }
.rc-list { list-style: none; margin: 10px 0 0; padding: 0 0 0 4px; border-inline-start: 1px solid var(--line-2); }
.rc-item { display: grid; grid-template-columns: 14px 1fr; grid-template-areas: "dot when" "dot what" "dot pnl"; column-gap: 10px; padding: 0 0 12px 0; position: relative; }
.rc-dot { grid-area: dot; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.rc-item.up .rc-dot { background: var(--green-2); }
.rc-item.down .rc-dot { background: var(--red); }
.rc-when { grid-area: when; font: 11px var(--mono); color: var(--muted); direction: ltr; text-align: start; }
.rc-what { grid-area: what; font: 13px var(--font); color: var(--text); }
.rc-pnl { grid-area: pnl; font: 12px var(--mono); direction: ltr; text-align: start; color: var(--muted); }
.rc-res { display: none; }

.un-box { margin-top: 24px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-2); }
.un-line { margin: 8px 0 0; font: 12px var(--font); color: var(--muted); line-height: 1.6; }

.tr-svgwrap { position: relative; min-width: 0; }
.tr-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-2); font: 11px var(--mono); color: var(--text); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s ease-out; direction: ltr; }
.tr-tip.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bd-fill, .side-buy, .side-sell, .tr-tip { transition: none !important; }
}