/* ============================================================
   App styles — re-skinned onto the "Signal Desk" design language.
   tokens.css (loaded first) owns the raw palette/type/spacing tokens
   and the sd-* component classes. Here we (1) bridge the legacy
   variable names the Preact components already use onto the Signal
   Desk tokens, and (2) restyle the existing class selectors to match
   the new visual language — no component markup has to change.
   ============================================================ */

:root {
  /* legacy names → Signal Desk tokens */
  --bg: var(--ink-1);
  --bg-elev: var(--ink-2);
  --bg-elev-2: var(--ink-3);
  --border: var(--line-1);
  --text: var(--tx-0);
  --text-dim: var(--tx-2);
  --accent: #5d7cfa;
  --accent-2: var(--warn);
  --danger: var(--down);
  --ok: var(--up);
  --weekend: rgba(255, 255, 255, 0.035);
  --shadow: var(--shadow-1);
  --pill-bg: var(--ink-4);
  --pill-border: var(--line-2);

  /* on-accent foreground (buttons etc.) */
  --on-accent: #ffffff;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ink-1);
  color: var(--tx-0);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Positioning context for the results drawer, which floats over the chart/side
     columns rather than taking layout space from them. */
  position: relative;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   App bar (rendered with sd-appbar / sd-nav from tokens.css).
   Legacy .app-nav kept as an alias in case any markup still uses it.
   ============================================================ */
.app-nav {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--sp-4);
  background: var(--ink-0);
  border-bottom: 1px solid var(--line-1);
  flex: none;
}

.app-nav button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 13px;
  background: transparent;
  border: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--tx-2);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

.app-nav button.active {
  color: var(--tx-0);
  border-bottom-color: var(--accent);
}

/* ============================================================
   Context bar (exchange / symbol / timeframe / range controls)
   ============================================================ */
.topbar {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line-0);
  background: var(--ink-1);
  flex-wrap: wrap;
  flex: none;
}

.topbar label {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10.5px;
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.topbar select,
.topbar input[type="date"],
.topbar input[type="datetime-local"] {
  background: var(--ink-3);
  color: var(--tx-0);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 0 10px;
  height: var(--ctl-h);
  font-size: 12.5px;
  font-family: inherit;
  min-width: 160px;
}

.topbar select:focus,
.topbar input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.topbar button {
  height: var(--ctl-h);
  padding: 0 13px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-1);
  background: var(--ink-3);
  color: var(--tx-0);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}

.topbar button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 12px var(--accent-soft);
}

.topbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.topbar button:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* ============================================================
   Layouts
   ============================================================ */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr 336px;
  min-height: 0;
}

.backtest-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  min-height: 0;
  overflow: hidden;
}

.side-stack {
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--line-1);
  background: var(--ink-2);
}

.side-stack .panel {
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--line-1);
}

.side-stack .panel:last-child {
  border-left: none;
  border-bottom: none;
}

.data-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(280px, 1.1fr) minmax(240px, 0.9fr);
  gap: var(--sp-3);
  align-items: start;
  min-height: 0;
}

.data-layout > .panel {
  min-width: 0;
  min-height: 260px;
  max-height: calc(100vh - 178px);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
}

.panel {
  background: var(--ink-2);
  border-right: 1px solid var(--line-1);
  overflow-y: auto;
  padding: var(--pad-panel) var(--pad-panel) 32px;
}

.panel:last-child {
  border-right: none;
  border-left: 1px solid var(--line-1);
}

.data-layout > .panel:last-child {
  border: 1px solid var(--line-1);
}

.panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--tx-1);
  margin: 4px 0 12px;
}

/* ============================================================
   Meta rows / audit
   ============================================================ */
.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  height: var(--row-h);
  border-bottom: 1px solid var(--line-0);
  font-size: var(--fs-data);
}

.meta-row:last-child {
  border-bottom: none;
}

.meta-row .k {
  color: var(--tx-1);
  font-size: 11.5px;
  text-transform: none;
  letter-spacing: 0;
}

.meta-row .v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--tx-0);
}

.audit-row {
  align-items: flex-start;
  gap: 10px;
  height: auto;
  padding: 6px 0;
}

.audit-value {
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  text-align: right;
  overflow-wrap: anywhere;
  max-width: 190px;
}

