:root {
  --paper:      #F7F6F2;
  --panel-bg:   #FCFBF8;
  --ink:        #18243C;
  --slate:      #51596B;
  --hairline:   #E2DFD5;
  --brass:      #A07E3B;
  --brass-soft: #F0E9DA;
  --navy:       #1B2A4A;
  --new:        #B4540A; --new-bg:  #FBEFE3;
  --ack:        #1F5FA8; --ack-bg:  #E7F0FA;
  --prog:       #7A5EA8; --prog-bg: #F0EBF8;
  --done:       #2E7D4F; --done-bg: #E6F3EB;
  --teams:      #5B5FC7;
  --shadow:     0 1px 2px rgba(24,36,60,.06), 0 8px 24px rgba(24,36,60,.08);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Public Sans', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* status chips */
.status-chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 20px; white-space: nowrap;
}
.s-new  { background: var(--new-bg);  color: var(--new);  }
.s-ack  { background: var(--ack-bg);  color: var(--ack);  }
.s-prog { background: var(--prog-bg); color: var(--prog); }
.s-done { background: var(--done-bg); color: var(--done); }

/* connection indicator */
.conn-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #9AA3B5; margin-right: 5px; transition: background .3s;
}
.conn-dot.live { background: var(--done); box-shadow: 0 0 0 3px var(--done-bg); }
.conn-dot.err  { background: var(--new); }