/* Aero theme (Oct 2026): dark blue, Y2K meets Frutiger Aero: frosted glass, glossy aqua pills, chrome headings,
   soft light blooms (the small background bubbles were dropped on 16 Oct). The first draft copied Windows XP too literally (title bars, close boxes, a green Start
   button, yellow tooltips) and was replaced. Every rule is scoped to html.theme-xp, so the classic theme is untouched.
   The switch is on the home page; assets/theme.js applies it.
   28 Oct 2026: "the green is lacking" (the user). Frutiger Aero was blue sky over green grass, and this had only the
   sky. Green went onto the buttons first (a lime gel for whatever was switched on, a green orb for the home button),
   and the user said "Not the buttons, the background", so the buttons are as they were. Then the glass panels, the
   card hover glow and the section rules took a green edge, and the user said "not so much the panels, but the
   background", so those are as they were too. The green is all in the backdrop, now the Vista / 7 aurora (below). */

html.theme-xp {
  --bg: #051a44; --panel: rgba(255, 255, 255, .06); --panel2: rgba(255, 255, 255, .04); --card: rgba(255, 255, 255, .07);
  --line: rgba(160, 210, 255, .28); --text: #f0f6ff; --muted: #b3c9e8; --accent: #7fd8ff;
  --aero-font: "Segoe UI", Frutiger, "Frutiger Linotype", "Myriad Pro", "Helvetica Neue", Verdana, sans-serif;
  --aero-gloss: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, 0) 51%);
  --aero-pill: linear-gradient(180deg, #4fb6ff 0%, #1f7ee6 50%, #1569d4 51%, #3a9cf5 100%);
  --aero-glass: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03) 55%, rgba(120, 190, 255, .05));
  --aero-chrome: linear-gradient(180deg, #ffffff 0%, #e4ecf7 45%, #b7c6db 50%, #d9e3f0 75%, #f6f9ff 100%);
}
html.theme-xp body {
  font-family: var(--aero-font) !important;
  color: var(--text);
  background: transparent !important;
}
/* The backdrop sits on a fixed layer behind the page, painted once and only moved. Until 23 Oct desktop still drew it as
   the body's background-attachment: fixed (phones got this layer on 18 Oct), and on a laptop's integrated GPU (UHD 620)
   that repainted four full-screen radial gradients every scroll frame: 22 fps on the home and USA pages against 60 in
   classic. With the layer, every page measured 60 fps, blur kept. Dropping only the blur was tried and was slower: the
   blurred panels had been their own layers, so without them more of the page repainted. Radial throughout since 18 Oct:
   the base was a top-to-bottom linear fade with blooms on it, and read as flat. */
html.theme-xp { background: #04163f !important; }
html.theme-xp body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0);
  /* 28 Oct: the Vista / Windows 7 aurora, after a wallpaper the user sent as inspiration: aqua-green light on the left
     sweeping across into deep blue on the right, with curved ribbons of light through it. A grass-green horizon along
     the bottom was tried first. An all-green version was asked for and then called off on sight of this one ("THIS IS
     GOOD"). The base runs green-teal to blue at an angle and a soft aqua-green glow sits on the left. It had light
     streaks through it too, two thin curved bands and two diagonal ribbons, which the user called "these weird stripes"
     and had removed. Everything is kept dark enough for the white text that sits straight on it. Same layer, so it
     costs nothing on scroll. */
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%, rgba(110, 205, 255, .28), transparent 70%),
    radial-gradient(ellipse 40% 55% at 10% 42%, rgba(120, 255, 205, .12), transparent 70%),
    /* the teal side was #0a5a4e / #0c6a5c with a .22 glow at first, and the L/NP blue and Greens green in Australia's
       poll panel all but vanished on it; this is the same look a step darker */
    linear-gradient(104deg, #073f39 0%, #084a42 14%, #09465f 40%, #0a3a7a 68%, #072a66 100%);
}
html.theme-xp h1 {
  font-family: var(--aero-font); font-weight: 700; letter-spacing: .01em;
  background: var(--aero-chrome); -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 2px 0 rgba(0, 20, 60, .55)) drop-shadow(0 0 14px rgba(120, 200, 255, .35));
}
html.theme-xp h2, html.theme-xp h3 { font-family: var(--aero-font); }
html.theme-xp a { color: var(--accent); }

