/* styles.css | frontend-001 styles_001 | 2026-07-24 */
/* Initial version: dark theme (#0c1119) header + full-height chart layout. */

:root {
  --bg: #0c1119;
  --panel: #121a26;
  --line: #22304233;
  --border: #223042;
  --text: #d5dde8;
  --muted: #8b98ab;
  --up: #17b0a0;
  --dn: #f23f62;
  --div: #ff9f1a;
  --amber: #e8b339;
  --blue: #6aa5f8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

body { display: flex; flex-direction: column; }

/* ---------- header ---------- */

#topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 6px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  user-select: none;
}

.hgroup { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.chip {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .4px;
}

/* WS status badge — class st-* set by app.js */
.badge {
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #0c1119;
}
.badge.st-connecting   { background: var(--amber); }
.badge.st-snapshot     { background: var(--blue); }
.badge.st-live         { background: var(--up); }
.badge.st-reconnecting { background: var(--dn); color: #fff; }
.badge.st-stalled      { background: var(--dn); color: #fff; }

/* $3 / $10 segmented toggle */
.seg { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; gap: 0; }
.szbtn {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 3px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.szbtn:hover { color: var(--text); }
.szbtn.active { background: #21314a; color: #fff; }

/* counters */
.counters { color: var(--muted); font-size: 12px; }
.counters b { color: var(--text); font-variant-numeric: tabular-nums; }
.counters .up, .counters .up b { color: var(--up); }
.counters .dn, .counters .dn b { color: var(--dn); }
.counters .dv, .counters .dv b { color: var(--div); }

/* readout */
.readout { color: var(--muted); font-size: 12px; }
.readout b { color: var(--text); font-variant-numeric: tabular-nums; }
.readout b.pos { color: var(--up); }
.readout b.neg { color: var(--dn); }

.ribbadge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}
.ribbadge.long { background: #123f3a; color: var(--up); }
.ribbadge.short { background: #46141f; color: var(--dn); }
.ribbadge.flat { background: #232c39; color: var(--muted); }

/* toggles */
.toggles { margin-left: auto; color: var(--muted); font-size: 12px; }
.toggles label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.toggles input { accent-color: var(--up); cursor: pointer; }

/* ---------- chart ---------- */

#chart { flex: 1 1 auto; min-height: 0; }