/* Sits inside Missive's sidebar, so it follows the host's light/dark theme
   and stays visually quiet rather than competing with the app chrome. */

:root {
  /* Without this the page canvas stays white while the variables below switch
     to their dark values, which renders the panel as pale-grey-on-white. */
  color-scheme: light dark;
  --fg: #1c1d21;
  --muted: #6b7280;
  --line: #e4e6ea;
  --accent: #0b6bcb;
  --warn-bg: #fdf3d8;
  --warn-fg: #7a5a00;
  --bad-bg: #fde8e8;
  --bad-fg: #a12222;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e8eaed;
    --muted: #9aa0a6;
    --line: #33363b;
    --accent: #6fb2ff;
    --warn-bg: #3d3417;
    --warn-fg: #f0d78a;
    --bad-bg: #40201f;
    --bad-fg: #ff9d9d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px 14px 20px;
  /* Canvas follows color-scheme, so this matches Missive's sidebar in both
     themes instead of forcing a colour that clashes with one of them. */
  background: Canvas;
  color: var(--fg);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 16px; margin: 0 0 2px; font-weight: 650; }
h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 0 0 6px;
  font-weight: 600;
}

.sub { color: var(--muted); font-size: 12px; word-break: break-word; }
.muted { color: var(--muted); }
.err { color: var(--bad-fg); }

.head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.badges { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; }

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge.bad { background: var(--bad-bg); color: var(--bad-fg); }
.badge.muted { background: var(--line); color: var(--muted); }

.btn {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 11px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--accent); color: #fff; }

section { margin-top: 16px; }

.count {
  display: inline-block;
  background: var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 0 5px;
  font-size: 10px;
}

ul.rosters { list-style: none; margin: 0; padding: 0; }
ul.rosters li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
ul.rosters li:last-child { border-bottom: 0; }
ul.rosters .team { min-width: 0; overflow-wrap: anywhere; }
ul.rosters .meta { color: var(--muted); font-size: 11px; white-space: nowrap; flex: none; }
ul.rosters.past .team { color: var(--muted); }

.foot {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
code { font-size: 11px; }