/* CYC-3974 — M15 Signal panel partial.
 *
 * Extracted from dashboard.html so /m15-viewer.html can render the same
 * widget without pulling in the rest of the dashboard's CSS surface. The
 * inline copy in dashboard.html is left UNTOUCHED — zero regression risk
 * for Yafet/Ethan/agents per the CYC-3974 CEO clarification (2026-04-26).
 *
 * Self-contained: declares its own :root color tokens with sensible
 * fallbacks so the partial works on a page that doesn't define them.
 * On dashboard.html (which DOES define :root) the cascade picks up the
 * dashboard's tokens; on m15-viewer.html the fallbacks here apply.
 */

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --surface2: #1c2333;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #6366f1;
  --green: #3fb950;
  --yellow: #d29922;
  --red: #f85149;
  --radius: 8px;
}

/* ═══════ M15 Signal widget (tab + inline + viewer page) ═══════ */
.m15-wrap {
  background: var(--surface, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: var(--radius, 6px);
  padding: 10px 12px;
  font-size: 12px;
}
.m15-expanded {
  padding: 14px 16px;
}
.m15-compact {
  margin: 10px 0;
}
.m15-floating {
  border: none;
  background: transparent;
  padding: 6px 10px 10px 10px;
}
.m15-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #58a6ff);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.m15-card {
  border: 1px solid var(--border, #30363d);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--surface2, #0d1117);
}
.m15-row {
  border-bottom: 1px dashed var(--border, #30363d);
  padding: 6px 0;
}
.m15-row:last-child {
  border-bottom: none;
}
.m15-row-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}
.m15-row-sub {
  font-size: 11px;
  color: var(--muted, #8b949e);
  margin-top: 3px;
}
.m15-sym {
  font-weight: 700;
  font-size: 13px;
  min-width: 28px;
}
.m15-action {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 11px;
}
.m15-act-long {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  border: 1px solid #3fb950;
}
.m15-act-short {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border: 1px solid #f85149;
}
.m15-act-exit {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
  border: 1px solid #d29922;
}
.m15-act-neutral {
  background: rgba(110, 118, 129, 0.15);
  color: var(--muted, #8b949e);
  border: 1px solid var(--border, #30363d);
}
/* CYC-5736 — gate direction bias pill. Sits next to the M15 action
   pill in the per-symbol header so a glance tells the operator
   "M15 says X, gate bias is Y" without bouncing to Gate Live.
   Composes with .m15-act-long / .m15-act-short / .m15-act-neutral
   for color, but visually subdued so the engine's decision still
   dominates the row. Mirrored from src/public/dashboard.html inline
   styles per CYC-3974. */
.m15-gate-bias {
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
  opacity: 0.9;
}
.m15-concord {
  font-weight: 700;
  font-size: 11px;
  margin-left: -2px;
}
.m15-concord-ok {
  color: #3fb950;
}
.m15-concord-warn {
  color: #d29922;
}
.m15-price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.m15-pnl {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.m15-pnl-pos { color: #3fb950; }
.m15-pnl-neg { color: #f85149; }
.m15-reason {
  color: var(--muted, #8b949e);
  font-style: italic;
  font-size: 11px;
}
.m15-edge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text, #e6edf3);
}
.m15-edge-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted, #8b949e);
}
.m15-levels {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted, #8b949e);
}
.m15-actions {
  margin-top: 8px;
}
.m15-btn {
  background: var(--surface, #161b22);
  border: 1px solid var(--border, #30363d);
  color: var(--text, #e6edf3);
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}
.m15-btn:hover {
  background: var(--surface2, #0d1117);
}
.m15-section {
  margin-top: 12px;
}
.m15-log {
  width: 100%;
  margin-top: 6px;
  font-size: 11px;
  border-collapse: collapse;
}
.m15-log th,
.m15-log td {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid var(--border, #30363d);
}
.m15-log th {
  color: var(--muted, #8b949e);
  font-weight: 600;
}
.m15-empty,
.m15-err {
  padding: 6px 4px;
  color: var(--muted, #8b949e);
  font-style: italic;
}
.m15-err {
  color: #f85149;
  font-style: normal;
}
.m15-meta {
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted, #8b949e);
}
.m15-fetch-err {
  margin: 0 0 8px 0;
  padding: 6px 10px;
  background: rgba(248, 81, 73, 0.18);
  border: 1px solid #f85149;
  border-radius: 4px;
  color: #f85149;
  font-size: 11px;
  font-weight: 600;
}
/* CYC-5743 — engine-state banner. Mirrored from dashboard.html so
   /m15-viewer.html renders parity-locked with the inline dashboard
   widget per CYC-3974. Distinct from .m15-fetch-err (poll-layer) and
   .m15-err (engine error from a successful tick). This banner answers
   "is the engine producing decisions right now?" and is the FIRST
   viewport state for the M15 widget — it sits above the symbol cards
   in expanded mode and as a single-line strip in compact/floating
   modes. Per docs/dashboard-style-guide.md:
     - 13px+ decision copy (not metadata)
     - left-border severity, AA contrast on --surface
     - yellow for warning/idle, red for dead/stalled, neutral when
       actively producing. */
.m15-engine-state {
  margin: 0 0 10px 0;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid var(--border, #30363d);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--surface, #161b22);
  color: var(--text, #e6edf3);
}
.m15-engine-state .m15-engine-state-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 13px;
}
.m15-engine-state .m15-engine-state-detail {
  color: var(--text-secondary, var(--muted, #8b949e));
  font-size: 13px;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.m15-engine-state.idle {
  border-left-color: #d29922;
  background: rgba(210, 153, 34, 0.1);
}
.m15-engine-state.idle .m15-engine-state-label {
  color: #d29922;
}
.m15-engine-state.stale {
  border-left-color: #d29922;
  background: rgba(210, 153, 34, 0.16);
}
.m15-engine-state.stale .m15-engine-state-label {
  color: #d29922;
}
.m15-engine-state.dead {
  border-left-color: #f85149;
  background: rgba(248, 81, 73, 0.16);
}
.m15-engine-state.dead .m15-engine-state-label {
  color: #f85149;
}
.m15-engine-state.active {
  border-left-color: #3fb950;
  background: rgba(63, 185, 80, 0.06);
}
.m15-engine-state.active .m15-engine-state-label {
  color: #3fb950;
}
.m15-compact .m15-engine-state,
.m15-floating .m15-engine-state {
  margin: 0 0 6px 0;
  padding: 6px 8px;
}
/* CYC-5743 — historical-log dimmer when the engine is not currently
   producing decisions. The age string ("last decision 4d 5h ago") is
   metadata next to a 13px section header, so 12px passes the style
   guide's metadata exception. */
.m15-section.m15-historical > b {
  color: var(--text-secondary, var(--muted, #8b949e));
}
.m15-section.m15-historical .m15-historical-age {
  margin-left: 6px;
  font-size: 12px;
  color: var(--muted, #6e7681);
  font-variant-numeric: tabular-nums;
}
.m15-freshness {
  margin-top: 4px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.m15-fresh {
  color: #3fb950;
}
.m15-warn {
  color: #d29922;
}
.m15-stale {
  color: #f85149;
  font-weight: 700;
}
.m15-just-exit {
  font-size: 11px;
  color: #d29922;
  font-variant-numeric: tabular-nums;
}

/* CYC-5716 — Paper Trader overlay
 *
 * The M15 Signal widget is the manual trader's single-source-of-truth.
 * Paper Trader entries / exits sit alongside the M15 engine's HOLD /
 * ENTER / EXIT decisions so the trader sees every signal source the
 * company fires in one place. Visual contract:
 *   - Paper badges sit BELOW the existing edge / flags rows, never
 *     replace them — engine-side data takes primary visual weight.
 *   - PT_ENTER inherits direction colour (long=green, short=red).
 *   - PT_EXIT colours by realised PnL sign so the manual trader sees
 *     the outcome at a glance (win=green, loss=red, breakeven=amber).
 *   - The dedicated viewer (m15-viewer.html) and the inline dashboard
 *     widget share the same class names so the styles render
 *     identically on both surfaces.
 */
.m15-pt-symbol-row {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}
.m15-pt-badge {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--border, #30363d);
  color: var(--muted, #8b949e);
  background: rgba(99, 102, 241, 0.08);
}
.m15-pt-badge.m15-pt-open {
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
  background: rgba(99, 102, 241, 0.15);
}
.m15-pt-badge.m15-pt-recent {
  font-style: italic;
}
.m15-pt-section {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border, #30363d);
}
.m15-pt-table {
  margin-top: 6px;
}
.m15-pt-table th {
  color: var(--accent, #6366f1);
}
.m15-pt-open-list {
  margin-bottom: 8px;
}
.m15-pt-empty {
  color: var(--muted, #8b949e);
  font-style: italic;
  font-size: 11px;
  padding: 4px 0;
}
.m15-pt-exit-win {
  color: #3fb950;
}
.m15-pt-exit-loss {
  color: #f85149;
}