:root {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);
  --never:          #e34948;
  --neutral:        #898781;
  --always:         #2a78d6;
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100;
  --cat-5: #e87ba4; --cat-6: #008300; --cat-7: #4a3aa7; --cat-8: #e34948;
  --party-liberal:       #d71920;
  --party-conservative:  #003F72;
  --party-ndp:           #d8690a;
  --party-social-credit: #189a18;
  --party-labour:        #ff401e;
  --party-bloc-quebecois:#2b96ab;
  --party-bloc-populaire:#b17c7c;
  --party-reform:        #349c63;
  --party-green:         #3D9B35;
  --party-other:         #898781;
  --party-undecided:     #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);
    --never:          #e66767;
    --neutral:        #898781;
    --always:         #3987e5;
    --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500;
    --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-8: #e66767;
    --party-liberal:       #d71920;
    --party-conservative:  #0072ce;
    --party-ndp:           #F58220;
    --party-social-credit: #90EE90;
    --party-labour:        #FF6347;
    --party-bloc-quebecois:#33B2CC;
    --party-bloc-populaire:#BC8F8F;
    --party-reform:        #3CB371;
    --party-green:         #3D9B35;
    --party-other:         #898781;
    --party-undecided:     #ffffff;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 280px;
  flex: none;
  padding: 20px 18px;
  border-right: 1px solid var(--border);
  background: var(--surface-1);
}
.sidebar h1 { font-size: 16px; margin: 0 0 4px; }
.sidebar .sub { font-size: 12px; color: var(--text-secondary); margin: 0 0 20px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
select {
  width: 100%;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--page);
  color: var(--text-primary);
  font-size: 13px;
}
.year-slider {
  position: relative;
  height: 24px;
  margin: 6px 0 2px;
}
.year-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--gridline);
}
.year-slider-range {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--always);
}
.year-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.year-slider input[type="range"]:focus { outline: none; }
.year-slider input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
}
.year-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--always);
  border: 2px solid var(--surface-1);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}
.year-slider input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
}
.year-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--always);
  border: 2px solid var(--surface-1);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}
.year-slider input#year-min { z-index: 3; }
.year-slider input#year-max { z-index: 4; }
.year-slider input.active-thumb { z-index: 5; }
#year-range-label { font-weight: 400; color: var(--text-muted); }
#party-checks {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--page);
}
.party-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 2px 0;
  cursor: pointer;
}
.party-check input:disabled + span { color: var(--text-muted); }
#party-count { font-weight: 400; color: var(--text-muted); }
.main { flex: 1; padding: 24px 32px 60px; min-width: 0; }
#status { font-size: 13px; color: var(--text-secondary); }
#status.error { color: var(--never); }
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 20px 8px;
  overflow-x: auto;
  display: none;
}
.card h2 { font-size: 17px; margin: 0 0 4px; }
.card .wording { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.card .flag {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--gridline);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 8px 0 12px;
}
#chart svg { display: block; }
#chart text { fill: var(--text-secondary); }