/* the switch button on the home page: a chrome pill in Aero, plain in classic */
#themeToggle {
  position: absolute; top: 16px; right: 16px; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 8px 12px; border-radius: 8px; border: 1px solid #30394a; background: #111722; color: #eef3f8; cursor: pointer;
}
#themeToggle:hover { border-color: #2fbfb8; }
html.theme-xp #themeToggle {
  font: 600 12.5px var(--aero-font); color: #12305a; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; padding: 7px 16px;
  background: var(--aero-chrome); box-shadow: 0 2px 8px rgba(0, 10, 40, .5), inset 0 -1px 2px rgba(60, 90, 140, .35);
}
html.theme-xp #themeToggle:hover { box-shadow: 0 0 0 3px rgba(127, 216, 255, .35), 0 2px 8px rgba(0, 10, 40, .5); }

/* glass: cards, panels, boxes */
html.theme-xp a.card, html.theme-xp .panel, html.theme-xp .controls, html.theme-xp .note, html.theme-xp .ccard, html.theme-xp .tally,
html.theme-xp .coalition, html.theme-xp .stat, html.theme-xp .hemiInfo, html.theme-xp .parlTableWrap,
html.theme-xp .ntcpCard, html.theme-xp .hemiCard, html.theme-xp .pollBox, html.theme-xp #labPanel,
html.theme-xp .coalitionMaker, html.theme-xp #labSum, html.theme-xp .compassWrap, html.theme-xp .cpRad,
html.theme-xp .specialList, html.theme-xp .prefToolbar, html.theme-xp .prefGridWrap, html.theme-xp .houseStateCard, html.theme-xp #senStateMap,
html.theme-xp .senCard .seatBlock, html.theme-xp .redisNote, html.theme-xp .compassWrap, html.theme-xp .pollDrop {
  /* 18 Oct: glassier. A glossy band layered into the top of the background (layered, not an overlay, so it can't sit
     over a panel's content or catch its clicks), more blur, and a brighter top edge with a faint cyan bottom one. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 38%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04) 55%, rgba(120, 190, 255, .07)) !important;
  border: 1px solid rgba(190, 230, 255, .34) !important;
  box-shadow: 0 8px 26px rgba(0, 8, 30, .42), inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -1px 0 rgba(130, 210, 255, .16) !important;
}
/* No blur behind the glass, anywhere. Phones dropped it on 18 Oct, when they scrolled slowly on every page: each glass
   panel re-blurred what was behind it, every panel on screen, every frame. Desktop kept it until 28 Oct 2026, when the
   user asked for "speed over aesthetics": measured (headless Edge, Intel UHD 620, frame cap off, standard scrollbars),
   the blur cost Aero about a quarter of its frame rate on the Australia page. The note above, that dropping only the
   blur was slower, dates from before the fixed backdrop layer and no longer held. The home carousel (.proj) sets its own
   blur in index.html, hence it is listed here. */
html.theme-xp a.card, html.theme-xp .panel, html.theme-xp .controls, html.theme-xp .note, html.theme-xp .ccard, html.theme-xp .tally,
html.theme-xp .coalition, html.theme-xp .stat, html.theme-xp .hemiInfo, html.theme-xp .parlTableWrap,
html.theme-xp .ntcpCard, html.theme-xp .hemiCard, html.theme-xp .pollBox, html.theme-xp #labPanel,
html.theme-xp .coalitionMaker, html.theme-xp #labSum, html.theme-xp .compassWrap, html.theme-xp .cpRad,
html.theme-xp .specialList, html.theme-xp .prefToolbar, html.theme-xp .prefGridWrap, html.theme-xp .houseStateCard, html.theme-xp #senStateMap,
html.theme-xp .senCard .seatBlock, html.theme-xp .redisNote, html.theme-xp .proj, html.theme-xp .pollDrop {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html.theme-xp a.card { position: relative; border-radius: 16px !important; overflow: hidden; }
html.theme-xp a.card::before {   /* the glossy top half */
  content: ""; position: absolute; inset: 0 0 55% 0; border-radius: 16px 16px 40% 40% / 16px 16px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); pointer-events: none;
}
html.theme-xp a.card:hover { border-color: rgba(127, 216, 255, .75) !important; box-shadow: 0 0 22px rgba(90, 190, 255, .35), 0 8px 24px rgba(0, 8, 30, .45) !important; }
/* The coalition builder's bar (BC, NZ, Latvia, Quebec) shows unpicked parties at 42% opacity, as it should, but on the
   brighter glass of 18 Oct the dimmed stack melted into the panel. A white outline on the bar keeps its shape, and white
   edges on each party keep the parties apart. Colours stay as they are: contrast is fixed with the outline. */
html.theme-xp .coalitionBar { border: 1.5px solid rgba(255, 255, 255, .85) !important; box-shadow: 0 0 12px rgba(127, 216, 255, .25); }
html.theme-xp .coalSeg { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
/* a faint cyan glow on whatever is reached with the keyboard (18 Oct), the same glow the lit pills and cards use */
html.theme-xp button:focus-visible, html.theme-xp a:focus-visible, html.theme-xp input:focus-visible, html.theme-xp select:focus-visible,
html.theme-xp textarea:focus-visible, html.theme-xp summary:focus-visible {
  outline: none; box-shadow: 0 0 0 2px rgba(127, 216, 255, .55), 0 0 14px rgba(127, 216, 255, .45) !important;
}
html.theme-xp .card h2 { color: #fff; text-shadow: 0 1px 2px rgba(0, 20, 60, .6); }
html.theme-xp .card p { color: #d2e3fb; }
html.theme-xp .sub { color: #cfe2ff; }

/* section headings on the home page: a glowing label with a rule fading out beside it. They were glossy aqua pills
   until 17 Oct, which read as buttons you could press. */
html.theme-xp h2.sec { color: #cfeaff; text-shadow: 0 0 12px rgba(127, 216, 255, .45), 0 1px 1px rgba(0, 30, 80, .7); }
html.theme-xp h2.sec::after { background: linear-gradient(90deg, rgba(127, 216, 255, .6), rgba(130, 235, 120, .45) 45%, rgba(130, 235, 120, 0)); }

/* buttons and tabs: aqua pills. Every button a page adds needs its selector here and in the lit list below; Victoria's
   independents toggle (#indToggle) and NZ's poll dropdown (.pollDrop, in the glass list above) were added on 23 Oct
   without it and showed as flat black boxes under Aero. Victoria's #minToggle beside it was added with it (25 Oct). */
html.theme-xp #indToggle:not([style*="background"]),
html.theme-xp #minToggle:not([style*="background"]),
html.theme-xp .tabs button:not([style*="background"]),
html.theme-xp .tab:not([style*="background"]),
html.theme-xp .btn:not(.resultBtn):not(.exitBtn):not([style*="background"]),
html.theme-xp .cpToggle button:not([style*="background"]),
html.theme-xp div.section-tabs button:not([style*="background"]),
html.theme-xp .pollMode button:not([style*="background"]),
html.theme-xp #pollApply:not([style*="background"]),
html.theme-xp .homeBtn:not([style*="background"]),
html.theme-xp .cartEditTools button:not(#exportYapmsBtn):not([style*="background"]),
html.theme-xp .mapZoomTools button:not([style*="background"]),
html.theme-xp .coalitionMaker button:not([style*="background"]),
html.theme-xp .ptabs button:not([style*="background"]),
html.theme-xp .labbtns button:not([style*="background"]),
html.theme-xp .meth .toc a:not([style*="background"]) {
  font-family: var(--aero-font) !important; color: #f2f8ff !important; border: 1px solid rgba(190, 230, 255, .55) !important; border-radius: 999px !important;
  background: var(--aero-gloss), linear-gradient(180deg, rgba(70, 150, 235, .85), rgba(25, 90, 190, .85)) !important;
  box-shadow: 0 2px 6px rgba(0, 10, 40, .4) !important; text-shadow: 0 1px 1px rgba(0, 30, 80, .55);
}
html.theme-xp .tabs button:hover, html.theme-xp .tab:hover, html.theme-xp .btn:hover, html.theme-xp .cpToggle button:hover,
html.theme-xp .pollMode button:hover, html.theme-xp .homeBtn:hover, html.theme-xp #indToggle:hover, html.theme-xp #minToggle:hover { box-shadow: 0 0 0 3px rgba(127, 216, 255, .3), 0 0 14px rgba(127, 216, 255, .35), 0 2px 6px rgba(0, 10, 40, .4) !important; }
html.theme-xp .tabs button.active:not([style*="background"]),
html.theme-xp .tabs button.on:not(#labBtn):not([style*="background"]),
html.theme-xp .tab.on:not([style*="background"]),
html.theme-xp .tab.active:not([style*="background"]),
html.theme-xp .btn.active:not(.resultBtn):not(.exitBtn):not([style*="background"]),
html.theme-xp .cpToggle button.on:not([style*="background"]),
html.theme-xp div.section-tabs button.active:not([style*="background"]),
html.theme-xp .pollMode button.on:not([style*="background"]),
html.theme-xp #pollApply.on:not([style*="background"]),
html.theme-xp #indToggle.on:not([style*="background"]),
html.theme-xp #minToggle.on:not([style*="background"]) {
  color: #0d2b55 !important; text-shadow: none; border-color: #ffffff !important;
  background: var(--aero-gloss), linear-gradient(180deg, #e9f7ff, #9fd8ff) !important; box-shadow: 0 0 14px rgba(127, 216, 255, .55) !important;
}
html.theme-xp #labBtn.on { color: #3a2a00 !important; text-shadow: none; background: var(--aero-gloss), linear-gradient(180deg, #ffe78f, #e8b93a) !important; }
html.theme-xp .homeBtn { background: var(--aero-gloss), linear-gradient(180deg, #43c6c0, #138f99) !important; }
/* Disabled buttons, greyed out. The pill rules above painted them exactly like live ones, so Bulgaria's "Poll average"
   (off until a runoff poll exists) looked clickable and did nothing. :disabled is repeated only to outrank the
   :not() chains above. */
html.theme-xp button:disabled:disabled:disabled:disabled:disabled:not([style*="background"]),
html.theme-xp button:disabled:disabled:disabled:disabled:disabled:not([style*="background"]):hover {
  color: rgba(225, 235, 250, .42) !important; border-color: rgba(170, 215, 255, .16) !important; text-shadow: none;
  background: rgba(255, 255, 255, .05) !important; box-shadow: none !important; cursor: not-allowed;
}

/* tables, inputs, tooltips, footer */
html.theme-xp .ptable th, html.theme-xp .ctable th, html.theme-xp .chead {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)) !important; color: #e6f2ff !important;
}
html.theme-xp .chip:not([style*="background"]), html.theme-xp .primaryCard, html.theme-xp select, html.theme-xp input[type=number] {
  background: rgba(0, 12, 40, .45) !important; border-color: rgba(170, 215, 255, .35) !important; border-radius: 10px !important;
}
html.theme-xp #tip, html.theme-xp .floatingTip {
  background: linear-gradient(180deg, rgba(20, 60, 130, .96), rgba(6, 24, 62, .97)) !important; border: 1px solid rgba(170, 215, 255, .5) !important;
  border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
html.theme-xp footer.siteFoot, html.theme-xp footer:not(.siteFoot) {
  color: #cfe2ff !important; border-top: 1px solid rgba(170, 215, 255, .25); padding-top: 14px !important;
}

/* coloured edges (party colour on top, accent on the left) belong to these, so only the fill changes */
html.theme-xp .tal, html.theme-xp .coalitionPart, html.theme-xp .box {
  background-color: transparent !important; background-image: var(--aero-glass) !important;
  box-shadow: 0 6px 18px rgba(0, 8, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
html.theme-xp .prefGrid thead th, html.theme-xp .prefGrid tbody th { background: #0b2a63 !important; }
html.theme-xp .prefGrid td.na { background: rgba(0, 10, 35, .55) !important; }

/* ---- leftovers found by sweeping every page in Aero (16 Oct): panels, cards and boxes ---- */
html.theme-xp .cpNote, html.theme-xp #cpWhy, html.theme-xp .footer-panel, html.theme-xp .status-bar,
html.theme-xp .hemicycle-wrap, html.theme-xp .poll-wrap, html.theme-xp .party-card, html.theme-xp .tl-wrap, html.theme-xp .compass-wrap, html.theme-xp .pcol,
html.theme-xp .cmarg, html.theme-xp .posBox, html.theme-xp .mmpControls, html.theme-xp .mmpTableWrap, html.theme-xp .warning,
html.theme-xp .rCard, html.theme-xp .hist, html.theme-xp header.masthead, html.theme-xp nav.jumpbar, html.theme-xp .national-card,
html.theme-xp .section-tabs-row, html.theme-xp .home-sim, html.theme-xp .home-notice, html.theme-xp .mode, html.theme-xp .score,
html.theme-xp .match {
  background: var(--aero-glass) !important; border-color: rgba(170, 215, 255, .30) !important;
  box-shadow: 0 6px 18px rgba(0, 8, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
html.theme-xp .party-card.below { opacity: .75; }
html.theme-xp .houseStateRow { background: rgba(255, 255, 255, .04) !important; }
html.theme-xp .match:hover, html.theme-xp .match.sel { background: rgba(127, 216, 255, .16) !important; border-color: rgba(127, 216, 255, .55) !important; }
html.theme-xp .home-gold { box-shadow: inset 3px 0 0 #ffd76a, 0 6px 18px rgba(0, 8, 30, .35) !important; }
html.theme-xp .home-red { box-shadow: inset 3px 0 0 #ff8f8f, 0 6px 18px rgba(0, 8, 30, .35) !important; }
html.theme-xp .home-notice { box-shadow: inset 3px 0 0 #ffd76a !important; }

/* buttons, small pills and labels */
html.theme-xp label.mcb, html.theme-xp button.mcb, html.theme-xp .swingSeg button, html.theme-xp button.hemiRow, html.theme-xp button.hemiClear,
html.theme-xp #prefReset, html.theme-xp #prefRareBtn, html.theme-xp .cartogram-btn, html.theme-xp .countries button, html.theme-xp .prioPick button {
  font-family: var(--aero-font) !important; color: #f2f8ff !important; border: 1px solid rgba(190, 230, 255, .5) !important;
  background: var(--aero-gloss), linear-gradient(180deg, rgba(70, 150, 235, .75), rgba(25, 90, 190, .75)) !important;
}
html.theme-xp .swingSeg button.active, html.theme-xp .countries button.on, html.theme-xp .prioPick button.on,
html.theme-xp label.mcb:has(input:checked) {
  color: #0d2b55 !important; border-color: #fff !important; background: var(--aero-gloss), linear-gradient(180deg, #e9f7ff, #9fd8ff) !important;
}
html.theme-xp .swingSeg, html.theme-xp .cartogram-btn, html.theme-xp .countries button, html.theme-xp .prioPick button, html.theme-xp label.mcb,
html.theme-xp button.mcb { border-radius: 999px !important; }
html.theme-xp .tag, html.theme-xp .weight-chip, html.theme-xp .majority-badge, html.theme-xp .coalitionMarker span, html.theme-xp .chip:not(.rad):not([style*="background"]) {
  background: rgba(255, 255, 255, .10) !important; border: 1px solid rgba(190, 230, 255, .35) !important; color: #eaf4ff !important; border-radius: 999px !important;
}
html.theme-xp .thr.out { background: rgba(255, 255, 255, .07) !important; border-color: rgba(190, 230, 255, .25) !important; color: #b3c9e8 !important; }
html.theme-xp .thr.in { background: rgba(120, 240, 170, .16) !important; border-color: rgba(140, 240, 180, .5) !important; color: #b8ffd2 !important; }
html.theme-xp .coalitionStatus.no, html.theme-xp .cstat.no { background: rgba(255, 110, 120, .16) !important; border-color: rgba(255, 140, 150, .5) !important; }
html.theme-xp .coalitionStatus.yes, html.theme-xp .cstat.yes { background: rgba(120, 240, 170, .16) !important; border-color: rgba(140, 240, 180, .5) !important; }

/* quiz answers: glass, keeping each answer's coloured underline */
html.theme-xp .ans {
  font-family: var(--aero-font) !important; color: #f2f8ff !important; border-radius: 14px !important;
  background: var(--aero-gloss), linear-gradient(180deg, rgba(60, 130, 220, .55), rgba(20, 70, 160, .55)) !important;
  border-top-color: rgba(190, 230, 255, .45) !important; border-left-color: rgba(190, 230, 255, .3) !important; border-right-color: rgba(190, 230, 255, .3) !important;
  box-shadow: 0 3px 10px rgba(0, 10, 40, .35) !important;
}
html.theme-xp .ans:hover { box-shadow: 0 0 0 3px rgba(127, 216, 255, .3), 0 3px 10px rgba(0, 10, 40, .35) !important; }
html.theme-xp .ans.sel, html.theme-xp .ans.on, html.theme-xp .ans[aria-pressed=true] { color: #0d2b55 !important; background: var(--aero-gloss), linear-gradient(180deg, #e9f7ff, #9fd8ff) !important; }

/* inputs and the empty part of bars */
html.theme-xp input:not([type=checkbox]):not([type=radio]):not([type=range]) {
  background: rgba(0, 12, 40, .45) !important; border: 1px solid rgba(170, 215, 255, .35) !important; color: #f0f6ff !important; border-radius: 8px;
}
html.theme-xp #coalitionBar, html.theme-xp .coalitionBar, html.theme-xp .cbar, html.theme-xp .bar, html.theme-xp .progress, html.theme-xp .match .bar {
  background: rgba(0, 10, 35, .5) !important;
}
html.theme-xp tr > th { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)) !important; color: #e6f2ff !important; }
html.theme-xp td.na { background: rgba(0, 10, 35, .35) !important; }
html.theme-xp td.varies { background: rgba(255, 215, 106, .10) !important; }

html.theme-xp input[type=range] { accent-color: #7fd8ff; }
html.theme-xp .srow input[type=range] { background: rgba(255, 255, 255, .16) !important; border-radius: 999px; }

/* compasses: the quadrants were red / blue / green / purple, the colours of the authoritarian-libertarian compass
   people know, which read as that compass although these axes are conservative-progressive. Since Oct 2026 every
   page gets one palette from here (burgundy / navy / red / gold), matched on the fill each page draws, so no page
   needed editing. Victoria's bottom pair and the USA's .06 washes are different strings, hence the extra selectors.
   Classic: soft washes on the near-black page. The quiz's compass (svg.compass) had no quadrants at all until 24 Oct;
   it draws rect.cqLC/.cqRC/.cqLP/.cqRP and its PNG export reads the fills back from these rules. */
svg#compass rect[fill="rgba(239,83,80,.07)"], svg#compass rect[fill="rgba(239,83,80,.06)"], svg.compass rect.cqLC { fill: rgba(128, 0, 32, .32); }        /* left · conservative */
svg#compass rect[fill="rgba(66,133,244,.07)"], svg#compass rect[fill="rgba(66,133,244,.06)"], svg.compass rect.cqRC { fill: rgba(23, 58, 99, .5); }      /* right · conservative */
svg#compass rect[fill="rgba(102,187,106,.07)"], svg#compass rect[fill="rgba(102,187,106,.06)"],
svg#compass rect[fill="rgba(76,175,80,.07)"], svg.compass rect.cqLP { fill: rgba(213, 58, 66, .2); }                                                   /* left · progressive */
svg#compass rect[fill="rgba(171,71,188,.07)"], svg#compass rect[fill="rgba(171,71,188,.06)"],
svg#compass rect[fill="rgba(255,193,7,.06)"], svg.compass rect.cqRP { fill: rgba(229, 182, 50, .17); }                                                  /* right · progressive */
/* Aero: the washes vanished on blue glass, so the plot gets a dark backing and solid deep shades of the same four.
   Translucent fills were tried first; gold over the blue glass came out olive, so these are solid. */
html.theme-xp svg#compass { background: rgba(0, 10, 35, .5); border-radius: 12px; }
html.theme-xp svg#compass rect[fill="rgba(239,83,80,.07)"], html.theme-xp svg#compass rect[fill="rgba(239,83,80,.06)"], html.theme-xp svg.compass rect.cqLC { fill: #6b1028; }
html.theme-xp svg#compass rect[fill="rgba(66,133,244,.07)"], html.theme-xp svg#compass rect[fill="rgba(66,133,244,.06)"], html.theme-xp svg.compass rect.cqRC { fill: #173a63; }
html.theme-xp svg#compass rect[fill="rgba(102,187,106,.07)"], html.theme-xp svg#compass rect[fill="rgba(102,187,106,.06)"],
html.theme-xp svg#compass rect[fill="rgba(76,175,80,.07)"], html.theme-xp svg.compass rect.cqLP { fill: #932731; }
html.theme-xp svg#compass rect[fill="rgba(171,71,188,.07)"], html.theme-xp svg#compass rect[fill="rgba(171,71,188,.06)"],
html.theme-xp svg#compass rect[fill="rgba(255,193,7,.06)"], html.theme-xp svg.compass rect.cqRP { fill: #98761b; }
html.theme-xp svg.compass rect.bgc { fill: rgba(0, 10, 35, .5); stroke: rgba(190, 230, 255, .34); }
/* the quiz's "All" country picker (24 Oct): glass cards that light up like the pills on hover */
html.theme-xp .ctyCard { background: var(--aero-gloss), linear-gradient(180deg, rgba(70, 150, 235, .55), rgba(25, 90, 190, .55)) !important;
  border: 1px solid rgba(190, 230, 255, .55) !important; box-shadow: 0 2px 6px rgba(0, 10, 40, .4) !important; color: #f2f8ff !important; }
html.theme-xp .ctyCard:hover { box-shadow: 0 0 0 3px rgba(127, 216, 255, .3), 0 0 14px rgba(127, 216, 255, .35), 0 2px 6px rgba(0, 10, 40, .4) !important; }
html.theme-xp .ctyCard .ctyTop { color: #f2f8ff; }
html.theme-xp #compass .cpGrid, html.theme-xp #compass line[stroke="#1d2633"], html.theme-xp #compass line[stroke="#1b212c"] { stroke: rgba(255, 255, 255, .10); }
html.theme-xp #compass .cpMid, html.theme-xp #compass line[stroke="#3d4a5e"], html.theme-xp #compass line[stroke="#3a4255"] { stroke: rgba(200, 230, 255, .45); }
html.theme-xp #compass .cpQuad, html.theme-xp #compass .cpQ { fill: #f2f6ff; opacity: .8; }   /* was pale blue, which went grey on the red and gold */
html.theme-xp #compass .cpTick { fill: #8fa9d1; }

/* SVG panels drawn with a near-black fill: the element sweep only read CSS backgrounds, so NZ's electorate boxes
   (an SVG rect fill) stayed black on Aero */
html.theme-xp .clusterBox { fill: rgba(0, 14, 45, .42); stroke: rgba(150, 195, 255, .28); }

/* the page root: the body was blue but the strip below a short page (under the footer) showed the classic near-black */
html.theme-xp { background: #04183f !important; }

/* ---- scrollbars: the browser's own, in XP's light blue. Until 28 Oct 2026 they were drawn as Windows XP scrollbars (17px, a rounded light-blue thumb with grip lines, arrow buttons) through ::-webkit-scrollbar, which Chrome repaints on every
   scroll step. Measured (headless Edge, Intel UHD 620, frame cap off), that alone cut scrolling to a third of
   Liquid's frame rate on the USA page; with the browser's own scrollbars Aero scrolled level with Liquid. The user:
   "speed over aesthetics". Only the colour is set, and without !important, so a page's own thin scrollbars (the
   Swing Lab's, set by ID) keep theirs, and the hidden ones on the AU/Victoria maps stay hidden. ---- */
html.theme-xp, html.theme-xp * { scrollbar-color: #a9c4f5 #e9eefa; }