/* ═══════════════════════════════════════════════════════════════════════
   EdgeFlow Design System (Sprint 3.2)
   Single source of truth for brand tokens + shared components.
   Extracted from edgeflow-v5.html; every page links this FIRST, then maps
   any legacy local variables onto these tokens.
   Usage: <link rel="stylesheet" href="edgeflow.css">
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Palette aligned to Claude Design "EdgeFlow Desktop" spec (dark). Token
     names unchanged so every page + mobile inherits the refresh. */
  --bg:    #0a1018;
  --sur:   #111b26;               /* card surface */
  --sur2:  #0c141d;               /* tile / recessed */
  --nav:   #0c1420;               /* chrome / bars */
  --bd:    rgba(255,255,255,.09);
  --bd2:   rgba(255,255,255,.16);
  --tx:    #e8edf2;
  --tx2:   #9dacbc;
  --tx3:   #6f7c8b;
  --p:     #35c8f2;               /* primary cyan */
  --ps:    rgba(53,200,242,.12);
  --g:     #4ed9a4;               /* profit / long */
  --r:     #ff5a6e;               /* loss / short */
  --a:     #f2b341;               /* warning */
  --v:     #8b5cf6;               /* violet */
  --s:     #35c8f2;               /* scalp accent */
  --ss:    rgba(53,200,242,.1);
  --gs:    rgba(78,217,164,.12);
  --rs:    rgba(255,90,110,.12);

  --r4:4px; --r8:8px; --r12:12px; --r16:16px; --rp:6px;
  --s1:0 1px 3px rgba(0,0,0,.4);
  --s2:0 2px 8px rgba(0,0,0,.3);
  --s3:0 4px 16px rgba(0,0,0,.5);

  --fb:'DM Sans',system-ui,sans-serif;
  --fh:'DM Sans',system-ui,sans-serif;
  --fm:'JetBrains Mono','DM Mono','Fira Code',monospace;
}
.light, html.light body, html.light {
  /* Light palette from the same design spec. */
  --bg:#f2f5f9; --sur:#fff; --sur2:#f1f5f9; --nav:#fff;
  --bd:rgba(15,27,38,.11); --bd2:rgba(15,27,38,.2);
  --tx:#0f1b26; --tx2:#4a5a6b; --tx3:#5e6e7e;
  --p:#0e86b8; --s:#0e86b8;
  --g:#0e8a5f; --r:#d93a50; --a:#a2650b;
  --ps:rgba(14,134,184,.1);
  --ss:rgba(14,134,184,.1);
  --gs:rgba(14,138,95,.1); --rs:rgba(217,58,80,.1);
  --s1:0 1px 3px rgba(15,34,54,.08);
  --s2:0 2px 8px rgba(15,34,54,.08);
  --s3:0 4px 16px rgba(15,34,54,.12);
}

/* ── Shared components ─────────────────────────────────────────────── */
.ef-card { background:var(--sur); border:1px solid var(--bd);
  border-radius:var(--r12); padding:14px; box-shadow:var(--s1); }
.ef-card-title { font-family:var(--fh); font-size:12px; font-weight:700;
  color:var(--tx); display:flex; align-items:center; gap:6px; margin-bottom:8px; }

.ef-btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px;
  border-radius:var(--rp); font-size:11px; font-weight:700; cursor:pointer;
  border:1px solid transparent; transition:all .15s; font-family:var(--fb);
  white-space:nowrap; background:var(--sur2); color:var(--tx2);
  border-color:var(--bd); }
