: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; } /* Tom Select progressively enhances #domain-select / #question-select (see app.js's populateDomainPicker()/populateQuestionPicker()) into a type-to-search combobox -- index.html loads Tom Select's own default stylesheet (dist/css/tom-select.css) for the actual layout/behavior (single-select item-vs-input toggling, dropdown positioning, etc; a hand-rolled reconstruction of that here previously broke typing/updating entirely -- don't redo that, override colors only). These rules just repaint it in this app's own palette on top of that, so ONLY non-structural properties (color/background/border/font-size) belong here -- no display/position/flex. dropdownParent: "body" (set in app.js) means .ts-dropdown renders as a direct child of , not inside .sidebar -- required so the dropdown isn't clipped by .sidebar's overflow-y: auto on mobile -- so its z-index only has to clear .sidebar-toggle (60) and .sidebar (50). */ .ts-wrapper { width: 100%; } /* Fixed black/white, not var(--page)/var(--text-primary) -- deliberately the same in both light and dark mode, per request. !important: Tom Select's own stylesheet has higher-specificity rules for its focus/dropdown-open/has-items states (.ts-wrapper.focus .ts-control etc.) that reset the background to white in those states -- plain .ts-control here loses to those, which is exactly the "turns white on click / stays white after picking an item" bug. Brute-forcing every state variant to match is more reliable than chasing each one down blind (no network access here to see Tom Select's actual CSS). */ .ts-control, .ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control, .ts-control.focus, .ts-control input, .ts-control .item { background: #000 !important; color: #fff !important; border-color: var(--border); font-size: 13px; } .ts-wrapper.focus .ts-control { border-color: var(--always); box-shadow: none; } .ts-dropdown { background: #000; border-color: var(--border); color: #fff; font-size: 13px; z-index: 70; } .ts-dropdown .option { color: #fff; } .ts-dropdown .option.active { background: #333; color: #fff; } .ts-dropdown .no-results { color: #aaa; } .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; } /* --------------------------------------------------------------------- */ /* Mobile off-canvas sidebar (see index.html: #sidebar-toggle, */ /* #sidebar-backdrop, #sidebar-close). Hidden/inert on wider screens -- */ /* the JS that toggles the "open" class runs unconditionally, but only */ /* the media query below gives it any visual effect, so it's harmless */ /* to leave wired up above the breakpoint too. */ /* --------------------------------------------------------------------- */ .sidebar-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 60; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); cursor: pointer; } .sidebar-toggle-icon { font-size: 16px; line-height: 1; } .sidebar-close { display: none; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--page); color: var(--text-primary); font-size: 15px; line-height: 1; cursor: pointer; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 40; } @media (max-width: 760px) { .sidebar-toggle { display: flex; } .sidebar-close { display: block; } .sidebar-backdrop.open { display: block; } body.sidebar-open { overflow: hidden; } /* The toggle button sits above the sidebar (z-index 60 vs 50) so it's reachable while the sidebar is closed, but that same stacking makes it overlap the sidebar's own title once open. Hide it then -- the "x" close button inside the sidebar is the one to use at that point. */ body.sidebar-open .sidebar-toggle { display: none; } .main { padding: 68px 14px 40px; } .card { padding: 16px 14px 8px; } .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: min(300px, 85vw); z-index: 50; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2); } .sidebar.open { transform: translateX(0); } /* Touch targets: native controls default to sizes tuned for a mouse cursor, not a fingertip. 16px inputs also avoid iOS Safari's auto-zoom-on-focus behavior, which otherwise kicks in below 16px. */ select { font-size: 16px; padding: 10px 8px; } /* font-size only -- Tom Select's own stylesheet (loaded in index.html) owns .ts-control's padding/layout; don't override that here, see the comment above the light/dark .ts-control rules for why. */ .ts-control, .ts-control > input, .ts-dropdown { font-size: 16px; } .year-slider, .year-slider input[type="range"] { height: 32px; } .year-slider input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: 6px; } .year-slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; } .party-check { padding: 7px 0; font-size: 13px; gap: 8px; } .party-check input[type="checkbox"] { width: 18px; height: 18px; } } #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); }