/* signals-trials.css — Research: Trials (A/B), Universe (symbol contribution)
   and Promote. Layout only; every colour is a token from styles.css so both
   themes follow the rest of the app. Class prefixes match the modules' data
   attributes (tr-, uc-, pro-) so nothing here can restyle another mode. */

/* ── shared by the three modes ─────────────────────────────────────── */
.trl, .ucx, .prox { display: grid; gap: 16px; min-width: 0; }
.trl-out, .ucx-out { display: grid; gap: 16px; min-width: 0; }

/* The unit badge. Three money units coexist on this page (R, % per trade,
   account ₹) and none may sit on a tile without saying which it is. */
.tr-unit { display: inline-flex; align-items: center; height: 17px; padding: 0 5px; margin-left: 2px; border-radius: 4px;
  font-size: 10px; font-weight: 650; letter-spacing: .02em; color: var(--muted); background: var(--surface-3);
  vertical-align: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Banners, not footnotes: a withheld verdict, a stale A, a refused run. */
.tr-banner { display: grid; gap: 3px; padding: 11px 14px; border-radius: var(--r); font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); min-width: 0; }
.tr-banner b { font-weight: 650; color: var(--text); }
.tr-banner.ok { border-color: var(--pos-bd); background: var(--pos-bg); }
.tr-banner.ok b { color: var(--pos); }
.tr-banner.bad { border-color: var(--neg-bd); background: var(--neg-bg); }
.tr-banner.bad b { color: var(--neg); }
.tr-banner.warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.tr-banner.warn b { color: var(--warn); }
.tr-banner .tr-note { color: var(--muted); font-size: 12px; }
.tr-verdict b { font-size: 14.5px; letter-spacing: -0.01em; }

.tr-stamp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.tr-stamp b { color: var(--text); font-weight: 650; font-size: 13px; }
.tr-skips { font-size: 12px; color: var(--muted); }
/* The server's own notes on a run: visible, never a tooltip. */
.tr-notes { display: grid; gap: 3px; font-size: 12px; color: var(--muted); padding-left: 14px; list-style: disc; }
.tr-notes li::marker { color: var(--faint); }
.tr-skips summary { cursor: pointer; font-weight: 550; }
.tr-skips ul { margin-top: 6px; display: grid; gap: 3px; padding-left: 2px; }
.tr-skips b { color: var(--text-2); margin-right: 6px; }

/* Run row: the explicit button and what it will cost, side by side. */
.tr-run { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.tr-run > .btn { flex: none; }
.tr-cost { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; font-size: 12.5px; }
.tr-cost-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tr-cost-n { white-space: nowrap; }
.tr-cost-n b { font-variant-numeric: tabular-nums; font-size: 14px; }
.tr-stop { color: var(--neg); font-weight: 550; font-size: 12px; }

.tr-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; min-width: 0; }
.tr-grid2 > .card { min-width: 0; }

/* A and B keys: the same two series colours as the curve. */
.tr-key { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 700;
  color: #fff; flex: none; vertical-align: -3px; }
.tr-key.a { background: var(--s1); }
.tr-key.b { background: var(--s4); }

/* ── Trials: the A/B builder ───────────────────────────────────────── */
.tr-ab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; align-items: start; }
.tr-side { border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-width: 0;
  transition: border-color var(--dur), box-shadow var(--dur); }
.tr-side.tr-b { border-color: var(--accent-bd); }
/* A side lights up while any of its fields has focus: the operator is editing B, not A. */
.tr-side:focus-within { border-color: var(--accent-bd); box-shadow: inset 0 0 0 1px var(--accent-bd); }
.tr-side-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.tr-side-h b { font-weight: 650; }
.tr-side-h .muted { font-size: 12px; }
.tr-side-h #sgTrBSum { margin-left: auto; }
.tr-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 0; }
.tr-kv > div { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; border-bottom: 1px dashed var(--border); padding: 3px 0; min-width: 0; }
.tr-kv dt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-guardline { font-size: 12px; color: var(--muted); }
.tr-guardline b { color: var(--text-2); font-weight: 600; }

