/* ===== BOX COCKPIT (F8 per-Box cockpit) =====
   Styles the bcx-* / box-cockpit-* DOM built by box/cockpits/binary.js and its
   panels (strike_ladder / landing_density / jury_advisory / box_controls) into a
   polished panel-grid cockpit that matches components.css + forecast_cockpit.css.
   Layout only — the cone (Chart.js + inline SVG) styles itself; series colors are
   never touched here. All selectors are class-based so two Boxes render at once
   without id collisions. */
:root {
  --box-cockpit-version: '20260707-f8s2-cbsafe';
  /* Colorblind-safe YES/NO pair (Okabe-Ito blue vs orange) replacing the old
     green/red, which deuteranopic/protanopic operators cannot separate. Color is
     never the sole signal — every YES/NO also carries its text label. */
  --bcx-yes: var(--accent);
  --bcx-no: var(--orange);
  --bcx-yes-dim: var(--accent-dim);
  --bcx-no-dim: var(--orange-dim);
}

/* ---- instance shell ---- */
.box-instance {
  min-width: 0;
}

.box-cockpit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* ---- header ---- */
.bcx-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.bcx-key {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.bcx-type {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bcx-status {
  margin-left: auto;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bcx-status.coasting {
  color: var(--orange);
  font-weight: 600;
}

/* ---- cone ---- */
.bcx-cone {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.05), rgba(249, 115, 22, 0.05)),
    var(--bg-primary);
  overflow: hidden;
}

.bcx-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.bcx-tobeat {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

.bcx-cone-ctrls {
  z-index: 3;
}

.bcx-cone-y-readout {
  font-family: var(--font-mono);
}

/* ---- decision strip ---- */
.bcx-decision {
  padding: 12px 14px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.12), rgba(56, 189, 248, 0.05)),
    var(--bg-primary);
}

.bcx-action {
  color: var(--text-primary);
  font-size: var(--text-2xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.bcx-action.yes { color: var(--bcx-yes); }
.bcx-action.no { color: var(--bcx-no); }
.bcx-action.hold { color: var(--yellow); }

.bcx-reason {
  margin-top: 5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ---- readout grid ---- */
.bcx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.bcx-cell {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
}

.bcx-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bcx-value {
  margin-top: 5px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* ---- horizon ladder (in-cockpit) ---- */
.bcx-ladder {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
}

.bcx-ladder-title {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bcx-ladder-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.bcx-ladder-cell {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 4px;
  background: var(--bg-primary);
  text-align: center;
}

.bcx-ladder-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bcx-ladder-price {
  margin-top: 3px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.bcx-ladder-pyes {
  margin-top: 2px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* ---- jury summary line ---- */
.bcx-jury {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.bcx-jury-market,
.bcx-jury-trading {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.bcx-jury-market { border-left-color: var(--accent); }
.bcx-jury-trading { border-left-color: var(--green); }

/* ---- manual trade button bar ---- */
.bcx-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
}

/* ---- buttons ---- */
.bcx-btn {
  flex: 1 1 auto;
  min-width: 96px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.bcx-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

.bcx-buy-yes {
  border-color: rgba(59, 130, 246, 0.5);
  background: var(--bcx-yes-dim);
  color: var(--bcx-yes);
}
.bcx-buy-yes:hover { background: var(--bcx-yes); color: #05122b; }

.bcx-buy-no {
  border-color: rgba(249, 115, 22, 0.5);
  background: var(--bcx-no-dim);
  color: var(--bcx-no);
}
.bcx-buy-no:hover { background: var(--bcx-no); color: #1a0d02; }

.bcx-sell-yes,
.bcx-sell-no {
  flex: 1 1 auto;
  background: transparent;
  color: var(--text-secondary);
}
.bcx-sell-yes:hover,
.bcx-sell-no:hover { color: var(--text-primary); }

/* cone y-axis zoom / lock controls */
.bcx-cone-y-out,
.bcx-cone-y-in,
.bcx-cone-y-lock {
  flex: 0 0 auto;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  background: var(--bg-primary);
  color: var(--text-secondary);
}
.bcx-cone-y-out:hover,
.bcx-cone-y-in:hover,
.bcx-cone-y-lock:hover { border-color: var(--accent); color: var(--text-primary); }

/* ---- panels (strike ladder / density / jury / controls) ---- */
.bcx-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.bcx-panel-host { min-width: 0; }

.bcx-panel {
  min-width: 0;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
}

.bcx-history-row { margin-top: 10px; }
.bcx-panel-history { width: 100%; }
.bcx-hist-scroll { scrollbar-width: thin; }

.bcx-panel-jury,
.bcx-panel-controls {
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.05), rgba(56, 189, 248, 0)),
    var(--bg-tertiary);
}

.bcx-panel-title {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
}

.bcx-panel-controls .bcx-btn {
  flex: 0 1 auto;
  min-width: 120px;
  margin-top: 2px;
}

.bcx-ctl-pill {
  font-family: var(--font-mono);
  font-weight: 700;
}

/* ---- container / stub fallback renderers ---- */
.box-cockpit-container .box-cockpit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.box-cockpit-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.box-cockpit-key {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: 800;
}

.box-cockpit-type {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.box-cockpit-cell {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
}

.box-cockpit-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.box-cockpit-value {
  margin-top: 5px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.box-cockpit-meta {
  margin-top: 6px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.box-cockpit-stub-msg {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ---- feed setup / pool scaffold ---- */
.box-feed-setup,
.box-feed-pool {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-tertiary);
}

.box-feed-setup-title,
.box-feed-pool-title {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.box-feed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.box-feed-row:nth-child(even) { background: rgba(148, 163, 184, 0.05); }

.box-feed-name { color: var(--text-primary); font-weight: 700; }
.box-feed-role,
.box-feed-priority,
.box-feed-fallback,
.box-feed-markets { color: var(--text-muted); }

.box-feed-health {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.box-feed-health-ok { color: var(--green); border-color: rgba(34, 197, 94, 0.4); }
.box-feed-health-fail { color: var(--red); border-color: rgba(239, 68, 68, 0.4); }
.box-feed-health-disabled,
.box-feed-health-unknown { color: var(--text-muted); }

.box-feed-empty {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ---- responsive ---- */
@media (max-width: 640px) {
  .bcx-grid { grid-template-columns: 1fr 1fr; }
  .bcx-panels { grid-template-columns: 1fr; }
  .bcx-status { margin-left: 0; text-align: left; }
}