.ef-btn:hover { border-color:var(--bd2); color:var(--tx); }
.ef-btn-p { background:var(--p); color:#fff; border-color:var(--p); }
.ef-btn-g { background:var(--gs); color:var(--g); border-color:var(--g); }
.ef-btn-r { background:var(--rs); color:var(--r); border-color:var(--r); }

.ef-input { background:var(--sur2); border:1px solid var(--bd);
  border-radius:var(--rp); padding:7px 10px; font-size:12px; color:var(--tx);
  font-family:var(--fb); outline:none; width:100%; }
.ef-input:focus { border-color:var(--p); }

.ef-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.ef-tbl th, .ef-tbl td { text-align:left; padding:7px 10px;
  border-bottom:1px solid var(--bd); }
.ef-tbl th { color:var(--tx3); font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; font-weight:700; }
.ef-tbl .num { font-family:var(--fm); text-align:right; }

/* Verdict badges (Verdict Engine states — used by dashboard, chart, copilot) */
.ef-verdict { display:inline-flex; align-items:center; gap:6px;
  font-family:var(--fh); font-weight:800; font-size:13px;
  padding:4px 12px; border-radius:999px; letter-spacing:.3px; }
.ef-verdict.strong_long  { background:var(--g);  color:#04170a; }
.ef-verdict.lean_long    { background:var(--gs); color:var(--g); border:1px solid var(--g); }
.ef-verdict.neutral      { background:var(--sur2); color:var(--tx3); border:1px solid var(--bd2); }
.ef-verdict.lean_short   { background:var(--rs); color:var(--r); border:1px solid var(--r); }
.ef-verdict.strong_short { background:var(--r);  color:#1c0505; }
.ef-verdict.stand_aside  { background:var(--sur2); color:var(--tx3);
  border:1px dashed var(--bd2); }

.ef-strength { height:5px; border-radius:99px; background:var(--sur2);
  overflow:hidden; }
.ef-strength > div { height:100%; background:var(--p); transition:width .4s; }

.ef-dir-long  { color:var(--g); font-weight:700; }
.ef-dir-short { color:var(--r); font-weight:700; }
.ef-pnl-p { color:var(--g); font-weight:700; }
.ef-pnl-n { color:var(--r); font-weight:700; }
.ef-empty { color:var(--tx3); text-align:center; padding:28px 8px; font-size:13px; }

/* ── Shared top nav (injected by edgeflow-nav.js) ──────────────────── */
#ef-nav { display:flex; align-items:center; gap:4px; padding:0 14px;
  height:42px; background:var(--nav); border-bottom:1px solid var(--bd);
  font-family:var(--fb); position:sticky; top:0; z-index:700; }
#ef-nav .ef-wordmark { font-family:var(--fh); font-weight:800; font-size:15px;
  letter-spacing:-.5px; color:var(--tx); margin-right:14px; text-decoration:none; }
#ef-nav .ef-wordmark b { color:var(--p); }
#ef-nav a.ef-navlink { color:var(--tx3); text-decoration:none; font-size:12px;
  font-weight:700; padding:5px 12px; border-radius:var(--rp); }
#ef-nav a.ef-navlink:hover { color:var(--tx); background:var(--sur2); }
#ef-nav a.ef-navlink.active { color:var(--p); background:var(--ps); }
@media (max-width:640px) {
  #ef-nav { overflow-x:auto; }
  #ef-nav a.ef-navlink { padding:5px 9px; font-size:11.5px; }
}

/* Sprint 4.5: Simple mode hides pro-only surfaces globally */
body.ef-simple [data-pro-only] { display: none !important; }
.ef-status { font-size:10px; font-weight:800; padding:2px 8px; border-radius:99px; }
.ef-status.act_now { background:var(--gs); color:var(--g); border:1px solid var(--g);
  animation: efpulse 1.6s ease infinite; }
.ef-status.wait_for_pullback { background:rgba(245,158,11,.12); color:var(--a);
  border:1px solid var(--a); }
.ef-status.stand_aside { background:var(--sur2); color:var(--tx3); border:1px solid var(--bd2); }
@keyframes efpulse { 50% { box-shadow:0 0 8px var(--gs); } }

