:root {
  --dem: #2166ac; --rep: #b2182b; --other: #c2c7cf;
  --ink: #1a1a1a; --muted: #6b7280; --line: #e5e7eb; --bg: #fafafa;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 0 60px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--bg);
}
header { padding: 28px 32px 8px; }
h1 { margin: 0 0 6px; font-size: 24px; }
h2 { font-size: 18px; }
.byline { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.byline a, .note a { color: var(--dem); text-decoration: none; font-weight: 600; }
.byline a:hover, .note a:hover { text-decoration: underline; }
.note { max-width: 900px; color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.sub { max-width: 900px; color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }
section { padding: 18px 32px; border-top: 1px solid var(--line); margin-top: 18px; }
.controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
label { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
select {
  font-size: 14px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink);
}
.chart { width: 100%; overflow: visible; }
svg { font-family: inherit; }
.axis text { fill: var(--muted); font-size: 11px; }
.axis path, .axis line { stroke: #d8dce3; }
.grid line { stroke: #eceef2; }
.grid path { display: none; }
.dot { cursor: pointer; stroke: #fff; stroke-width: 1.2px; transition: r .12s; }
.dot:hover { stroke: #111; stroke-width: 2px; }
.dot.selected { stroke: #111; stroke-width: 2.5px; }
.dot-label { font-size: 10px; fill: #444; pointer-events: none; }
.bar-label { font-size: 11px; fill: var(--ink); }
.center-label { font-size: 11px; fill: var(--ink); text-anchor: middle; }
.panel-title { font-size: 12px; font-weight: 600; fill: var(--muted); }
.tooltip {
  position: fixed; pointer-events: none; background: #111; color: #fff;
  padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.45;
  max-width: 300px; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 10;
}
.tooltip b { font-size: 13px; }
.legend { font-size: 12px; fill: var(--muted); }
.legend-swatch { stroke: #fff; stroke-width: 1px; }
.filter-actions { display: flex; gap: 8px; margin: 4px 0; }
.filter-actions button {
  font-size: 12px; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer;
}
.filter-actions button:hover { background: #f0f1f3; }
.company-filter {
  display: flex; flex-wrap: wrap; gap: 4px 16px; max-height: 124px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 4px 0 14px; background: #fff;
}
.cf-item { font-size: 12px; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.cf-item input { cursor: pointer; }