/* The live track record view and the series panel (trackrecord.js). It reuses the
   workbench components (block, table, evidence tiles, tags, catalog tools) and adds
   only what they lack. Every colour is a custom property, so both themes repaint. */
#viewTrackRecord .ev-grid { margin: 14px 0 0; }
#viewTrackRecord .block > :is(.tr-figure, .tr-method, .tr-tools, .catalog-status, .tr-more, .tr-sub) { margin: 10px 12px; }
#viewTrackRecord .block > .table-scroll + .tr-sub { margin-top: 16px; }
.tr-sample { margin: 10px 0 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); max-width: 96ch; }
.tr-sample strong { color: var(--ink); }
.tr-note { margin: 8px 12px; color: var(--ink-2); max-width: 96ch; }
.tr-digest { overflow-wrap: anywhere; }
.tr-figures { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 14px; align-items: start; }
.tr-figure { min-width: 0; }
.tr-empty { margin: 0; padding: 18px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.tr-sub { font-size: 11px; font-weight: 600; letter-spacing: var(--label, .07em); text-transform: uppercase; color: var(--muted); }
.tr-n { margin-left: 4px; font: 500 11px var(--mono); color: var(--muted); white-space: nowrap; }
.tr-kind { display: block; font-size: 11px; color: var(--muted); }
.tr-band { display: block; font: 500 11px var(--mono); color: var(--muted); white-space: nowrap; }
.tr-hash { font: 500 11px var(--mono); color: var(--muted); }
.tr-ledger tr.tr-first td { border-top: 1px solid var(--rule-strong); }
.tr-ledger tbody tr:first-child td { border-top: 0; }
.tr-ledger td { vertical-align: top; white-space: nowrap; }
.tr-more { text-align: center; }
.tr-method { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 8px 16px; font-size: 12.5px; line-height: 1.55; }
.tr-method dt { font-weight: 600; color: var(--ink); }
.tr-method dd { margin: 0; color: var(--ink-2); max-width: 86ch; }
.tr-backtest { border-style: dashed; }
.tr-backtest > h2 .tag { margin-left: 8px; }
.tr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; }
.tr-key { display: inline-block; width: 14px; height: 8px; margin-left: 8px; }
.tr-key:first-child { margin-left: 0; }
.tr-key-bar { background: var(--rule-strong); }
.tr-key-line { height: 2px; background: var(--chart-line); }

.tr-calib { display: block; width: 100%; max-width: 340px; height: auto; }
.tr-calib-grid { stroke: var(--chart-grid); stroke-width: 1; }
.tr-calib-ideal { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.tr-calib-range { stroke: var(--chart-line); stroke-width: 2; }
.tr-calib-point { fill: var(--chart-line); stroke: var(--surface); stroke-width: 2; }
.tr-calib-tick, .tr-calib-axis { font: 500 10px var(--mono); fill: var(--muted); }
.tr-calib-table { margin-top: 8px; }
.tr-calib-table td { white-space: nowrap; }

.tr-chart { display: block; width: 100%; height: auto; }
.tr-chart-grid { stroke: var(--rule-strong); stroke-width: 1; }
.tr-chart-parity { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.tr-chart-bar { fill: var(--rule-strong); }
.tr-chart-line { fill: none; stroke: var(--chart-line); stroke-width: 2; }
.tr-chart-point { fill: var(--chart-line); stroke: var(--surface); stroke-width: 1.5; }
.tr-chart-tick { font: 500 10px var(--mono); fill: var(--muted); }

#trackRecordBlock .tr-panel > p { margin: 10px 12px; max-width: 96ch; }
#trackRecordBlock td { white-space: nowrap; vertical-align: top; }

@media (max-width: 900px) {
  .tr-figures { grid-template-columns: minmax(0, 1fr); }
  #viewTrackRecord .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-method { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .tr-method dd { margin-bottom: 8px; }
}
@media (max-width: 520px) {
  #viewTrackRecord .ev-grid { grid-template-columns: minmax(0, 1fr); }
  #viewTrackRecord .ev-tile.ev-wide { grid-column: auto; }
}
#viewTrackRecord .tr-tools label:last-child { flex: 0 1 280px; }
#viewTrackRecord .table-scroll[hidden] { display: none; }