/* /compare — strategy A vs strategy B. Leans on performance.css for the shared
   header/venue/block idioms; only the picker, the verdict and the two-column
   table are new here. */

#cmp {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 2rem 4rem;
}

#cmp-head h1 {
  letter-spacing: 0.04em;
}

/* ── The picker ──────────────────────────────────────────────────────── */

#cmp-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: end;
  margin: 1.25rem 0 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.pick-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pick-row label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

#cmp-pick select {
  min-width: 20rem;
  padding: 0.4rem 0.5rem;
  background: #0d1017;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.9rem;
}

.pick-dates,
.pick-presets {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

#cmp-pick input[type="date"] {
  padding: 0.35rem 0.5rem;
  background: #0d1017;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  color-scheme: dark;
}

#cmp-pick button {
  padding: 0.4rem 1.1rem;
  background: #1f6feb;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
}

#cmp-pick button:hover {
  background: #388bfd;
}

.pick-presets {
  opacity: 0.85;
  font-size: 0.85rem;
}

.pick-presets a {
  color: #58a6ff;
  text-decoration: none;
  padding: 0.1rem 0.4rem;
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 4px;
}

.pick-presets a:hover {
  background: rgba(88, 166, 255, 0.12);
}

.pick-presets .range-span {
  opacity: 0.5;
  margin-left: auto;
}

.cmp-hint {
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  opacity: 0.85;
}

/* ── The verdict banner ──────────────────────────────────────────────── */

.cmp-verdict {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.25rem;
  border-radius: 8px;
  font-size: 1.05rem;
  border: 1px solid transparent;
}

.cmp-verdict strong {
  font-size: 1.15rem;
}

.verdict-a,
.verdict-b {
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.4);
}

.verdict-tie {
  background: rgba(210, 153, 34, 0.12);
  border-color: rgba(210, 153, 34, 0.4);
}

.verdict-none {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  opacity: 0.85;
}

/* ── The two-column table ────────────────────────────────────────────── */

#cmp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

#cmp-table th,
#cmp-table td {
  padding: 0.7rem 1rem;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#cmp-table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}

.cmp-metric-col {
  text-align: left !important;
  opacity: 0.85;
}

.cmp-side {
  min-width: 12rem;
}

.cmp-side.is-desk {
  border-top: 3px solid #58a6ff;
}

.cmp-name {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  word-break: break-all;
}

.cmp-sample {
  display: block;
  font-size: 0.72rem;
  opacity: 0.55;
  font-weight: 400;
  margin-top: 0.2rem;
}

.cmp-cell {
  font-variant-numeric: tabular-nums;
}

.cmp-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
}

.cmp-n {
  display: block;
  font-size: 0.68rem;
  opacity: 0.5;
  margin-top: 0.1rem;
}

.cmp-cell.is-win {
  background: rgba(63, 185, 80, 0.14);
}

.cmp-cell.is-win .cmp-value {
  color: #56d364;
}

.cmp-cell.is-empty .cmp-value {
  opacity: 0.4;
}

.cmp-none {
  font-style: italic;
  font-weight: 400 !important;
  font-size: 0.85rem !important;
}

.row-headline td {
  background: rgba(255, 255, 255, 0.02);
}

.row-headline .cmp-metric-col {
  font-weight: 700;
  opacity: 1;
}

.cmp-footnote {
  margin-top: 1rem;
  font-size: 0.8rem;
  opacity: 0.6;
  line-height: 1.5;
}

.cmp-footnote strong {
  color: #e3b341;
  opacity: 0.95;
}

/* ── The visual tape: candles + both strategies' marks ───────────────── */

.cmp-visual h2 { margin-bottom: 0.35rem; }

.cmp-said {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 1rem;
}

.said-card {
  flex: 1 1 18rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 4px solid rgba(255, 255, 255, 0.2);
}

.said-card.said-a { border-left-color: #58a6ff; }
.said-card.said-b { border-left-color: #e3b341; }
.said-card.is-empty { opacity: 0.5; }

.said-name {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  word-break: break-all;
  margin-bottom: 0.3rem;
}

.said-line { display: block; font-size: 1.05rem; }
.said-line strong { font-size: 1.25rem; }
.said-long { color: #56d364; }
.said-short { color: #f0776a; }
.said-sub { display: block; font-size: 0.72rem; opacity: 0.55; margin-top: 0.25rem; }

.cmp-tape {
  margin: 0.5rem 0 0.5rem;
  background: #0b0e14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.5rem;
}

.cmp-tape svg { width: 100%; height: 340px; display: block; }

.ck-wick { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; }
.ck-body { }
.ck-up { fill: #3fb950; }
.ck-down { fill: #f85149; }

.mk { stroke: #0b0e14; stroke-width: 0.8; }
.mk-a { fill: #58a6ff; }
.mk-b { fill: #e3b341; }
.mk-a.mk-short { fill: #1f6feb; }
.mk-b.mk-short { fill: #d29922; }

.cmp-tape-legend {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.8rem;
  opacity: 0.85;
  flex-wrap: wrap;
}

.mk-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.mk-swatch.mk-a { background: #58a6ff; }
.mk-swatch.mk-b { background: #e3b341; }

.cmp-tape-legend .tl-ends { margin-left: auto; opacity: 0.6; }

/* ── Per-side table + strategy picker ────────────────────────────────── */

.pick-side {
  display: flex;
  gap: 0.75rem;
  align-items: end;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}
.pick-side.pick-a { border-left: 3px solid #58a6ff; }
.pick-side.pick-b { border-left: 3px solid #e3b341; }

#cmp-pick select.pick-table {
  min-width: 8rem;
  text-transform: capitalize;
}

.said-table {
  display: inline-block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  vertical-align: middle;
  margin-right: 0.3rem;
  opacity: 0.8;
}

/* ── Closed / unrealized P&L basis toggle ────────────────────────────── */

.cmp-basis {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.basis-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.basis-btn {
  padding: 0.25rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
}
.basis-btn:hover { background: rgba(255, 255, 255, 0.06); }
.basis-btn.is-on {
  background: #1f6feb;
  border-color: #1f6feb;
  color: #fff;
  font-weight: 600;
}

.basis-note {
  font-size: 0.78rem;
  opacity: 0.6;
  margin-left: 0.25rem;
}
.basis-note strong { color: #e3b341; opacity: 0.95; }