/* Trade page. Loaded after app.css. */

/* ── mode badge ─────────────────────────────────────────────────────────
   Live and paper must never be confusable at a glance. Paper is quiet;
   live is loud and stays loud. */

.mode-badge {
  font: 600 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 9px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-mute);
}
.mode-badge.paper { color: var(--accent); border-color: rgba(59,130,246,0.45); }
.mode-badge.live {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.55; } }

/* ── kill switch ────────────────────────────────────────────────────────
   Always visible, always in the same place, never behind a menu. */

button.kill {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  font-weight: 600;
}
button.kill:hover:not(:disabled) { background: var(--red); color: #fff; }
button.kill:disabled { border-color: var(--border); color: var(--text-mute); }
button.kill.engaged { background: var(--red); color: #fff; }

button.flatten {
  border-color: var(--amber);
  color: var(--amber);
  background: transparent;
}
button.flatten:hover:not(:disabled) { background: var(--amber); color: #0d1117; }

.notice.danger {
  background: rgba(239, 83, 80, 0.10);
  border: 1px solid rgba(239, 83, 80, 0.45);
  color: var(--notice-danger-text);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  margin-bottom: 12px;
}

/* ── position card ──────────────────────────────────────────────────────── */

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12px; }
.kv .k { color: var(--text-mute); }
.kv .v { font-family: var(--mono); }

.limit-bar {
  height: 3px;
  background: var(--bg-input);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
}
.limit-bar > span { display: block; height: 100%; background: var(--accent); }
.limit-bar > span.hot { background: var(--red); }

/* ── activity log ───────────────────────────────────────────────────────── */

.log { list-style: none; margin: 0; padding: 0; font: 12px var(--mono); }
.log li {
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
}
.log li .t { color: var(--text-mute); flex: 0 0 52px; }
.log li.entry { color: var(--green); }
.log li.exit  { color: var(--accent); }
.log li.block { color: var(--amber); }
.log li.error { color: var(--red); }

/* ── live chart ─────────────────────────────────────────────────────────
   Taller than the backtest's equity pane and shorter than its price pane:
   this one is watched, not studied, and the panels below it — position,
   risk, trades — have to stay on the same screen. */

#live-chart { height: 380px; }

.panel > h2.chart-head { display: flex; align-items: center; gap: 8px; }
.chart-head .spacer { flex: 1; }

/* The last traded price, in the panel header where it is readable from
   across the room. Sized and cased against the header's own uppercase
   letter-spacing, which is meant for labels rather than numbers. */
.chart-last {
  font: 600 13px/1 var(--mono);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.chart-last .chg { font-weight: 500; font-size: 11.5px; margin-left: 6px; }
.chart-last.pos { color: var(--green); }
.chart-last.neg { color: var(--red); }

/* The legend and footer sit directly on the panel, not inside a padded
   body, so they need their own gutter to line up with the header above. */
.chart-legend, .chart-foot { padding-left: 14px; padding-right: 14px; }
.chart-foot { padding-bottom: 10px; }