/* backtest.css - the profile's Backtest box (his order, 2026-10-13).
   Every colour is one of the theme's own tokens, so dark and light both
   follow. Loaded after the theme files; it styles nothing outside the box. */

#backtestCard .bt-intro{ font:13px/1.5 Inter, system-ui, sans-serif; color:var(--dk-muted); margin:0 0 14px; }

/* ---- the form ------------------------------------------------------------- */
.bt-form{ display:flex; flex-direction:column; gap:12px; }
.bt-row{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; align-items:start; }
.bt-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.bt-label{ font:12px Inter, system-ui, sans-serif; color:var(--dk-muted); }
.bt-hint{ font:11.5px/1.35 Inter, system-ui, sans-serif; color:var(--dk-faint); }
#backtestCard .bt-in{ width:100%; min-width:0; box-sizing:border-box; font:13px Inter, system-ui, sans-serif;
  padding:8px 10px; border-radius:6px; background:var(--dk-row); color:var(--dk-text);
  border:1px solid var(--dk-field-line, var(--dk-line-strong)); }
#backtestCard .bt-in:focus{ outline:2px solid var(--dk-line-strong); outline-offset:1px; }
.bt-costs{ grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
.bt-costnote{ font:12px/1.45 Inter, system-ui, sans-serif; color:var(--dk-muted); align-self:end; padding-bottom:6px; }
.bt-about{ font:12.5px/1.5 Inter, system-ui, sans-serif; color:var(--dk-text-2); background:var(--dk-row);
  border-radius:6px; padding:9px 12px; }
.bt-about:empty{ display:none; }
.bt-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
#backtestCard .btn.bt-run{ padding:9px 18px; font-weight:600; }
#backtestCard .btn.bt-run:disabled{ cursor:default; opacity:.7; }
.bt-status{ font:13px Inter, system-ui, sans-serif; color:var(--dk-muted); min-height:18px; }
.bt-status.busy{ color:var(--dk-text); }
.bt-status.done{ color:var(--dk-green); }
.bt-status.err{ color:var(--dk-red); font-weight:500; }
.bt-foot{ font:12px/1.45 Inter, system-ui, sans-serif; color:var(--dk-faint); }

/* ---- the answer ----------------------------------------------------------- */
.bt-out:empty{ display:none; }
.bt-out{ margin-top:20px; padding-top:18px; border-top:1px solid var(--dk-line); display:flex;
  flex-direction:column; gap:14px; }
.bt-what{ font:15px Inter, system-ui, sans-serif; color:var(--dk-text); }
.bt-what b{ font-weight:600; }
.bt-data{ font:12.5px/1.5 Inter, system-ui, sans-serif; color:var(--dk-muted); margin-top:-8px; }
.bt-warn{ font:12.5px/1.45 Inter, system-ui, sans-serif; color:var(--dk-amber); background:var(--dk-amber-bg);
  border-radius:6px; padding:8px 12px; }
.bt-note{ font:12.5px/1.45 Inter, system-ui, sans-serif; color:var(--dk-muted); }
.bt-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  font:600 13.5px Inter, system-ui, sans-serif; color:var(--dk-text); margin:6px 0 8px; }
.bt-toggle{ font:400 12.5px Inter, system-ui, sans-serif; color:var(--dk-muted); cursor:pointer; margin-left:auto; }
.bt-toggle input{ vertical-align:-2px; margin-right:2px; }

.bt-cards{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.bt-card{ background:var(--dk-row); border-radius:8px; padding:12px 14px; min-width:0; }
.bt-card-l{ font:12px Inter, system-ui, sans-serif; color:var(--dk-muted); margin-bottom:6px; }
.bt-card-v{ font:600 20px Inter, system-ui, sans-serif; color:var(--dk-text); font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt-card-n{ font:11.5px/1.35 Inter, system-ui, sans-serif; color:var(--dk-muted); margin-top:5px;
  font-variant-numeric:tabular-nums; }
#backtestCard .pos{ color:var(--dk-green); }
#backtestCard .neg{ color:var(--dk-red); }

/* tables */
.bt-table{ width:100%; border-collapse:collapse; font:12.5px Inter, system-ui, sans-serif; color:var(--dk-text);
  font-variant-numeric:tabular-nums; }
.bt-table th{ text-align:left; font-weight:500; color:var(--dk-muted); padding:7px 10px;
  border-bottom:1px solid var(--dk-line-strong); white-space:nowrap; background:var(--dk-panel); }
.bt-table td{ padding:7px 10px; border-bottom:1px solid var(--dk-line); white-space:nowrap; }
.bt-table .bt-num{ text-align:right; }
.bt-table .bt-n{ color:var(--dk-muted); }
.bt-table .bt-side.long{ color:var(--dk-green); }
.bt-table .bt-side.short{ color:var(--dk-red); }
.bt-split-t{ max-width:640px; }
.bt-split-t th, .bt-split-t td{ text-align:right; }
.bt-split-t th:first-child, .bt-split-t td:first-child{ text-align:left; color:var(--dk-muted); }
.bt-split-t .bt-sub td{ color:var(--dk-muted); font-size:11.5px; padding-top:2px; }
.bt-split-t .bt-rv{ font-weight:500; }
.bt-table .bt-unseen, .bt-table tr.bt-unseen td{ background:var(--dk-blue-bg); }
.bt-split .bt-note{ margin-top:8px; }
.bt-scroll{ max-height:420px; overflow:auto; border-radius:8px; box-shadow:inset 0 0 0 1px var(--dk-line);
  scrollbar-width:thin; scrollbar-color:var(--dk-line-strong) transparent; }
.bt-scroll th{ position:sticky; top:0; z-index:1; }
#backtestCard .btn.bt-more{ margin-top:10px; }

/* charts */
.bt-chart{ display:block; width:100%; height:240px; background:var(--dk-row); border-radius:8px; }
.bt-chart.short{ height:130px; }
.bt-chart .bt-grid{ stroke:var(--dk-line); stroke-width:1; vector-effect:non-scaling-stroke; }
.bt-chart .bt-base{ stroke:var(--dk-muted); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.bt-chart .bt-axis{ font:11px Inter, system-ui, sans-serif; fill:var(--dk-muted); }
.bt-chart .bt-zone-label{ fill:var(--dk-blue); }
.bt-chart .bt-unseen-zone{ fill:var(--dk-blue-bg); }
.bt-chart .bt-line{ stroke:var(--dk-text); stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.bt-chart .bt-line-hold{ stroke:var(--dk-muted); stroke-width:1.2; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
.bt-chart .bt-line-dd{ stroke:var(--dk-red); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.bt-chart .bt-line-dd-fill{ fill:var(--dk-red-bg); stroke:none; }
.bt-legend{ display:flex; gap:16px; flex-wrap:wrap; font:12px Inter, system-ui, sans-serif; color:var(--dk-muted);
  margin-top:6px; }
.bt-key::before{ content:''; display:inline-block; width:18px; height:0; margin-right:6px; vertical-align:middle;
  border-top:2px solid var(--dk-text); }
.bt-key-hold::before{ border-top:2px dashed var(--dk-muted); }
.bt-key-base::before{ border-top:1px dotted var(--dk-muted); }

@media (max-width:860px){
  .bt-row, .bt-costs{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bt-costnote{ grid-column:1 / -1; padding-bottom:0; }
  .bt-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bt-toggle{ margin-left:0; }
}
