:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1b1f24;
  --muted: #5d6673;
  --border: #dde1e6;
  --head: #eef1f4;
  --hover: #f0f5fb;
  --accent: #245b8f;
  --pos: #1a7f45;
  --neg: #b3261e;
  --warn-bg: #fff4d6;
  --warn-text: #6b4c00;
  --stale: #8a929c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --surface: #171b20;
    --text: #e3e6ea;
    --muted: #98a1ad;
    --border: #2c323a;
    --head: #1f242b;
    --hover: #1c2632;
    --accent: #7fb3e6;
    --pos: #5cc98a;
    --neg: #f08a80;
    --warn-bg: #3a2f10;
    --warn-text: #f2d48a;
    --stale: #6f7782;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 2rem;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}
h1 { font-size: 1.45rem; margin: 0; letter-spacing: -0.01em; }
.sub { margin: .2rem 0 0; color: var(--muted); }
.updated {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .85rem;
}
.updated .label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.updated strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.warning {
  background: var(--warn-bg);
  color: var(--warn-text);
  border-radius: 8px;
  padding: .6rem .9rem;
  margin-bottom: 1rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem .9rem;
  margin-bottom: .8rem;
}
.filters label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--muted); }
.filters .search { flex: 1 1 16rem; max-width: 24rem; }
.filters input, .filters select, .filters button {
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .38rem .55rem;
  min-height: 2.1rem;
}
.filters button { cursor: pointer; }
.filters button:hover { border-color: var(--accent); }
.count { margin: 0 0 .45rem auto; color: var(--muted); font-variant-numeric: tabular-nums; }

.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 3rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td {
  padding: .42rem .6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--head);
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}
thead th button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  gap: .25rem;
  align-items: center;
}
thead th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
thead th .arrow { width: .7em; opacity: .35; }
thead th[aria-sort] { color: var(--text); }
thead th[aria-sort] .arrow { opacity: 1; }
thead th.num button { flex-direction: row-reverse; }

/* Sticky ticker column. */
th:first-child, td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
thead th:first-child { z-index: 3; background: var(--head); }

tbody tr:hover td { background: var(--hover); }
td a { color: var(--accent); text-decoration: none; font-weight: 600; }
td a:hover { text-decoration: underline; }
td.name { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; }
td.name .cls { color: var(--muted); font-size: .8rem; }
td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
td.hi { font-weight: 600; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.na { color: var(--muted); }

tr.stale td, tr.missing td { color: var(--stale); }
tr.stale td a, tr.missing td a { color: var(--stale); }
.badge {
  display: inline-block;
  font-size: .7rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin-left: .35rem;
  vertical-align: 1px;
}
td.empty { padding: 2rem; text-align: center; color: var(--muted); }

.notes { margin-top: 1rem; color: var(--muted); font-size: .8rem; max-width: 60rem; }
.notes p { margin: .3rem 0; }