/* ES Footprint page — the same dark trading surface as ES CVD; every colour is a token so the
   canvas reads them through getComputedStyle and follows the app theme. */
:root { --fp-bg:#0e1116; --fp-card:#161b22; --fp-border:#2d333b; --fp-text:#e6edf3; --fp-muted:#8b949e;
  --fp-buy:#3fb950; --fp-sell:#f85149; --fp-warn:#d29922; --fp-accent:#58a6ff;
  --fp-va:rgba(88,166,255,.10); --fp-poc:#f0c674; --fp-band:rgba(240,198,116,.35); --fp-grid:#1f252d; }
body.es-footprint { background:var(--fp-bg); color:var(--fp-text); font:14px/1.45 -apple-system,Segoe UI,sans-serif; margin:0; }
.fp-wrap { max-width:1400px; margin:0 auto; padding:12px 16px 32px; }
.fp-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:8px 0 14px; }
.fp-head h1 { font-size:16px; margin:0; font-weight:600; }
.fp-price { font:600 20px/1 ui-monospace,Menlo,monospace; }
.fp-badge { font-size:11px; padding:2px 10px; border-radius:999px; border:1px solid var(--fp-border); }
.fp-badge.good { color:var(--fp-buy); border-color:var(--fp-buy); }
.fp-badge.stale { color:var(--fp-warn); border-color:var(--fp-warn); }
.fp-badge.down { color:var(--fp-sell); border-color:var(--fp-sell); }
.fp-banner { background:var(--fp-card); border:1px solid var(--fp-warn); color:var(--fp-warn); border-radius:8px;
  padding:6px 12px; margin-bottom:12px; font-size:12px; }
.fp-panel { background:var(--fp-card); border:1px solid var(--fp-border); border-radius:10px; padding:10px 12px; margin-bottom:14px; }
.fp-panel h2 { font-size:13px; margin:0 0 8px; font-weight:600; }
.fp-tfs { display:inline-flex; gap:6px; margin-left:10px; }
.fp-tfs button { background:transparent; color:var(--fp-muted); border:1px solid var(--fp-border);
  border-radius:6px; padding:2px 9px; font-size:11px; cursor:pointer; }
.fp-tfs button.on { color:var(--fp-text); border-color:var(--fp-accent); }
.fp-chart-wrap { position:relative; }
.fp-tooltip { position:absolute; z-index:5; max-width:520px; max-height:420px; overflow:auto; background:#0b0e12;
  border:1px solid var(--fp-border); border-radius:8px; padding:8px 10px; font:11px/1.4 ui-monospace,Menlo,monospace;
  color:var(--fp-text); white-space:pre; pointer-events:none; }
.fp-legend { display:flex; gap:16px; font-size:11px; color:var(--fp-muted); margin-top:6px; flex-wrap:wrap; }
.fp-legend i { display:inline-block; width:14px; height:8px; vertical-align:middle; margin-right:5px; border:1px solid var(--fp-border); }
.fp-legend i.poc { border-color:var(--fp-poc); } .fp-legend i.va { background:var(--fp-va); }
.fp-legend i.buy { background:rgba(63,185,80,.35); } .fp-legend i.sell { background:rgba(248,81,73,.35); }
.fp-strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(120px,1fr); gap:6px; overflow-x:auto; }
.fp-cell { border:1px solid var(--fp-border); border-radius:6px; padding:5px 6px; font:11px/1.35 ui-monospace,Menlo,monospace; cursor:default; }
.fp-cell .k { color:var(--fp-muted); }
.fp-cell .BUYERS { color:var(--fp-buy); } .fp-cell .SELLERS { color:var(--fp-sell); }
.fp-cell .UNREADABLE, .fp-cell .NONE, .fp-cell .BALANCED { color:var(--fp-muted); }
.fp-cell .tabs { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.fp-cell .tabs span { border:1px solid var(--fp-border); border-radius:999px; padding:0 6px; color:var(--fp-muted); }
.fp-cell .tabs span:hover { color:var(--fp-text); border-color:var(--fp-accent); }
.fp-foot { font-size:11px; color:var(--fp-muted); margin-top:4px; }