.audit-status {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  background: var(--ink-4);
  color: var(--tx-1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.audit-status.ok {
  border-color: transparent;
  color: var(--up);
  background: var(--up-soft);
}

.audit-status.warn {
  border-color: transparent;
  color: var(--warn);
  background: var(--warn-soft);
}

.audit-status.bad {
  border-color: transparent;
  color: var(--down);
  background: var(--down-soft);
}

.audit-status.wait,
.audit-status.load {
  border-color: var(--line-2);
  color: var(--tx-2);
  background: var(--ink-4);
}

/* ============================================================
   Badges / chips
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  background: var(--ink-4);
  color: var(--tx-1);
}

.badge.pre-ipo {
  border-color: transparent;
  background: var(--funding-soft);
  color: var(--funding);
}

.badge.listed {
  border-color: transparent;
  background: var(--up-soft);
  color: var(--up);
}

/* ============================================================
   Chart area
   ============================================================ */
.chart-area {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Fill the flex parent (.wb-chart) so .chart-container has a real height to divide.
     Previously the chart stack's pixel row-minimums propagated height up the tree; the
     fr-based rows can collapse to 0 without an explicit grow here. */
  flex: 1;
  min-height: 0;
  background: var(--ink-1);
}

.chart-overlay {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
  pointer-events: none;
}

.chart-overlay .badge {
  pointer-events: auto;
}

.chart-status {
  padding: var(--sp-2) var(--sp-4);
  font-size: 11.5px;
  color: var(--tx-2);
  border-bottom: 1px solid var(--line-0);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.chart-sync-btn {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background: var(--ink-3);
  color: var(--tx-0);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.chart-sync-btn:hover {
  filter: brightness(1.12);
}

.chart-tf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-tf-select {
  height: 22px;
  padding: 0 24px 0 8px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background-color: var(--ink-3);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.series-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.swatch.candle {
  background: linear-gradient(90deg, var(--up) 0 50%, var(--down) 50% 100%);
}

.swatch.funding {
  height: 3px;
  border: none;
  background: var(--funding);
}

.swatch.strategy-funding {
  height: 3px;
  border: none;
  background: var(--up);
}

.swatch.fixed {
  height: 3px;
  border: none;
  background: var(--funding);
}

.swatch.equity {
  height: 3px;
  border: none;
  background: var(--accent);
}

.chart-container {
  flex: 1;
  min-height: 0;
  position: relative;
}

.chart-stack {
  position: absolute;
  inset: 0;
  display: grid;
  /* minmax(0, …fr) lets every pane shrink with the container instead of enforcing a
     pixel floor. The old fixed minimums (260+110+120px) overflowed the chart area
     whenever the results drawer claimed vertical space, clipping the equity x-axis
     and shoving the side panel past 100vh. fr units keep funding + equity tall while
     always fitting. */
  grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--line-0);
}

.chart-panel {
  position: relative;
  min-height: 0;
  background: var(--ink-1);
  overflow: hidden;
}

.chart-surface {
  position: absolute;
  inset: 0;
}

.funding-panel,
.equity-panel {
  border-top: 1px solid var(--line-1);
}

.panel-title {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 4;
  color: var(--tx-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  pointer-events: none;
}

.weekend-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.chart-tooltip {
  position: absolute;
  z-index: 20;
  display: none;
  min-width: 260px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--ink-3);
  color: var(--tx-0);
  box-shadow: var(--shadow-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  pointer-events: none;
}

/* ============================================================
   Sliders / tooltips
   ============================================================ */
.slider-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 12px 0 16px;
}

.slider-row .label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.slider-row label {
  font-size: 11px;
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.tooltip {
  position: relative;
}

.tooltip[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  background: var(--ink-3);
  color: var(--tx-0);
  padding: 6px 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  white-space: nowrap;
  font-size: 12px;
  z-index: 100;
}

/* ============================================================
   Buttons (run / ghost / primary)
   ============================================================ */
.run-btn {
  width: 100%;
  height: 36px;
  margin-top: 8px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-1);
  background: var(--ink-3);
  color: var(--tx-1);
  font-weight: 600;
  font-size: 13px;
  cursor: not-allowed;
  font-family: inherit;
  opacity: 0.55;
}

.run-btn:not(:disabled) {
  opacity: 1;
  cursor: pointer;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 2px 12px var(--accent-soft);
}

.hint,
.disabled-reason {
  margin-top: 8px;
  font-size: 11px;
  color: var(--tx-2);
  line-height: 1.45;
}

.disabled-reason {
  color: var(--warn);
}

/* ============================================================
   Discovery
   ============================================================ */
.discovery-control {
  display: block;
  font-size: 11px;
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.discovery-control input {
  width: 100%;
  margin-top: 6px;
  height: var(--ctl-h);
  padding: 0 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background: var(--ink-3);
  color: var(--tx-0);
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.discovery-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.discovery-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background: var(--ink-3);
}

.discovery-row.watch {
  border-color: transparent;
  background: var(--warn-soft);
}

.discovery-symbol {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tx-0);
  overflow-wrap: anywhere;
}

.discovery-meta {
  margin-top: 3px;
  color: var(--tx-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.discovery-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.discovery-tags span {
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--ink-4);
  color: var(--tx-2);
  font-size: 9px;
  font-weight: 700;
}

/* ============================================================
   Section titles
   ============================================================ */
.section-title,
.metric-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: 10.5px;
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}

.section-title::after,
.metric-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-0);
}

.backtest-window {
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-0);
}

.ghost-btn {
  width: 100%;
  margin-top: 10px;
  height: var(--ctl-h);
  border: 1px solid var(--line-1);
  background: transparent;
  color: var(--tx-1);
  border-radius: var(--r-2);
  font-family: inherit;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}

.ghost-btn:hover:not(:disabled) {
  background: var(--ink-3);
  color: var(--tx-0);
}

.ghost-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--tx-3);
  font-size: 10px;
  text-transform: none;
  cursor: help;
}

