/* signals-research.css — the Research view: Edge · Lab · Trials · Universe · Promote.
   Layout only; every colour comes from the tokens in styles.css so both themes
   follow the rest of the app without a second palette. */

.sg-res-body { padding-bottom: 28px; }

/* ── Lab: the grid builder ────────────────────────────────────────────
   Each parameter is one row: name and base value on the left, a sweep
   checkbox, then the values to sweep. The checkbox sits next to the name it
   belongs to rather than floating in the row, because a builder where the
   control is far from its label is how you sweep the wrong parameter. */
.lab { display: grid; gap: 18px; }
.lab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lab-build > .card-pad { display: flex; flex-direction: column; gap: 14px; }
/* Where and window: short fields side by side, not one full-width box each.
   Scoped to those two rows so the per-parameter switch rows keep their own
   flex layout. */
.lab-build .lab-where, .lab-build .lab-win { display: grid; gap: 12px; }
.lab-build .lab-where { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lab-build .lab-win { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lab-build .lab-where > label, .lab-build .lab-win > label { display: grid; gap: 5px; font-size: 12px; font-weight: 550; color: var(--text-2); }
.lab-build .lab-where select, .lab-build .lab-win input { height: 32px; font-size: 12.5px; }

.lab-params { display: grid; gap: 8px; }

/* One parameter per block: the header is the switch, and the from/to/step body
   only exists once it is on. Collapsing the unswept ones is what keeps a
   ten-parameter algorithm readable. */
.lab-p { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color var(--dur), background var(--dur) var(--spring), box-shadow var(--dur); }
.lab-p.on { border-color: var(--accent-bd); background: var(--accent-bg); }
.lab-p > .lab-p-h { display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; font-size: 12.5px; transition: background var(--dur) var(--spring), color var(--dur); }
.lab-p > .lab-p-h:hover { background: var(--surface-hover); }
.lab-p.on > .lab-p-h:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.lab-p > .lab-p-h input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
.lab-p > .lab-p-h input[type="checkbox"]:focus-visible { outline: none; }
.lab-p:has(> .lab-p-h input:focus-visible) { border-color: var(--accent-bd); box-shadow: 0 0 0 3px var(--accent-ring); }
.lab-p > .lab-p-h b { font-weight: 600; }
.lab-p > .lab-p-h .muted { margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lab-p-b { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 0 12px 10px 36px; border-top: 1px solid var(--border); padding-top: 10px; }
.lab-p-b[hidden] { display: none; }
.lab-p > .lab-p-b > label { display: grid; grid-auto-flow: row; gap: 3px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--faint); }
.lab-p > .lab-p-b > label input { width: 86px; height: 30px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lab-p-b .seg.sm { margin-bottom: 1px; }
.lab-vals { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  align-self: flex-end; padding-bottom: 6px; }

/* The cost counter. The caps behind it are hard 400s, not clamps, so this is
   the only thing standing between a fat-fingered grid and a refused request on
   the replica that is also placing live orders. */
.lab-cost { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); font-size: 12.5px; }
.lab-cost-l { display: flex; align-items: baseline; gap: 5px; }
.lab-cost-l b { font-variant-numeric: tabular-nums; font-size: 14px; }
.lab-cost.err { border-color: var(--neg-bd, var(--border)); background: var(--neg-bg, var(--surface-2)); color: var(--neg); }
.lab-run { margin-left: auto; }
.lab-counts { color: var(--faint); font-size: 11.5px; }
.lab-stamp { font-size: 11.5px; color: var(--faint); }

/* Banners, not footnotes: an index that could not be aligned or a sample too
   small to support the verdict has to interrupt, not sit under the fold. */
.lab-banner, .lab-warn, .lab-suppressed {
  padding: 10px 14px; border-radius: var(--r); font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--warn-bd); background: var(--warn-bg); color: var(--warn);
}
.lab-suppressed { border-color: var(--border); background: var(--surface-2); color: var(--muted); }

.lab-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lab-tile { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); }
.lab-tile b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.lab-tile span { font-size: 11px; color: var(--faint); }

/* ── the sweep heat surface ───────────────────────────────────────────
   A robust parameter sits in a PLATEAU, not on a spike. The surface exists so
   that distinction is visible at a glance, which is most of the value here. */
.lab-sweep { display: grid; gap: 10px; }
.lab-axes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.heat { display: grid; gap: 2px; overflow-x: auto; }
.heat-c { min-width: 46px; min-height: 34px; display: grid; place-items: center; border-radius: var(--r-xs);
  font-size: 11.5px; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: box-shadow var(--dur), color var(--dur); }
.heat-c[data-lab-cell]:hover { box-shadow: inset 0 0 0 1px var(--text); }
.heat-c:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.heat-c.on { outline: 2px solid var(--ink); outline-offset: -2px; }
.heat-c.off, .heat-c.err { cursor: default; color: var(--faint); }
.heat-x, .heat-y { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.heat-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); }

/* ── walk-forward folds ───────────────────────────────────────────────
   out_of_sample is the result; the in-sample column is shown beside it only so
   the drop between them is visible. */
.lab-folds { display: grid; gap: 6px; }
.wf-trip { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto minmax(90px, 1.2fr);
  gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 12.5px; }
.wf-n { font-variant-numeric: tabular-nums; }
.wf-r { font-variant-numeric: tabular-nums; font-weight: 600; }
.wf-p { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lab-mc { display: grid; gap: 8px; }
.lab-out { display: grid; gap: 14px; }
.lab-verdict { font-size: 13px; font-weight: 550; }
.lab-where { font-size: 11.5px; color: var(--faint); }

/* Apply writes through the owning route, so it is a confirmed action and looks
   like one rather than like another filter control. */
.lab-apply { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.lab-apply-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.lab-apply-acts { display: flex; gap: 8px; margin-left: auto; }
.lab-pick { display: grid; gap: 6px; }
.lab-pick-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.lab-draft { font-size: 11.5px; color: var(--faint); }
.lab-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border); font-size: 11px; font-variant-numeric: tabular-nums; }
.lab-stop { color: var(--neg); font-weight: 550; }

@media (max-width: 1180px) {
  .lab-p-h, .lab-p-b { grid-template-columns: minmax(120px, 1fr) 26px minmax(0, 1.4fr); }
  .wf-trip { grid-template-columns: 1fr auto; row-gap: 4px; }
}