/* ── Sprint 6.6: mobile-native pass ─────────────────────────────────────── */
@media (max-width: 640px) {
  /* nav becomes a bottom tab bar (thumb reach), like a native app */
  #ef-nav {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    height: auto; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bd); border-bottom: none;
    justify-content: space-around; overflow-x: visible;
    box-shadow: 0 -2px 12px rgba(0,0,0,.35); z-index: 900;
  }
  #ef-nav .ef-wordmark { display: none; }
  #ef-nav a.ef-navlink {
    flex: 1; text-align: center; padding: 7px 2px; font-size: 10.5px;
    border-radius: var(--r8);
  }
  #ef-nav .ef-btn { position: fixed; top: 10px; right: 12px; z-index: 901; }
  /* content clears the bottom bar */
  body { padding-bottom: 62px; }
  main { padding: 12px !important; }
  /* touch targets >= 44px */
  .ef-btn { min-height: 40px; padding: 9px 14px; }
  .opt, .res, .frow { min-height: 44px; }
  /* forms stack */
  .frow { grid-template-columns: 1fr !important; gap: 4px !important; }
  /* copilot pin sits above the tab bar */
  #ef-cop-toggle { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
  /* chart: side panel becomes a bottom sheet */
  .side {
    position: fixed !important; left: 0; right: 0; bottom: 62px; top: auto !important;
    width: 100% !important; max-height: 52vh; overflow-y: auto;
    border-left: none; border-top: 1px solid var(--bd);
    border-radius: var(--r16) var(--r16) 0 0; box-shadow: var(--s3); z-index: 800;
  }
  /* tables scroll rather than squash */
  .ef-tbl, table { display: block; overflow-x: auto; white-space: nowrap; }
  /* stat/verdict grids go single-column */
  .vgrid { grid-template-columns: 1fr !important; }
  .cols { grid-template-columns: 1fr !important; }
}

/* ── Sprint 7.4: site-wide responsive table↔card system ─────────────────── */
/* Any <table class="ef-table"> auto-collapses to stacked cards on narrow
   screens. Each <td> needs data-label="Column name" for the card view.
   A view toggle (.ef-view-toggle) lets users force cards even on desktop. */
.ef-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ef-table th { text-align: left; padding: 8px 10px; color: var(--tx3);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; border-bottom: 1px solid var(--bd); }
.ef-table td { padding: 9px 10px; border-bottom: 1px solid var(--bd); }
.ef-table tr:hover td { background: var(--sur2); }

/* card mode — triggered by narrow screen OR body.ef-cards (user toggle) */
@media (max-width: 720px) {
  .ef-table.ef-responsive thead { display: none; }
  .ef-table.ef-responsive tr {
    display: block; margin-bottom: 10px; background: var(--sur);
    border: 1px solid var(--bd); border-radius: var(--r12); padding: 6px 12px;
  }
  .ef-table.ef-responsive td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; border-bottom: 1px solid var(--bd); padding: 7px 0;
    text-align: right;
  }
  .ef-table.ef-responsive tr td:last-child { border-bottom: none; }
  .ef-table.ef-responsive td::before {
    content: attr(data-label); color: var(--tx3); font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    text-align: left; flex-shrink: 0;
  }
  .ef-table.ef-responsive td:empty { display: none; }
}
/* user-forced card mode on any width */
body.ef-cards .ef-table.ef-responsive thead { display: none; }
body.ef-cards .ef-table.ef-responsive tr {
  display: block; margin-bottom: 10px; background: var(--sur);
  border: 1px solid var(--bd); border-radius: var(--r12); padding: 6px 12px;
}
body.ef-cards .ef-table.ef-responsive td {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--bd); padding: 7px 0; text-align: right;
}
body.ef-cards .ef-table.ef-responsive td::before {
  content: attr(data-label); color: var(--tx3); font-size: 11px;
  font-weight: 700; text-transform: uppercase; text-align: left;
}
.ef-view-toggle { display: inline-flex; gap: 2px; background: var(--sur2);
  border-radius: var(--rp); padding: 2px; }
.ef-view-toggle button { padding: 4px 12px; font-size: 11px; border: none;
  background: transparent; color: var(--tx3); border-radius: var(--rp);
  cursor: pointer; font-weight: 700; }
.ef-view-toggle button.active { background: var(--p); color: #04140a; }

/* ── chart page: stack signals below chart on mobile, make both usable ──── */
@media (max-width: 860px) {
  .chart-layout { flex-direction: column !important; }
  .chart-layout .signals-panel {
    width: 100% !important; max-width: 100% !important;
    max-height: none !important; border-left: none !important;
    border-top: 1px solid var(--bd);
  }
  .chart-layout .chart-main { min-height: 52vh; }
  /* collapse the signals panel to a peek, expandable */
  .signals-panel.collapsed { max-height: 220px; overflow: hidden; position: relative; }
  .signals-panel.collapsed::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
    background: linear-gradient(transparent, var(--bg));
  }
  .signals-expand-btn { display: block; width: 100%; margin-top: 6px; }
}
@media (min-width: 861px) { .signals-expand-btn { display: none; } }