/* ============================================================
   Status / error / alert boxes
   ============================================================ */
.status-box,
.error-box {
  margin-top: var(--sp-3);
  padding: 10px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background: var(--ink-3);
  font-size: 12px;
  color: var(--tx-1);
  line-height: 1.5;
}

.error-box {
  border-color: rgba(255, 92, 110, 0.3);
  background: var(--down-soft);
  color: var(--down);
}

/* Progress indicators */
.progress-block {
  margin: 8px 0 12px;
}

.progress-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--tx-2);
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.progress-bar {
  height: 5px;
  width: 100%;
  border-radius: 999px;
  background: var(--ink-4);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.topbar-progress {
  flex: 1 1 160px;
  min-width: 120px;
  display: flex;
  align-items: center;
}

/* ============================================================
   Results panel — KPI metrics
   ============================================================ */
.results-panel {
  margin-top: var(--sp-4);
}

.results-panel h3 {
  font-size: 12px;
  margin: 0 0 var(--sp-2);
  color: var(--tx-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.metric-cell {
  background: var(--ink-3);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 8px 10px;
}

.metric-label {
  font-size: 10px;
  color: var(--tx-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.metric-value {
  font-size: 16px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tx-0);
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.metric-value.up { color: var(--up); }
.metric-value.down { color: var(--down); }

.detail-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background: var(--ink-3);
  color: var(--tx-1);
  font-size: 12px;
  cursor: pointer;
}

.detail-toggle input {
  accent-color: var(--accent);
}

.run-detail-block {
  margin-top: 10px;
}

.detail-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 6px;
  color: var(--tx-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.suggestion-basis,
.run-confirm-card {
  margin-top: 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background: var(--ink-3);
  padding: 10px;
}

.confirm-basis-grid,
.confirm-param-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.confirm-param-grid {
  margin-top: 8px;
}

.confirm-basis-grid div,
.confirm-param-grid div {
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line-0);
  border-radius: var(--r-1);
  background: var(--ink-2);
}

.confirm-basis-grid span,
.confirm-param-grid span {
  display: block;
  color: var(--tx-2);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.confirm-basis-grid b,
.confirm-param-grid b {
  display: block;
  margin-top: 2px;
  color: var(--tx-0);
  font-family: var(--font-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.confirm-warning-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

.confirm-warning-list div {
  padding: 7px 9px;
  border: 1px solid rgba(245, 177, 76, 0.3);
  border-radius: var(--r-1);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11px;
}

.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.confirm-actions .ghost-btn,
.confirm-actions .run-btn {
  margin-top: 0;
}

.detail-table-scroll {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line-1);
  border-radius: var(--r-1);
  background: var(--ink-1);
}

/* ============================================================
   Optimizer
   ============================================================ */
.optimizer-panel {
  padding-bottom: 18px;
}

.optimizer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.optimizer-result {
  margin-top: 12px;
}

.optimizer-best {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-2);
  background: var(--accent-soft);
}

.optimizer-best span {
  color: var(--tx-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.optimizer-best b,
.optimizer-best em {
  color: var(--tx-0);
  font-family: var(--font-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
  font-style: normal;
}

.optimizer-table {
  max-height: 180px;
}

.compact-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-data);
}

.compact-detail-table th,
.compact-detail-table td {
  padding: 0 10px;
  height: var(--row-h);
  border-bottom: 1px solid var(--line-0);
  text-align: left;
  white-space: nowrap;
}

.compact-detail-table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--tx-1);
}

.compact-detail-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ink-2);
  color: var(--tx-2);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   Page shell (Guide / generic)
   ============================================================ */
.page-shell {
  flex: 1;
  overflow: auto;
  padding: var(--sp-5);
  background: var(--ink-1);
}

.page-shell h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
}

.page-shell p {
  color: var(--tx-2);
  margin: 0;
}

.guide-section {
  max-width: 980px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-1);
}

.guide-section h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 16px;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-2);
  margin-top: 12px;
}

