/* Process > Trades — the run's trigger chip and the "What the agent saw" panel
   under the chart (trades_agent.js). Same language as chart.css: theme vars,
   1px hairlines, 4px radius, 11-12px type. */

/* The chart becomes a column: the plot on top, the agent panel under it. */
#chart-col {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#chart-col #chart-plot { flex: 1 1 auto; min-height: 120px; }

/* The legend's "Trigger" chip: the one part of the legend that takes a click. */
#trigger-toggle {
  pointer-events: auto;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 16px;
  cursor: pointer;
  white-space: nowrap;
}
#trigger-toggle .tt-mark {
  display: inline-block;
  width: 2px;
  height: 10px;
  margin-right: 5px;
  vertical-align: -1px;
  background: #7e57c2;
  opacity: 0.4;
}
#trigger-toggle[aria-pressed="true"] { color: #7e57c2; border-color: color-mix(in srgb, #7e57c2 45%, var(--border)); }
#trigger-toggle[aria-pressed="true"] .tt-mark { opacity: 1; }
#trigger-toggle.is-err { color: var(--down); }
#trigger-toggle:hover { background: var(--subtle); }

/* The divider over the panel: drag it up for a taller panel. */
#agent-splitter {
  flex: 0 0 6px;
  cursor: row-resize;
  background: var(--border);
  position: relative;
}
#agent-splitter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(to right, var(--text-dim) 0 2px, transparent 2px 5px);
}
#agent-splitter:hover,
#agent-splitter:focus-visible,
#agent-splitter.dragging { background: var(--selected); outline: none; }
#agent-splitter[hidden] { display: none; }

#agent-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}
#agent-panel.is-collapsed { border-top: 1px solid var(--border); }

#agent-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#agent-collapse {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 12px;
  width: 18px;
  padding: 0;
  cursor: pointer;
}
.ag-title { font-weight: 600; }

/* Backtest | Live: one segmented switch, the shown side filled. */
.ag-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ag-seg[hidden] { display: none; }
.ag-seg button {
  border: none;
  background: var(--panel);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 16px;
  padding: 2px 10px;
  cursor: pointer;
}
.ag-seg button + button { border-left: 1px solid var(--border); }
.ag-seg button:hover:not(:disabled) { background: var(--subtle); color: var(--text); }
.ag-seg button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--selected) 12%, var(--panel));
  color: var(--selected);
  font-weight: 600;
}
.ag-seg button:disabled { cursor: not-allowed; opacity: 0.45; }

/* The one note, only when the two sides got different data: quiet text. */
.ag-note-line {
  color: var(--text-dim);
  font-size: 11px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-note-line[hidden] { display: none; }

.ag-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.ag-hits { color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.ag-hits:empty { display: none; }
.ag-find {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-dim);
  cursor: text;
}
.ag-find:focus-within { border-color: var(--selected); color: var(--selected); }
#agent-search {
  width: 70px;
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  transition: width 0.12s ease;
}
#agent-search:focus,
#agent-search:not(:placeholder-shown) { width: 150px; }

#agent-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#agent-body[hidden] { display: none; }
#agent-empty { margin: 0; padding: 10px; color: var(--text-dim); }
#agent-empty[hidden] { display: none; }
#agent-cols {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#agent-cols[hidden] { display: none; }
.ag-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ag-col + .ag-col { border-left: 1px solid var(--border); }
.ag-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  padding: 2px 6px 2px 10px;
  color: var(--text-dim);
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}
.ag-col-head b { color: var(--text); }
.ag-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
}
.ag-copy:hover { background: var(--subtle); border-color: var(--border); color: var(--text); }
.ag-copy.is-done { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, var(--border)); }
.ag-copy.is-err { color: var(--down); }
.ag-decision { padding: 5px 10px; border-bottom: 1px solid var(--border); }
.ag-decision .buy { color: var(--buy); }
.ag-decision .sell { color: var(--sell); }
.ag-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 0 10px; }
.ag-scroll:focus-visible { outline: 1px solid var(--selected); outline-offset: -1px; }
.ag-note { margin: 0; padding: 8px 10px; color: var(--text-dim); }

/* The input's leading facts (price, regime): a two-column grid. */
.ag-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 14px;
  margin: 2px 10px 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--subtle);
  font-size: 11.5px;
}
.ag-facts dt { color: var(--text-dim); }
.ag-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A heading over several sections (Agent Signals: one section per agent). */
.ag-group { margin-top: 2px; }
.ag-group-h {
  padding: 4px 10px 2px;
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ag-group .ag-sec > summary { padding-left: 16px; }
.ag-group .ag-sec > pre { padding-left: 30px; }

.ag-sec > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.ag-sec > summary::-webkit-details-marker { display: none; }
.ag-sec > summary::before {
  content: "▸";
  width: 8px;
  margin-right: -2px;
  color: var(--text-dim);
  font-size: 10px;
}
.ag-sec[open] > summary::before { content: "▾"; }
.ag-sec > summary:hover { background: var(--subtle); }
.ag-sec .ag-sig {
  padding: 0 5px;
  border-radius: var(--radius);
  font-size: 10.5px;
  line-height: 16px;
  font-weight: 600;
  background: var(--subtle);
  color: var(--text-dim);
}
.ag-sec .ag-sig.buy { color: var(--buy); background: color-mix(in srgb, var(--buy) 10%, transparent); }
.ag-sec .ag-sig.sell { color: var(--sell); background: color-mix(in srgb, var(--sell) 10%, transparent); }
.ag-sec .ag-path { color: var(--text-dim); font-weight: 400; font-size: 10.5px; }
.ag-sec > pre {
  margin: 0 0 6px;
  padding: 2px 12px 4px 24px;
  font-family: var(--mono-font);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.ag-facts mark,
.ag-sec mark { background: #fff3a8; color: inherit; border-radius: 2px; }
.ag-facts mark.is-cur,
.ag-sec mark.is-cur { background: #ffb74d; }