/* ── Strategy Monitor · Compare views (Inputs, Outputs) ──────────────────────
   One trigger's texts, live on the left and backtest on the right, one row per
   line; the changed words are marked on their side. Neutral tokens are the app's
   own; the two marks reuse the rates tokens (--rm-miss, --rm-ref100). */
#cp-wrap [hidden] { display: none !important; }
#cp-wrap select { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
.cp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 10px; font-size: 12px; color: var(--text-dim); }
.cp-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text); }
.cp-legend { display: inline-flex; align-items: center; gap: 6px; }
.cp-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.cp-swatch-del { background: color-mix(in srgb, var(--rm-miss) 35%, var(--panel)); }
.cp-swatch-ins { background: color-mix(in srgb, var(--rm-ref100) 35%, var(--panel)); }

.cp-section { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.cp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border); }
.cp-sig, .cp-chars { font-size: 11.5px; font-weight: 400; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cp-same, .cp-state { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); }
.cp-same.ok, .cp-state.ok { color: var(--rm-ref100); }
.cp-same.miss, .cp-state.miss { color: var(--rm-miss); }
.cp-fold { margin-left: auto; font-size: 11px; padding: 1px 8px; }

.cp-table-wrap { overflow: auto; max-height: 70vh; }
.cp-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11.5px; line-height: 1.45; }
.cp-table th { position: sticky; top: 0; text-align: left; padding: 4px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); background: var(--panel); border-bottom: 1px solid var(--border); width: 50%; }
.cp-cell { padding: 1px 10px; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.cp-cell:first-child { border-right: 1px solid var(--border); }
.cp-row-chg .cp-cell, .cp-row-del .cp-cell:first-child, .cp-row-ins .cp-cell:last-child { background: color-mix(in srgb, var(--text-dim) 7%, var(--panel)); }
.cp-row-del .cp-cell:last-child, .cp-row-ins .cp-cell:first-child { background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--border) 60%, transparent) 6px 7px); }
mark.cp-del { background: color-mix(in srgb, var(--rm-miss) 35%, var(--panel)); color: inherit; border-radius: 2px; }
mark.cp-ins { background: color-mix(in srgb, var(--rm-ref100) 35%, var(--panel)); color: inherit; border-radius: 2px; }
.cp-only-diff .cp-row-eq { display: none; }