.guide-grid > div {
  border: 1px solid var(--line-1);
  background: var(--ink-2);
  border-radius: var(--r-2);
  padding: 12px;
}

.guide-grid b,
.guide-grid span {
  display: block;
}

.guide-grid span {
  margin-top: 4px;
  color: var(--tx-2);
  font-size: 12px;
}

.guide-en {
  color: var(--tx-2);
  font-size: 12px;
  font-style: italic;
  opacity: 0.85;
}

.guide-grid .guide-en {
  margin-top: 2px;
}

p.guide-en {
  font-style: italic;
}

.guide-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.guide-link:hover {
  text-decoration: underline;
}

.guide-subhead {
  margin: 18px 0 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 600;
}

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.page-title-row button.primary {
  height: var(--ctl-h);
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r-2);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 12px var(--accent-soft);
}

/* ============================================================
   History
   ============================================================ */
.history-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--sp-3);
  min-height: 0;
}

@media (max-width: 1000px) {
  .backtest-layout,
  .data-layout {
    grid-template-columns: 1fr;
  }

  .backtest-layout {
    grid-template-rows: minmax(420px, 58vh) minmax(0, 1fr);
    overflow: auto;
  }

  .data-layout > .panel {
    max-height: none;
  }

  .history-layout {
    grid-template-columns: 1fr;
  }
}

.history-list,
.history-detail {
  min-width: 0;
  border: 1px solid var(--line-1);
  background: var(--ink-2);
  border-radius: var(--r-3);
  overflow: auto;
}

.history-detail {
  padding: var(--pad-panel);
}

.history-detail-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.history-detail-title h2 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.ghost-btn.compact {
  width: auto;
  margin-top: 0;
  white-space: nowrap;
  padding: 0 12px;
}

.history-list table,
.history-detail table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-data);
}

.history-list th,
.history-list td,
.history-detail th,
.history-detail td {
  border-bottom: 1px solid var(--line-0);
  padding: 0 10px;
  height: var(--row-h);
  text-align: left;
  white-space: nowrap;
}

.history-list th,
.history-detail th {
  color: var(--tx-2);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 600;
  background: var(--ink-2);
}

.history-list tr {
  cursor: pointer;
}

.history-list tr.selected {
  background: var(--accent-soft);
}

.history-list tbody tr:hover {
  background: var(--ink-3);
}

.history-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--sp-2) 0 var(--sp-3);
  color: var(--tx-2);
  font-size: 12px;
}

.history-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}

.history-metric-cell {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  background: var(--ink-3);
}

.history-metric-cell span {
  display: block;
  color: var(--tx-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.history-metric-cell b {
  display: block;
  margin-top: 3px;
  color: var(--tx-0);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.history-chart-frame {
  height: 620px;
  min-height: 520px;
  margin: 12px 0 16px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--ink-1);
  /* .chart-area fills its parent via flex:1, so the frame must be a flex column.
     Without this the panes collapse to height 0 and the whole chart goes blank. */
  display: flex;
  flex-direction: column;
}

.history-table-scroll {
  overflow: auto;
  max-height: 280px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-1);
  margin-bottom: 14px;
}

.empty-detail {
  color: var(--tx-2);
  padding: 20px;
}

/* ============================================================
   Toast / empty state
   ============================================================ */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 16px;
  border-radius: var(--r-2);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  max-width: 320px;
  z-index: 200;
  font-size: 12.5px;
}

.toast.error {
  border-color: rgba(255, 92, 110, 0.4);
  color: var(--down);
}