.tr-b-where { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.tr-b-where select { max-width: 260px; }
.tr-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.tr-p { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: var(--r-sm); font-size: 12.5px; min-width: 0; transition: background var(--dur) var(--spring); }
.tr-p:hover { background: var(--surface-hover); }
.tr-p.chg:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.tr-p label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.tr-p input[type="number"] { width: 92px; height: 28px; padding: 3px 8px; font: 12.5px var(--font); font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); }
.tr-p input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.tr-p .switch { justify-self: end; }
.tr-p.chg { background: var(--accent-bg); }
.tr-p.chg label { color: var(--text); font-weight: 600; }
.tr-meta { display: inline-flex; gap: 5px; align-items: center; justify-self: end; }
.tr-was { font-size: 11px; color: var(--accent-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-off { font-size: 10.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; }

.tr-guards { border: 1px solid var(--border); border-radius: var(--r); padding: 0 10px; }
.tr-guards > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 2px; cursor: pointer; font-size: 12.5px; list-style-position: inside;
  border-radius: var(--r-xs); transition: color var(--dur), background var(--dur) var(--spring); }
.tr-guards > summary:hover { color: var(--text); }
.tr-guards > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.tr-guards > summary b { font-weight: 650; }
.tr-gcount { font-size: 11.5px; font-weight: 600; color: var(--accent-d); }
.tr-guards[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.tr-guards > .hint { margin-bottom: 8px; }
.tr-guards > .tr-params { padding-bottom: 10px; }
.tr-b-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.tr-syms { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.tr-syms .hint { padding-bottom: 8px; }
.tr-max input { width: 84px; }
.tr-custom { flex: 1 1 320px; }
.tr-custom textarea { font: 12.5px var(--font); padding: 6px 10px; border: 1px solid var(--border-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); resize: vertical; min-height: 34px; width: 100%; text-transform: uppercase; }
.tr-custom textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ── Trials: results ───────────────────────────────────────────────── */
.tr-stats td:first-child { color: var(--text-2); white-space: nowrap; }
.tr-stats th .tr-key { margin-right: 3px; }
.tr-foot { padding: 10px 20px 14px; }

.tr-mix { display: grid; gap: 10px; }
.tr-mixrow { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; }
.tr-mixl { font-size: 12.5px; color: var(--text-2); }
.tr-mixbars { display: grid; gap: 3px; min-width: 0; }
.tr-mixbar { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 8px; }
.tr-mixbar i { display: block; height: 10px; border-radius: 0 3px 3px 0; min-width: 2px; }
.tr-mixbar.a i { background: var(--s1); }
.tr-mixbar.b i { background: var(--s4); }
.tr-mixbar span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tr-diffhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.tr-diffhead b { color: var(--text); font-weight: 650; }
.tr-only { max-height: 380px; overflow: auto; }
.tr-only td { white-space: nowrap; }

.tr-apply .card-pad { display: grid; gap: 8px; }
.tr-apply-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.tr-apply-row > div:first-child { display: grid; gap: 3px; flex: 1 1 320px; min-width: 0; }
.tr-apply-row b { overflow-wrap: anywhere; }
.tr-apply-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ── Universe: symbol contribution ─────────────────────────────────── */
.uc-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 8px; }
.uc-max input { width: 96px; }
.uc-extra { flex: 1 1 280px; }
.uc-extra input { width: 100%; text-transform: uppercase; }
.uc-extra .faint { font-weight: 400; }
.uc-draft { margin-top: 10px; font-size: 12.5px; display: flex; }

.uc-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.uc-chip { display: grid; gap: 1px; text-align: left; padding: 7px 12px; min-width: 86px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface); cursor: pointer; font: inherit; color: var(--text-2);
  transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur), transform var(--dur) var(--spring); }
.uc-chip span { font-size: 11.5px; color: var(--muted); font-weight: 550; }
.uc-chip b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.uc-chip.ok b { color: var(--pos); }
.uc-chip.bad b { color: var(--neg); }
.uc-chip.warn b { color: var(--warn); }
.uc-chip:hover { border-color: var(--border-2); background: var(--surface-hover); }
.uc-chip:active { transform: scale(.98); }
.uc-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
/* Selected is a tint, not a ring: the ring is the keyboard's. */
.uc-chip.active { border-color: var(--accent-bd); background: var(--accent-bg); color: var(--text); }
.uc-total { display: grid; gap: 1px; margin-left: auto; text-align: right; padding: 7px 4px; }
.uc-total span { font-size: 11.5px; color: var(--muted); }
.uc-total b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }

.uc-table-card { overflow: hidden; }
/* 150 rows is a long table: it scrolls inside the card under a sticky head,
   so the bulk actions above it never leave the screen. */
