:root {
  --bg: #fcfcfb;
  --surface: #ffffff;
  --ink: #1c1c1a;
  --ink-2: #4a4a46;
  --ink-3: #75756f;
  --line: #e2e1dc;
  --land: #f1f0ec;
  --land-line: #c9c7c0;
  --land-line-strong: #a3a097;
  --mid: #d2cfc8;
  --yes: #1ba3a0;
  --no: #a8235f;
  --focus: #2457c5;
  --halo: rgba(252, 252, 251, 0.92);
  --bar-bg: #2b3d4f;
  --bar-ink: #ffffff;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1a19;
    --surface: #222220;
    --ink: #eeede8;
    --ink-2: #c2c1bb;
    --ink-3: #93928c;
    --line: #3a3a37;
    --land: #262624;
    --land-line: #4a4a46;
    --land-line-strong: #6b6b66;
    --mid: #5e5d59;
    --yes: #26a6a2;
    --no: #b8326c;
    --focus: #7ea6ff;
    --halo: rgba(26, 26, 25, 0.9);
    --bar-bg: #24323f;
    --bar-ink: #f4f6f8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1a19;
  --surface: #222220;
  --ink: #eeede8;
  --ink-2: #c2c1bb;
  --ink-3: #93928c;
  --line: #3a3a37;
  --land: #262624;
  --land-line: #4a4a46;
  --land-line-strong: #6b6b66;
  --mid: #5e5d59;
  --yes: #26a6a2;
  --no: #b8326c;
  --focus: #7ea6ff;
  --halo: rgba(26, 26, 25, 0.9);
  --bar-bg: #24323f;
  --bar-ink: #f4f6f8;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--focus); }

.site-header, .app, .table-section, .site-footer {
  max-width: 1440px;
  margin: 0 auto;
  padding-block: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.site-header { padding-top: 20px; }
.site-header h1 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}
.site-header .updated {
  margin: 4px 0 24px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.lede { color: var(--ink-2); max-width: 70ch; margin: 0 0 14px; }

/* Page grid: questions | map | details. The two outer columns share the leftover space
   equally, so the map stays centred on the page. */
.app {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(300px, 1fr);
  gap: 32px;
  align-items: start;
}

/* Question picker */
.questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 2px;
  width: 240px;
  justify-self: end;
}
.qbtn {
  text-align: left;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qbtn:hover { border-color: var(--ink-3); }
.qbtn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.qbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.qbtn .qnum { font-weight: 700; font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.04em; }
.qbtn .qshort { flex: 1; }
.minibar { display: flex; height: 6px; gap: 2px; }
.minibar span { border-radius: 3px; }
.minibar .y { background: var(--yes); }
.minibar .n { background: var(--no); }
.minilabel { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.qbtn .qchip { display: none; }

/* Tablets and phones: the question cards become a narrow column of chips on the left.
   The selected chip opens up to show the question's summary and result under its name. */
@media (max-width: 1180px) {
  .app { grid-template-columns: 160px minmax(0, 1fr); gap: 16px; }
  .questions {
    width: 160px;
    justify-self: start;
    gap: 6px;
  }
  .qbtn {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    gap: 6px;
  }
  .qbtn > :not(.qchip) { display: none; }
  .qbtn .qchip { display: block; text-align: center; }
  .qbtn[aria-pressed="true"] { border-radius: 12px; padding: 8px 10px 10px; }
  .qbtn[aria-pressed="true"] .qchip { font-weight: 700; text-align: left; order: -1; }
  .qbtn[aria-pressed="true"] .qshort,
  .qbtn[aria-pressed="true"] .minibar,
  .qbtn[aria-pressed="true"] .minilabel { display: flex; }
  .qbtn[aria-pressed="true"] .qshort { display: block; font-size: 0.76rem; color: var(--ink-2); }
}
@media (max-width: 560px) {
  .app { grid-template-columns: 116px minmax(0, 1fr); gap: 10px; }
  .questions { width: 116px; }
  .qbtn { font-size: 0.74rem; padding: 5px 8px; }
  .qbtn[aria-pressed="true"] { padding: 7px 8px 8px; }
  .qbtn[aria-pressed="true"] .qshort { font-size: 0.7rem; }
  .qbtn[aria-pressed="true"] .minilabel { flex-direction: column; font-size: 0.68rem; }
  /* The two button groups stack, each the full width of the map column. */
  .segmented { width: 100%; }
  .segmented button { flex: 1 1 auto; font-size: 0.76rem; padding: 5px 4px; line-height: 1.2; }
  .check { font-size: 0.78rem; }
}

/* Main layout: on wide screens the map and details join the page grid directly. */
.layout { display: contents; }
.layout > .side { justify-self: start; width: 100%; max-width: 420px; }

/* Map type and map area buttons side by side, centred over the map. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
/* The "Overlap circles" box sits right beside the Circles / Land buttons it belongs to.
   The label is stacked on two short lines so it takes little width. */
.check-text { line-height: 1.15; text-align: left; }
.view-group { display: flex; align-items: center; gap: 8px; }
.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
  background: var(--surface);
}
.segmented button {
  font: inherit;
  font-size: 0.88rem;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.segmented button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.segmented button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.check { font-size: 0.82rem; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.check:has(input:disabled) { opacity: 0.45; cursor: default; }

.map-wrap { position: relative; }
/* Fit the whole province in the window: height drives width via the viewBox aspect ratio. */
#map {
  display: block;
  /* Fills the window, but never taller than 880px: the cap is in page units, so when you zoom
     out the map shrinks along with the text instead of growing to keep filling the window. */
  height: clamp(420px, calc(100vh - 265px), 880px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  touch-action: manipulation;
}
@media (max-width: 820px) {
  #map { width: 100%; height: auto; }
  .toolbar { flex-wrap: wrap; }
  .layout > .map-panel { justify-self: stretch; }
}
#map .riding { fill: var(--land); stroke: var(--land-line); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
/* Circle views: slightly darker riding borders so the ridings read under the circles. */
#map.circle-view .riding { stroke: var(--land-line-strong); }
/* City maps: a dark ring around the city as a whole (drawn by the #cityOutline filter). */
#map .city-outline { pointer-events: none; }
#map .city-outline-colour { flood-color: var(--ink); flood-opacity: 0.75; }
#map .riding.hl { stroke: var(--ink); stroke-width: 1.6; }
#map .bubble { stroke: var(--bg); stroke-width: 1.2; cursor: pointer; }
#map .bubble.hl { stroke: var(--ink); stroke-width: 2; }
#map .city-label {
  font-size: 18px;
  font-weight: 700;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--halo);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}
#map .town-label { font-size: 11px; font-weight: 600; fill: var(--ink-2); }
.map-note { font-size: 0.82rem; color: var(--ink-3); margin: 6px 0 0; }

.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  min-width: 200px;
  z-index: 2;
}
.tooltip .tt-name { font-weight: 700; margin-bottom: 4px; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.tooltip .tt-row.win { font-weight: 700; }
.tooltip .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.tooltip .tt-muted { color: var(--ink-3); font-size: 0.78rem; margin-top: 4px; }

/* Side panel */
.side h2 { font-size: 1.15rem; margin: 0 0 6px; line-height: 1.3; }
.qtext { color: var(--ink-2); font-size: 0.9rem; margin: 0 0 16px; }

.totals { margin-bottom: 16px; }
.bigbar { display: flex; height: 14px; gap: 2px; margin: 6px 0; }
.bigbar span { border-radius: 4px; }
.bigbar .y { background: var(--yes); }
.bigbar .n { background: var(--no); }
.totals-row { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; gap: 12px; }
.totals-row .pct { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.totals-row .lbl { font-size: 0.85rem; color: var(--ink-2); }
.totals-row .cnt { font-size: 0.85rem; color: var(--ink-3); }
.totals-row > div:last-child { text-align: right; }
.sw-inline { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }

/* The selected question and its overall result, boxed like the legend below it. */
.result-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px 14px 14px;
  margin-bottom: 18px;
}
.result-card .totals { margin-bottom: 0; }

.legend {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 14px 12px;
}
.legend-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.legend h3 { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; }
.legend .legend-title + h3 { margin-top: 6px; }
.legend-ramp { height: 10px; border-radius: 5px; max-width: 260px; }
.legend-ticks { display: flex; justify-content: space-between; max-width: 260px; font-size: 0.75rem; color: var(--ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
#sizeLegend { display: block; overflow: visible; }
#sizeLegend circle { fill: none; stroke: var(--ink-3); }
#sizeLegend text { font-size: 11px; fill: var(--ink-3); }

/* Table */
.table-section { margin-top: 28px; }
details summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { font-weight: 600; color: var(--ink-2); cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--ink); }
.num { text-align: right; }

.site-footer { color: var(--ink-3); font-size: 0.82rem; padding-top: 20px; padding-bottom: 40px; }
.site-footer p { margin: 6px 0; }
.site-footer #sourceLine { padding-top: 12px; border-top: 1px solid var(--line); }
/* Full-width credit bar at the very bottom of the page. */
.credit-bar {
  background: var(--bar-bg);
  color: var(--bar-ink);
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  padding-block: 18px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.credit-bar p { margin: 0; }
.credit-bar a { color: inherit; text-decoration: none; }
.credit-bar a:hover { text-decoration: underline; }
.credit-bar a:focus-visible { outline: 2px solid var(--bar-ink); outline-offset: 2px; }
.credit-bar .heart { color: #e53935; margin: 0 2px; }
/* Let the map alone set the map column's width; the toolbar and caption wrap to fit it. */
.map-panel > .map-foot { width: 0; min-width: 100%; text-align: center; margin-top: 8px; }
.map-foot .map-note { margin-top: 4px; }
.layout > .map-panel { justify-self: center; }

/* One centred block holds the columns, table and footer, so the table and footer
   line up with the outer edges of the question list and results panel. */
.page { width: fit-content; max-width: 100%; margin-inline: auto; }
.page > .app, .page > .table-section, .page > .site-footer { max-width: none; }
.page > .table-section, .page > .site-footer { width: 0; min-width: 100%; }

/* Tablets: the map fills the window below the title and map buttons. */
@media (min-width: 821px) and (max-width: 1180px) {
  #map { height: clamp(420px, calc(100vh - 200px), 880px); }
}


/* Tablets and phones: the chips sit beside the map and scroll with the page (no scroll box of
   their own), and the question details run full width underneath both. */
@media (max-width: 1180px) {
  .app > .questions { position: static; max-height: none; overflow: visible; }
  .layout { display: contents; }
  .layout > .map-panel { grid-column: 2; }
  .layout > .side { grid-column: 1 / -1; justify-self: stretch; max-width: none; }
}
@media (max-width: 560px) {
  .layout > .map-panel { justify-self: stretch; min-width: 0; }
}

.nowrap { white-space: nowrap; }

@media (max-width: 560px) {
  .segmented button { white-space: nowrap; }
}


/* Tablets and phones: each question chip is tinted by its outcome (set from app.js as --tint).
   The selected chip gets a lighter tint (also from app.js) so its details stay easy to read. */
@media (max-width: 1180px) {
  .qbtn, .qbtn[aria-pressed="true"] { background: var(--tint, var(--surface)); }
}

/* Question cards and expanded chips: bold the side that's ahead. */
.qbtn .minilabel .win { font-weight: 700; color: var(--ink); }

/* Phones (iPhone Pro Max width, 440px, and narrower): the map buttons run in one row across the top, and
   the caption runs full width beneath the chips and the map. The map panel's pieces join the
   page grid so they can span both columns. */
@media (max-width: 440px) {
  .app { row-gap: 8px; }
  .layout > .map-panel { display: contents; }
  .map-panel > .toolbar { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; gap: 6px; }
  /* Both groups share one row; on the very narrowest phones they wrap to a row each. */
  .toolbar > * { flex: 1 1 auto; }
  .toolbar > .segmented { width: auto; }
  .view-group { gap: 6px; }
  .view-group .check { font-size: 0.72rem; gap: 4px; }
  .toolbar .segmented button { padding-inline: 3px; }
  .app > .questions { grid-column: 1; grid-row: 2; }
  .map-panel > .map-wrap { grid-column: 2; grid-row: 2; min-width: 0; }
  .map-panel > .map-foot { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
  .layout > .side { grid-row: 4; margin-top: 16px; }
}

/* Wide screens: three columns that share one top edge (the map buttons) and one bottom edge
   (the map). The map panel's pieces join the page grid as rows: buttons, map, caption.
     - The question cards (two columns, Q1-Q5 then Q6-Q10) stretch to fill the buttons + map rows.
     - The results panel starts on the same top edge, with the legend stacked under it.
     - The caption hangs under the map only.
   An empty lead column balances the question area (--q) against the results panel (--side),
   so the map stays centred on the page and the table and footer start at the question cards. */
@media (min-width: 1181px) {
  .page {
    --q: 360px;
    --side: clamp(300px, 28vw, 420px);
    --lead: max(0px, calc(var(--side) - var(--q) - 32px));
  }
  .app {
    grid-template-columns: var(--lead) var(--q) auto var(--side);
    /* If the question cards outgrow the map (short windows), the map row takes the extra
       height, not the button row. */
    grid-template-rows: auto 1fr auto;
    column-gap: 32px;
    row-gap: 0;
  }
  .layout > .map-panel { display: contents; }
  .map-panel > .toolbar { grid-column: 3; grid-row: 1; }
  .map-panel > .map-wrap { grid-column: 3; grid-row: 2; }
  .map-panel > .map-foot { grid-column: 3; grid-row: 3; }
  /* The window sets the map's height. The floor keeps it about as tall as the question cards,
     so on short windows the page scrolls a little rather than the columns ending unevenly. */
  #map { height: clamp(640px, calc(100vh - 200px), 880px); }

  .app > .questions {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Fill down each column: Q1-Q5, then Q6-Q10. Auto rows share out any spare height. */
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 8px;
    width: var(--q);
    padding: 0;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .qbtn { font-size: 0.8rem; }

  .layout > .side {
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: none;
  }
  .result-card { margin-bottom: 0; }

  .page > .table-section, .page > .site-footer {
    margin-left: calc(var(--lead) + 32px);
    min-width: calc(100% - var(--lead) - 32px);
  }
}
/* Narrower desktops: slimmer question cards and buttons keep the map buttons on one row. */
@media (min-width: 1181px) and (max-width: 1400px) {
  .page { --side: 300px; }
  .app { column-gap: 24px; }
  .segmented button { padding: 6px 9px; font-size: 0.84rem; }
}

/* Wide screens: the question cards and the results panel sit on the map's row, so their tops
   line up with the top of the map rather than the top of the map buttons. */
@media (min-width: 1181px) {
  .app > .questions, .layout > .side { grid-row: 2 / 3; }
  /* The caption sits under the map's column but its text reaches out to either side, centred on
     the map and as wide as it can be while staying centred (app.js measures --cap-half). */
  .map-panel > .map-foot { grid-column: 3; }
  /* The map buttons span the top of all three columns, so they have room for one row. */
  .map-panel > .toolbar { grid-column: 1 / -1; justify-self: center; }
  .map-foot .map-note {
    width: calc(2 * var(--cap-half, 50%));
    margin-left: calc(50% - var(--cap-half, 50%));
  }
  /* The map is at least as tall as the question cards (app.js measures them into --map-min),
     so the cards never run past the bottom of the map. */
  #map { height: max(var(--map-min, 0px), clamp(640px, calc(100vh - 200px), 880px)); }
}

/* Tablets: the question chips/cards start level with the top of the map, below the map buttons.
   app.js measures the buttons' height into --map-offset. (Phones and wide screens get the same
   effect from their own grid layouts above.) */
@media (min-width: 441px) and (max-width: 1180px) {
  .app > .questions { margin-top: var(--map-offset, 0px); }
}
/* Tablets: the caption's text runs the full page width, under the chips and the map, like on
   phones. Its box stays the map's width (so the map doesn't grow); only the text reaches out,
   using the measurements app.js puts in --foot-shift / --foot-width / --foot-drop. */
@media (min-width: 441px) and (max-width: 1180px) {
  .map-foot .map-note {
    width: var(--foot-width, auto);
    margin-left: calc(-1 * var(--foot-shift, 0px));
  }
  .map-panel > .map-foot { margin-top: calc(8px + var(--foot-drop, 0px)); }
}

/* Map type buttons: full labels ("Circles by Votes" / "Shaded Ridings") normally, short ones
   ("Circles" / "Ridings") on phones where the map buttons share one row. */
.segmented .lbl-short { display: none; }
@media (max-width: 440px) {
  .segmented .lbl-long { display: none; }
  .segmented .lbl-short { display: inline; }
}