.toast.ok {
  border-color: rgba(47, 217, 128, 0.4);
  color: var(--up);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--tx-2);
  gap: 8px;
  text-align: center;
  padding: 24px;
}

/* ============================================================
   STRUCTURAL RESKIN — Signal Desk layout pieces
   ============================================================ */

/* Context bar — native controls styled as sd-select/sd-input boxes */
.sd-ctxbar {
  flex-wrap: wrap;
  flex: none;
}

.sd-native {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  color: var(--tx-0);
  cursor: pointer;
}

.sd-native:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.sd-native:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

select.sd-native {
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tx-2) 50%),
    linear-gradient(135deg, var(--tx-2) 50%, transparent 50%);
  background-position:
    calc(100% - 13px) calc(50% - 1px),
    calc(100% - 9px) calc(50% - 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

input.sd-native::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

.sd-range-group .sd-native { min-width: 0; width: 178px; }
.sd-ctx-pre { font-size: 10.5px; color: var(--tx-2); font-weight: 600; }
.sd-ctx-arrow { color: var(--tx-3); font-size: 12px; }

.sd-ctxbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Workbench: chart hero + right strategy panel + bottom result drawer */
.wb-main {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.wb-chart {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wb-side {
  width: 360px;
  flex: none;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid var(--line-1);
  background: var(--ink-2);
}

.wb-side .panel {
  border-right: none;
  border-left: none;
  border-bottom: 1px solid var(--line-1);
}

.wb-side .panel:last-child { border-bottom: none; }

/* Collapsed, the drawer is just its header bar and stays in normal flow (a thin
   strip at the bottom). Expanded, it floats over the bottom of the workbench as
   its own layer — anchored to #root so the chart + side columns keep their full
   height instead of being squeezed upward. */
.wb-drawer {
  flex: none;
  background: var(--ink-0);
  border-top: 1px solid var(--line-1);
  overflow: auto;
}

.wb-drawer:not(.collapsed) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  max-height: 46vh;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
}

.wb-drawer.collapsed { max-height: none; }

@media (max-width: 1000px) {
  .wb-main { flex-direction: column; overflow: auto; }
  .wb-side { width: auto; border-left: none; border-top: 1px solid var(--line-1); }
}

/* Chart overlay toolbar (OVERLAYS chips + OHLC readout) */
.chart-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-0);
  background: var(--ink-1);
  flex: none;
  flex-wrap: wrap;
}

.chart-toolbar .ct-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tx-2);
}

.chart-chip {
  cursor: pointer;
  user-select: none;
}

.chart-toolbar .ct-ohlc {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--tx-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Strategy panel chrome (sd-panel-head used inside .panel) */
.panel .sd-panel-head {
  margin: -16px -16px 12px;
  padding: var(--sp-3) var(--pad-panel);
  justify-content: space-between;
  background: var(--ink-2);
}

.panel-actions {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.panel-actions .action-row { display: flex; gap: var(--sp-2); }
.panel-actions .action-row .sd-btn { flex: 1; }
.panel-actions .action-row .sd-btn.run-primary { flex: 2; }
.run-meta { font-size: 10.5px; color: var(--tx-3); text-align: center; }

/* Result drawer header + KPI strip */
.rd-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-4);
}

.rd-kpis {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: 4px var(--sp-4) 12px;
}

.rd-body { padding: 0 var(--sp-4) var(--sp-4); }

/* sd-btn flavor used by run buttons rendered in panels */
.sd-btn.run-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Native inputs/selects rendered with the sd-input box look */
.sd-field-input {
  display: block;
  width: 100%;
  color: var(--tx-0);
  font-family: inherit;
}

input.sd-field-input.mono,
.sd-field-input.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.sd-bool {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--ctl-h);
  padding: 0 10px;
  background: var(--ink-3);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  color: var(--tx-1);
  font-size: 12px;
  cursor: pointer;
}

.sd-bool input { accent-color: var(--accent); }

/* keep the schema form readable inside the narrow strategy panel */
.strategy-panel .sd-form-grid { gap: var(--sp-3); }
.strategy-panel .hint { margin-bottom: var(--sp-2); }

/* "Order Notional Per Grid" is the longest param label and wrapped onto a second
   line in the half-width grid column. Shrink it and keep it on one line so the two
   columns stay the same height. */
.sd-field-order_notional_per_grid .sd-field-label {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 4px;
  font-size: 10px;
}
.sd-field-order_notional_per_grid .sd-field-label .unit { font-size: 9px; }