.uc-table-card .tbl-scroll { max-height: min(72vh, 760px); overflow: auto; }
.uc-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); box-shadow: inset 0 -1px 0 var(--border); }
.uc-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.uc-bulk-l, .uc-bulk-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uc-bulk-l b { font-size: 12.5px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.uc-bulk-r { margin-left: auto; }
.uc-held, .uc-note { flex-basis: 100%; }
.uc-held { color: var(--warn); }

.uc-table th.uc-sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--dur); }
.uc-table th.uc-sortable:hover, .uc-table th.uc-sortable.on { color: var(--text); }
.uc-table tbody tr td { transition: background var(--dur) var(--spring); }
.uc-table tbody tr:hover td { background: var(--surface-hover); }
.uc-table th.uc-pick, .uc-table td.uc-pick { width: 34px; padding-right: 0; }
.uc-table td.uc-pick input, .uc-table th.uc-pick input { width: 15px; height: 15px; accent-color: var(--accent); vertical-align: middle; }
.uc-table td { white-space: nowrap; }
.uc-table td.uc-sym .linkish { font-weight: 650; color: var(--text); font-size: 12.5px; }
.uc-table td.uc-sector { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.uc-table td.uc-verdict { display: flex; align-items: center; gap: 8px; height: 38px; }
.uc-why { font-size: 11.5px; color: var(--muted); }
.uc-table tr.picked td { background: var(--accent-bg); }
.uc-table tr.cand td.uc-sym { box-shadow: inset 2px 0 0 var(--accent-bd); }

/* ── Promote ───────────────────────────────────────────────────────── */
.pro-head { margin-bottom: 0; align-items: stretch; }
.pro-head-l { display: grid; gap: 3px; flex: 1 1 360px; min-width: 0; }
.pro-head-l small { margin-top: 0; }
.pro-mode { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 4px; }
.pro-mode b { font-weight: 650; }
.pro-head-r { display: grid; gap: 8px; justify-items: end; flex: 0 1 380px; min-width: 0; }
.pro-flip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pro-blocking { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; font-size: 11.5px; color: var(--muted); }
.pro-blocking > span:first-child { font-weight: 600; }
.pro-flipnote { text-align: right; max-width: 380px; }

.pro-checks { display: grid; }
#sgProSc .card-head .linkish { white-space: nowrap; }
.pro-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 20px; border-top: 1px solid var(--border); }
.pro-check > div { display: grid; gap: 2px; font-size: 12.5px; min-width: 0; }
.pro-check > div b { font-weight: 600; }
.pro-check > div span { color: var(--muted); overflow-wrap: anywhere; }
.pro-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800;
  background: var(--surface-3); color: var(--muted); margin-top: 1px; }
.pro-check.pass .pro-ic { background: var(--pos-bg); color: var(--pos); }
.pro-check.warn .pro-ic { background: var(--warn-bg); color: var(--warn); }
.pro-check.fail .pro-ic { background: var(--neg-bg); color: var(--neg); }
.pro-check.fail > div b { color: var(--neg); }
.pro-check.info .pro-ic { font-style: italic; font-family: Georgia, serif; }

.pro-scsum { display: grid; gap: 2px; margin-bottom: 12px; font-size: 13.5px; }
.pro-scsum small { font-size: 12px; color: var(--muted); }
.pro-scgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.pro-simform { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.pro-simform .f input[type="number"] { width: 132px; }
.pro-simform .f select { min-width: 170px; }
.pro-check-f { flex-direction: row; align-items: center; gap: 8px; font-size: 12.5px; height: 32px; }
.pro-kpis { margin-top: 16px; box-shadow: none; }
.pro-simnote { margin: 10px 0 14px; }
.pro-simgrid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pro-skips h4 { font-size: 12.5px; font-weight: 650; margin-bottom: 6px; }
.pro-skips .tbl tbody td:first-child { padding-left: 0; }
.pro-skips .tbl tbody td:last-child { padding-right: 0; }
.pro-skips .hint { margin-top: 8px; }

@media (max-width: 1100px) {
  .tr-ab { grid-template-columns: minmax(0, 1fr); }
  .pro-simgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Phone: the delta column is the point of a comparison table, so the
     supporting count / side columns give way before it scrolls off. */
  .tr-hide-sm { display: none; }
  .trl .tbl tbody td, .trl .tbl thead th, .ucx .tbl tbody td, .ucx .tbl thead th { padding-left: 8px; padding-right: 8px; }
  .trl .tbl thead th:first-child, .trl .tbl tbody td:first-child { padding-left: 14px; }
  .trl .tbl thead th:last-child, .trl .tbl tbody td:last-child, .ucx .tbl thead th:last-child, .ucx .tbl tbody td:last-child { padding-right: 14px; }
  .uc-why { display: none; }
  .ucx .tbl thead th:first-child, .ucx .tbl tbody td:first-child { padding-left: 12px; }
  .uc-table th.uc-pick, .uc-table td.uc-pick { width: 26px; }
  .uc-table td.uc-sym { white-space: normal; }
  .tr-stats td:first-child { white-space: normal; }
  .tr-params { grid-template-columns: minmax(0, 1fr); }
  .tr-p { grid-template-columns: minmax(0, 1fr) auto 84px; }
  .tr-p input[type="number"] { width: 84px; }
  .tr-side { padding: 12px; }
  .tr-side-h #sgTrBSum { margin-left: 0; flex-basis: 100%; }
  .tr-mixrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tr-run > .btn { width: 100%; }
  .uc-total { margin-left: 0; text-align: left; }
  .uc-chip { min-width: 0; flex: 1 1 28%; }
  .uc-bulk-r { margin-left: 0; }
  .pro-head-r { justify-items: start; flex-basis: 100%; }
  .pro-flip, .pro-blocking { justify-content: flex-start; }
  .pro-flipnote { text-align: left; }
  .pro-simform .f { flex: 1 1 calc(50% - 7px); }
  .pro-simform .f input[type="number"], .pro-simform .f select { width: 100%; min-width: 0; }
  .pro-simform .pro-check-f { flex: 1 1 calc(50% - 7px); }
  .pro-check { padding: 10px 14px; }
}