/* Track record page — layout only. Every colour used by the embedded
 * site/js/visuals.js components resolves through CSS custom properties
 * defined in site.css (BRAND.md contract); nothing here hardcodes a hex.
 * This file owns: the top per-channel orientation strip, the per-channel
 * summary row (win/loss split, average, cumulative sparkline), the empty
 * state, and direction-mark alignment inside the trade table.
 */

/* ---- design-preview banner (?demo=1 only) ---------------------------------
 * Unmistakable but still brand-monochrome: no red/negative token (that's
 * reserved for data), no signal cyan (reserved for live state — this is the
 * opposite of live). Sticky so it survives scrolling through a long preview
 * for a screenshot. Hidden by default; trackrecord.js only ever unhides it
 * when ?demo=1 is present. */
.tr-demo-banner {
  position: sticky;
  top: 49px;
  z-index: 9;
  margin: 14px 0 18px;
  padding: 9px 14px;
  border: 1px dashed var(--ink-faint);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
}

/* ---- top orientation strip ----------------------------------------------
 * One card per channel, always visible even at zero closed trades — the
 * eye-catcher that lets a visitor see all five channels and their counts
 * before scrolling, then jump straight to the one they care about. */
.tr-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 18px 0 28px;
}
.tr-strip-item {
  display: block;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .15s ease;
}
.tr-strip-item:hover { border-color: var(--ink-dim); }
.tr-strip-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.tr-strip-counts { display: flex; gap: 18px; }
.tr-strip-counts b {
  display: block;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.tr-strip-counts span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
}
.tr-strip-wl { margin-top: 10px; }

/* ---- real / virtual split caption -----------------------------------------
 * Monochrome by design (brand: no colour-coding for a labelling axis, not
 * a data axis) — the VIRTUAL badge on individual rows already carries the
 * distinction; this is just a count-level echo of it. */
.tr-rv-split {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* ---- per-channel card -----------------------------------------------------*/
.tr-chan { margin-bottom: 20px; }
.tr-chan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 4px;
}
.tr-chan-head h2 { margin: 0; font-size: 17px; }
.tr-chan-counts {
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tr-chan-counts b {
  color: var(--ink);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-right: 4px;
}

/* ---- summary row: split bar / average / cumulative curve ------------------
 * Only rendered when the underlying stat has real data — never a zeroed or
 * placeholder version of these components (see trackrecord.js gating). */
.tr-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: 14px 0 16px;
  margin: 10px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tr-wl { display: flex; align-items: center; gap: 10px; }
.tr-wl-viz { display: inline-flex; }
.tr-wl-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.tr-avg { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.tr-avg .mono { font-size: 13px; }
.tr-curve { display: flex; align-items: center; gap: 10px; }
.tr-curve-label {
  font-size: 11px;
  color: var(--ink-faint);
  max-width: 15ch;
  line-height: 1.35;
}
.tr-note-inline {
  font-size: 12px;
  color: var(--ink-faint);
}

/* ---- capital-efficiency method caption (2026-07-31) ------------------------
 * Marks a unit/weight-weighted virtual-book figure as NOT the same kind of
 * number as the margin-weighted real one. Monochrome/faint by design — same
 * "labelling axis, not a data axis" rule as .tr-rv-split; the number itself
 * still carries the up/down trend colour via trendArrow. */
.tr-ce-method {
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---- Stepgrid bag summary (2026-07-31) -------------------------------------
 * Deliberately close to .tr-strip-counts in shape (same "big number, small
 * label" pattern used everywhere else on the page) but scoped to its own
 * class since it replaces the win/loss + sparkline block entirely, not just
 * one piece of it — see trackrecord.js renderBagSummary. */
/* Same visual language as .tr-chan-counts and the other summary items —
 * the 20px stacked-tile variant made Stepgrid/Basket cards read as a
 * different design from the other three (operator flag 2026-07-31). */
.tr-bag-counts { display: flex; gap: 18px; align-items: center; }
.tr-bag-counts > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tr-bag-counts b {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* ---- empty state -----------------------------------------------------------
 * Deliberately plain: no table, no chart, no zero-filled widgets. A short,
 * confident explanation instead of the appearance of missing data. */
.tr-empty {
  padding: 18px 0 14px;
  margin: 4px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tr-empty p {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-dim);
}

/* ---- per-channel note (e.g. Moonshot's entry-config-change disclosure) ---
 * Plain, factual callout — a left rule only, no fill/glow/shadow per brand
 * rules. Sits between the head and the table/summary so it reads before
 * the reader hits the trades it explains. */
.tr-chan-note {
  margin: 4px 0 14px;
  padding: 10px 14px;
  border-left: 2px solid var(--ink-faint);
  font-size: 13px;
  color: var(--ink-dim);
  max-width: 68ch;
}

/* ---- trade table direction mark -------------------------------------------*/
.tr-row-dir { display: flex; align-items: center; }
.tbl td.tr-dir-cell { padding-top: 5px; padding-bottom: 5px; }

@media (max-width: 640px) {
  .tr-strip { grid-template-columns: repeat(2, 1fr); }
  .tr-summary { gap: 16px; row-gap: 14px; }
  .tr-chan-head { align-items: flex-start; }
}

/* ---- scrollable lists -----------------------------------------------------
 * Operator request 2026-07-31 (replaces the show-all disclosure): any list
 * past 12 rows scrolls inside its wrapper instead of growing the page. The
 * full record is always in the DOM — only the viewport is capped (~12 rows).
 * Header sticks so columns stay readable mid-scroll; solid ground fill so
 * rows don't ghost through it (no translucency — brand rules). */
.tblwrap.scrollable { max-height: 432px; overflow-y: auto; }
.tblwrap.scrollable .tbl th {
  position: sticky;
  top: 0;
  background: var(--ground);
  z-index: 1;
}