/* Tokens taken from Josh's SBX Connect dashboard screenshot. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');
:root {
  --bg: #f2f3f7;
  --card: #ffffff;
  --ink: #1c1e24;
  --ink-2: #4b505c;
  --ink-3: #8a8f9b;
  --line: #e4e6ee;
  --navy: #4a5799;
  --navy-ink: #3c4884;
  --seg-on: #dde0f1;
  /* Heat scale, best to worst, matching the dashboard's green / peach / orange */
  --h5: #cfe8c6; --h5i: #2e6427;
  --h4: #e3f1dc; --h4i: #3d6e37;
  --h3: #faedd3; --h3i: #7a5a1c;
  --h2: #f7d9ad; --h2i: #85521a;
  --h1: #f3c288; --h1i: #8a4a10;
  --radius: 10px;
  --font: 'Barlow', 'DIN Next', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; }
.num { font-variant-numeric: tabular-nums; }

/* Segmented control, as in the dashboard's All / AM / PM / Night */
.seg { display: flex; background: #fff; border-radius: 6px; padding: 4px; gap: 4px; box-shadow: 0 0 0 1px var(--line); }
.seg button { flex: 1; border: 0; background: transparent; font: inherit; color: var(--ink-2); padding: 7px 14px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.seg button:hover { background: #f4f5fa; }
.seg button.on { background: var(--seg-on); color: var(--navy-ink); font-weight: 600; }

.btn { background: var(--navy); color: #fff; border: 0; border-radius: 4px; padding: 9px 18px; font: inherit; font-weight: 500; cursor: pointer; }
.btn:hover { background: var(--navy-ink); }
.btn.ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px #c9cde3; }

.h5 { background: var(--h5); color: var(--h5i); } .h4 { background: var(--h4); color: var(--h4i); }
.h3 { background: var(--h3); color: var(--h3i); } .h2 { background: var(--h2); color: var(--h2i); }
.h1 { background: var(--h1); color: var(--h1i); }
.band { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.band.above { background: var(--h4); color: var(--h5i); } .band.inline { background: #eceef4; color: var(--ink-2); }
.band.below { background: var(--h2); color: var(--h1i); } .band.ns { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.band::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; }