/* Track record tab */
/* track record */
#view-record > .panel, .record-pair > .panel { margin-bottom: 20px; }
.curve { position: relative; }
.curve svg { display: block; overflow: visible; touch-action: pan-y; }
.curve .grid { stroke: color-mix(in srgb, var(--line) 60%, transparent); stroke-width: 1; }
.curve .base { stroke: var(--line); stroke-width: 1; }
.curve .ax { fill: var(--muted); font: 400 var(--text-xs) var(--font-mono); }
.curve .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.curve .area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.curve .ev { stroke: var(--panel); stroke-width: 2; }
.curve .ev.withdraw, .curve .ev.repeat { fill: var(--good); }
.curve .ev.restart { fill: var(--bad); }
.curve-legend .k.wd { background: var(--good); } .curve-legend .k.rs { background: var(--bad); }
.curve .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.curve .dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.curve .hit { fill: transparent; cursor: crosshair; }
.curve .tip { position: absolute; pointer-events: none; display: grid; gap: var(--space-3xs); background: var(--sheet); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink-deep) 18%, transparent); white-space: nowrap; }
.curve-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--fg); }
.curve-legend span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.curve-legend .k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.curve-legend .k.ln { width: 16px; height: 2px; border-radius: var(--radius-tag); background: var(--accent); }

.cmp-pick { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-md); }
.per { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.per select, .per input { font: inherit; font-size: var(--text-sm); padding: var(--space-xs) var(--space-xs); border-radius: var(--radius-control); border: 1px solid var(--field-edge); background: var(--bg); color: var(--fg); }
.per-lbl { font: 600 var(--text-xs) var(--font-body); color: var(--muted); }
.per-dates { display: inline-flex; align-items: center; gap: var(--space-xs); } .per-dates[hidden] { display: none; }
.stat .cmpv { display: flex; justify-content: space-between; gap: var(--space-xs); padding: 0 var(--space-sm) var(--space-xs); font: 400 var(--text-xs) var(--font-mono); color: var(--muted); }
.per-tag { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 var(--text-xs) var(--font-body); }
.per-tag.b { background: transparent; color: var(--accent); border: 2px solid var(--accent); }

/* Track record KPIs: two compact rows. Row 1 = money (balance stands out), row 2 = how the trader trades */
/* two rows of readings split by hairlines, no boxes inside the panel */
.kpis { display: grid; gap: 0; }
.kpis > .kcmp, .kpis > .kempty { margin-bottom: var(--space-sm); }
.kgrid { display: grid; gap: 0; overflow: hidden; }
.kgrid.trade { border-top: 1px solid var(--line); }
.kgrid.money { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.kgrid.trade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kgrid.trade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the money row sits on the same six columns, so the dividers of both rows line up */
.kgrid.money { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kgrid.money > .kpi { grid-column: span 2; }
@media (max-width: 1100px) { .kgrid.money { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kgrid.money > .kpi { grid-column: auto; } }
.kpi { min-width: 0; display: grid; align-content: start; gap: var(--space-3xs); padding: var(--space-sm) var(--space-md); background: transparent; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
.kpi.wide .kp-v { font-size: var(--text-3xl); color: var(--accent); }
.kp-l { font: 600 var(--text-xs) var(--font-body); color: var(--muted); }
.kp-v { font: 700 var(--text-xl)/1.15 var(--font-body); font-variant-numeric: lining-nums; color: var(--fg); overflow-wrap: anywhere; }
.kp-v.good { color: var(--good); } .kp-v.bad { color: var(--bad); }
.kp-s { font-size: var(--text-xs); color: var(--muted); line-height: 1.35; }
.kp-d { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3xs) var(--space-xs); margin-top: var(--space-2xs); padding-top: var(--space-2xs); border-top: 1px dashed var(--line); font-size: var(--text-xs); }
.kp-d b { font-weight: 700; color: var(--fg); font-variant-numeric: lining-nums; }
.kp-d .was { color: var(--muted); }

.kp-d b.good { color: var(--good); } .kp-d b.bad { color: var(--bad); }
.ksplit { display: flex; gap: var(--space-3xs); height: 6px; margin: var(--space-2xs) 0 1px; border-radius: var(--radius-tag); overflow: hidden; }
.ksplit i { display: block; min-width: 4px; }
.ksplit .w { background: var(--good); } .ksplit .l { background: var(--bad); } .ksplit .b { background: var(--line); }
.kempty { margin: 0; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-panel); font-size: var(--text-sm); background: color-mix(in srgb, var(--peach) 40%, transparent); border: 1px solid color-mix(in srgb, var(--brass) 45%, var(--line)); }
.kcmp { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-weight: 600; font-size: var(--text-sm); }
@media (max-width: 760px) { .kgrid.money { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kgrid.money .wide { grid-column: 1 / -1; } .kgrid.trade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root[lang="ar"] .kp-v { direction: ltr; text-align: right; } /* values are numbers: they read left to right */