:root {
  --bg: #fcfcfb;
  --surface: #ffffff;
  --ink: #1c1c1a;
  --ink-2: #4a4a46;
  --ink-3: #75756f;
  --line: #e2e1dc;
  --land: #f1f0ec;
  --land-line: #c9c7c0;
  --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;
    --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;
  --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;
}
@media (max-width: 1180px) {
  .app { grid-template-columns: 240px minmax(0, 1fr); }
}

/* 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: 1024px) {
  .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; }
  .segmented { max-width: 100%; }
  .segmented button { flex: 1 1 0; font-size: 0.78rem; padding: 5px 6px; 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; }
@media (max-width: 1180px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    justify-items: center;
  }
  .layout > .side { justify-self: stretch; max-width: none; }
}

/* Map type buttons, with the spread checkbox tucked underneath; both centred. */
.toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 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.88rem; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.check[hidden] { display: none; }

.map-wrap { position: relative; }
/* Fit the whole province in the window: height drives width via the viewBox aspect ratio. */
#map {
  display: block;
  height: max(420px, calc(100vh - 250px));
  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; }
#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 .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; }
/* Three-column view: the question list matches the map height. */
@media (min-width: 1181px) {
  .layout > .side { align-self: stretch; display: flex; flex-direction: column; }
  /* The question list matches the map's height and scrolls inside, so the map sets the row height. */
  .app > .questions {
    position: static;
    align-self: stretch;
    height: 0;
    min-height: 100%;
    max-height: none;
  }
}
.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-note { width: 0; min-width: 100%; text-align: center; }
.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: leave room for the question chips above the map. */
@media (min-width: 821px) and (max-width: 1024px) {
  #map { height: max(420px, calc(100vh - 320px)); }
}

/* Wide screens: an empty lead column balances the narrower question list against the
   results panel, so the map stays centred on the page while the table and footer start
   at the question list's left edge instead of the page's. */
@media (min-width: 1181px) {
  .page {
    --side: clamp(300px, 28vw, 420px);
    --lead: max(0px, calc(var(--side) - 240px - 32px));
  }
  .app { grid-template-columns: var(--lead) 240px auto var(--side); }
  .app > .questions { grid-column: 2; }
  .layout > .map-panel { grid-column: 3; }
  .layout > .side { grid-column: 4; max-width: none; }
  .page > .table-section, .page > .site-footer {
    margin-left: calc(var(--lead) + 32px);
    min-width: calc(100% - var(--lead) - 32px);
  }
}

.site-header .intro {
  margin: 8px auto 0;
  max-width: 62ch;
  text-align: center;
  color: var(--ink-2);
  text-wrap: balance;
}

/* 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: 1024px) {
  .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; }

/* Map type buttons: full labels normally, one word each on phones. */
.segmented .lbl-short { display: none; }
@media (max-width: 560px) {
  .segmented .lbl-long { display: none; }
  .segmented .lbl-short { display: inline; }
  .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: 1024px) {
  .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 (Pixel 10 width and narrower): the caption under the map runs full width beneath the
   chips and the map. The map panel's pieces join the page grid so the caption can span both. */
@media (max-width: 412px) {
  .app { row-gap: 8px; }
  .layout > .map-panel { display: contents; }
  .app > .questions { grid-column: 1; grid-row: 1 / span 2; }
  .map-panel > .toolbar { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .map-panel > .map-wrap { grid-column: 2; grid-row: 2; min-width: 0; }
  .map-panel > .map-note { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
  .layout > .side { grid-row: 4; margin-top: 16px; }
}