/* Box cockpit rendering — the fan chart + decision readout inside a mounted box. Its own
   small token set (--bull/--bear/--flat etc.), independent of variables.css/shell.css's
   tokens, which style the surrounding page chrome instead. Shell-level rules (body, login
   panel, headings) moved out to shell.css/index.html when the header/nav/footer/page shell
   was ported — this file now only owns what's actually inside a .box-instance. */
:root {
  color-scheme: dark;
  --panel: #12161f;
  --border: #232838;
  --muted: #8992a8;
  --bull: #35c98f;
  --bear: #e8586a;
  --flat: #8992a8;
}

.box-instance {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; margin-bottom: 16px;
  transition: border-color 0.2s;
}

/* Held/at-risk — the v024 "C2 tile" concept: the whole tile's border reflects real position
   state at a glance, not just an inline badge buried in the readout. */
.box-instance--held { border-color: var(--bull); }
.box-instance--at-risk { border-color: var(--bear); }

.position-row { display: flex; gap: 14px; align-items: baseline; margin-top: 10px; font-size: 13px; flex-wrap: wrap; }
.position-keyword { text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; font-size: 12px; padding: 1px 6px; border-radius: 3px; }
.position-keyword--held { color: var(--bull); background: rgba(53, 201, 143, 0.12); }
.position-keyword--at-risk { color: var(--bear); background: rgba(232, 88, 106, 0.12); }
.position-pnl { font-weight: 700; font-family: ui-monospace, monospace; }
.position-pnl--up { color: var(--bull); }
.position-pnl--down { color: var(--bear); }

.box-cockpit-header { font-weight: 600; margin-bottom: 8px; cursor: default; }

.box-cockpit-status { color: var(--muted); font-size: 12px; margin-bottom: 10px; }

.box-cockpit-fan { width: 100%; height: auto; color: #4c8bf5; }

.decision-row { display: flex; gap: 14px; align-items: baseline; margin-top: 10px; font-size: 13px; flex-wrap: wrap; }

.decision-lean { text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; font-size: 12px; }
.decision-lean--bullish { color: var(--bull); }
.decision-lean--bearish { color: var(--bear); }
.decision-lean--flat { color: var(--flat); }

.decision-metric { color: var(--muted); }

.decision-bar { height: 6px; background: var(--border); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.decision-bar-fill { height: 100%; }
.decision-bar-fill--bullish { background: var(--bull); }
.decision-bar-fill--bearish { background: var(--bear); }
.decision-bar-fill--flat { background: var(--flat); }

.decision-outcome { margin-top: 8px; font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }

.decision-unavailable { margin-top: 10px; font-size: 12px; color: var(--muted); font-style: italic; }

/* A renderer panel that threw on a real frame — deliberately loud (box.js no longer
   swallows these), so a gap between what's ported and what the backend actually sends is
   obvious on-page, not just in devtools. */
.box-render-error {
  margin-top: 10px; padding: 6px 10px; border: 1px solid var(--bear); border-radius: 4px;
  background: rgba(232, 88, 106, 0.1); color: var(--bear); font-size: 11px;
  font-family: ui-monospace, monospace;
}