@empoweredvote/ev-ui 0.8.14 → 0.9.0

package/dist/index.mjs

@@ -378,8 +378,8 @@ function wrapLabel(label, maxChars = 12) {
   return lines;
 }
 
-// src/Header.jsx
-import React2, { useState as useState3, useRef as useRef2, useEffect as useEffect4 } from "react";
+// src/PlaceholderRadar.jsx
+import React2 from "react";
 
 // src/tokens.js
 var colorScales = {
@@ -774,6 +774,87 @@ var breakpoints = {
   xl: "1280px"
 };
 
+// src/PlaceholderRadar.jsx
+function PlaceholderRadar({ size = 250, name = "", darkMode = false }) {
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size / 2 * 0.65;
+  const n = 8;
+  const surface = darkMode ? "#1e2a3a" : colorScales.teal["050"];
+  const stroke = darkMode ? "rgba(255,255,255,0.22)" : colorScales.gray["200"];
+  const vertices = Array.from({ length: n }, (_, i) => {
+    const a = 2 * Math.PI * i / n;
+    return [cx + r * Math.sin(a), cy - r * Math.cos(a)];
+  });
+  const outerPts = vertices.map(([x, y]) => `${x},${y}`).join(" ");
+  const midPts = vertices.map(([x, y]) => `${cx + (x - cx) * 0.6},${cy + (y - cy) * 0.6}`).join(" ");
+  const innerPts = vertices.map(([x, y]) => `${cx + (x - cx) * 0.3},${cy + (y - cy) * 0.3}`).join(" ");
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      role: "img",
+      "aria-label": name ? `${name} \u2014 compass data unavailable` : "compass data unavailable",
+      style: {
+        backgroundColor: surface,
+        borderRadius: borderRadius.sm,
+        flexShrink: 0
+      }
+    },
+    vertices.map(([x, y], i) => /* @__PURE__ */ React2.createElement(
+      "line",
+      {
+        key: i,
+        x1: cx,
+        y1: cy,
+        x2: x,
+        y2: y,
+        stroke,
+        strokeWidth: "1",
+        strokeDasharray: "2 3",
+        opacity: "0.6"
+      }
+    )),
+    /* @__PURE__ */ React2.createElement(
+      "polygon",
+      {
+        points: innerPts,
+        fill: "none",
+        stroke,
+        strokeWidth: "1",
+        strokeDasharray: "2 3",
+        opacity: "0.5"
+      }
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "polygon",
+      {
+        points: midPts,
+        fill: "none",
+        stroke,
+        strokeWidth: "1",
+        strokeDasharray: "3 3",
+        opacity: "0.6"
+      }
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "polygon",
+      {
+        points: outerPts,
+        fill: "none",
+        stroke,
+        strokeWidth: "1.5",
+        strokeDasharray: "4 3"
+      }
+    )
+  );
+}
+
+// src/Header.jsx
+import React3, { useState as useState3, useRef as useRef2, useEffect as useEffect4 } from "react";
+
 // src/useMediaQuery.js
 import { useState as useState2, useEffect as useEffect3 } from "react";
 function useMediaQuery(query) {
@@ -803,12 +884,14 @@ function Header({
   currentPath,
   onNavigate,
   profileMenu,
+  darkMode = false,
+  navCollapseBreakpoint = 1024,
   style = {}
 }) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
   const [openDropdown, setOpenDropdown] = useState3(null);
   const [profileOpen, setProfileOpen] = useState3(false);
-  const isMobile = useMediaQuery("(max-width: 768px)");
+  const isMobile = useMediaQuery(`(max-width: ${navCollapseBreakpoint}px)`);
   const profileRef = useRef2(null);
   useEffect4(() => {
     if (!profileOpen) return;
@@ -826,9 +909,42 @@ function Header({
       onNavigate(href);
     }
   };
+  const t = darkMode ? {
+    surface: semanticTokens.dark.layerBase.background,
+    // #131416
+    raised: semanticTokens.dark.layerOne.background,
+    // #2F3237 (dropdowns)
+    text: colors.evLightBlue,
+    // #59B0C4 — AA on dark
+    itemText: semanticTokens.dark.layerOne.text,
+    // #D3D7DE (dropdown items)
+    muted: semanticTokens.dark.layerBase.text,
+    // #B3BBCC
+    border: semanticTokens.dark.divider,
+    // #41454E
+    hoverBg: semanticTokens.dark.layerTwo.background,
+    // #41454E
+    ctaBg: semanticTokens.dark.buttonPrimary.background.default,
+    // #005366
+    ctaBgHover: semanticTokens.dark.buttonPrimary.background.hovered,
+    ctaText: "#FFFFFF",
+    shadow: "0 10px 40px rgba(0,0,0,0.5)"
+  } : {
+    surface: colors.bgWhite,
+    raised: colors.bgWhite,
+    text: colors.evTeal,
+    itemText: colors.evTeal,
+    muted: colors.textMuted,
+    border: colors.borderLight,
+    hoverBg: colors.bgLight,
+    ctaBg: colors.evTeal,
+    ctaBgHover: colors.evTealDark,
+    ctaText: colors.textWhite,
+    shadow: "0 10px 40px rgba(0,0,0,0.1)"
+  };
   const styles2 = {
     header: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: t.surface,
       position: "sticky",
       top: 0,
       zIndex: 50,
@@ -841,7 +957,8 @@ function Header({
       padding: isMobile ? `${spacing[3]} ${spacing[3]}` : `${spacing[4]} ${spacing[6]}`,
       display: "flex",
       alignItems: "center",
-      justifyContent: "space-between"
+      justifyContent: "space-between",
+      gap: spacing[6]
     },
     logo: {
       height: "43px",
@@ -849,20 +966,24 @@ function Header({
     },
     nav: {
       display: isMobile ? "none" : "flex",
+      flex: "1 1 auto",
       alignItems: "center",
-      gap: spacing[10]
+      justifyContent: "center",
+      flexWrap: "nowrap",
+      gap: spacing[8]
     },
     navItem: {
       fontFamily: fonts.primary,
-      fontWeight: fontWeights.bold,
-      fontSize: fontSizes.xl,
-      color: colors.evTeal,
+      fontWeight: fontWeights.medium,
+      fontSize: fontSizes.base,
+      color: t.text,
       textDecoration: "none",
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
       gap: spacing[2],
-      position: "relative"
+      position: "relative",
+      whiteSpace: "nowrap"
     },
     navItemActive: {
       textDecoration: "underline"
@@ -879,9 +1000,9 @@ function Header({
       zIndex: 100
     },
     dropdownInner: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: t.raised,
       borderRadius: borderRadius.lg,
-      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      boxShadow: t.shadow,
       minWidth: "200px",
       padding: spacing[2]
     },
@@ -891,14 +1012,14 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: t.itemText,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer"
     },
     ctaButton: {
-      backgroundColor: colors.evTeal,
-      color: colors.textWhite,
+      backgroundColor: t.ctaBg,
+      color: t.ctaText,
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.xl,
@@ -913,13 +1034,13 @@ function Header({
       display: "inline-flex",
       alignItems: "center",
       backgroundColor: "transparent",
-      color: colors.evTeal,
+      color: t.text,
       fontFamily: fonts.primary,
       fontWeight: fontWeights.bold,
       fontSize: fontSizes.base,
       padding: `${spacing[2]} ${spacing[5]}`,
       borderRadius: borderRadius.full || "999px",
-      border: `1.5px solid ${colors.evTeal}`,
+      border: `1.5px solid ${t.text}`,
       cursor: "pointer",
       textDecoration: "none",
       lineHeight: 1.2,
@@ -935,7 +1056,7 @@ function Header({
     hamburger: {
       width: "24px",
       height: "2px",
-      backgroundColor: colors.evTeal,
+      backgroundColor: t.text,
       position: "relative"
     },
     mobileMenu: {
@@ -945,25 +1066,25 @@ function Header({
       top: "100%",
       left: 0,
       right: 0,
-      backgroundColor: colors.bgWhite,
+      backgroundColor: t.surface,
       padding: spacing[4],
-      boxShadow: "0 4px 20px rgba(0,0,0,0.1)"
+      boxShadow: t.shadow
     },
     mobileNavItem: {
       fontFamily: fonts.primary,
-      fontWeight: fontWeights.bold,
-      fontSize: fontSizes.lg,
-      color: colors.evTeal,
+      fontWeight: fontWeights.medium,
+      fontSize: fontSizes.base,
+      color: t.text,
       textDecoration: "none",
       padding: `${spacing[3]} 0`,
-      borderBottom: `1px solid ${colors.borderLight}`
+      borderBottom: `1px solid ${t.border}`
     },
     profileButton: {
       width: "40px",
       height: "40px",
       borderRadius: borderRadius.full,
-      border: `2px solid ${colors.evTeal}`,
-      backgroundColor: colors.bgLight,
+      border: `2px solid ${t.text}`,
+      backgroundColor: darkMode ? t.raised : colors.bgLight,
       cursor: "pointer",
       display: "flex",
       alignItems: "center",
@@ -978,9 +1099,9 @@ function Header({
       zIndex: 100
     },
     profileDropdownInner: {
-      backgroundColor: colors.bgWhite,
+      backgroundColor: t.raised,
       borderRadius: borderRadius.lg,
-      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      boxShadow: t.shadow,
       minWidth: "160px",
       padding: spacing[2]
     },
@@ -991,7 +1112,7 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.medium,
       fontSize: fontSizes.base,
-      color: colors.evTeal,
+      color: t.itemText,
       textDecoration: "none",
       borderRadius: borderRadius.md,
       cursor: "pointer",
@@ -1001,7 +1122,7 @@ function Header({
     },
     mobileDivider: {
       height: "1px",
-      backgroundColor: colors.borderLight,
+      backgroundColor: t.border,
       margin: `${spacing[3]} 0`
     },
     profileLabel: {
@@ -1009,8 +1130,8 @@ function Header({
       fontFamily: fonts.primary,
       fontWeight: fontWeights.semibold,
       fontSize: fontSizes.sm,
-      color: colors.textMuted,
-      borderBottom: `1px solid ${colors.borderLight}`,
+      color: t.muted,
+      borderBottom: `1px solid ${t.border}`,
       marginBottom: spacing[1],
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -1018,17 +1139,23 @@ function Header({
     }
   };
   const NavLink = ({ item }) => {
-    const isActive = currentPath === item.href;
+    const isActive = currentPath === item.href || typeof window !== "undefined" && /^https?:\/\//.test(item.href) && (() => {
+      try {
+        return new URL(item.href).hostname === window.location.hostname;
+      } catch {
+        return false;
+      }
+    })();
     const hasDropdown = item.dropdown && item.dropdown.length > 0;
     const isOpen = openDropdown === item.label;
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(
       "div",
       {
         style: { position: "relative" },
         onMouseEnter: () => hasDropdown && setOpenDropdown(item.label),
         onMouseLeave: () => hasDropdown && setOpenDropdown(null)
       },
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React3.createElement(
         "a",
         {
           href: item.href,
@@ -1039,7 +1166,7 @@ function Header({
           }
         },
         item.label,
-        hasDropdown && /* @__PURE__ */ React2.createElement(
+        hasDropdown && /* @__PURE__ */ React3.createElement(
           "svg",
           {
             style: styles2.dropdownIcon,
@@ -1047,11 +1174,11 @@ function Header({
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg"
           },
-          /* @__PURE__ */ React2.createElement(
+          /* @__PURE__ */ React3.createElement(
             "path",
             {
               d: "M1 1L8 8L15 1",
-              stroke: colors.evTeal,
+              stroke: t.text,
               strokeWidth: "2",
               strokeLinecap: "round",
               strokeLinejoin: "round"
@@ -1059,7 +1186,7 @@ function Header({
           )
         )
       ),
-      hasDropdown && isOpen && /* @__PURE__ */ React2.createElement("div", { style: styles2.dropdown }, /* @__PURE__ */ React2.createElement("div", { style: styles2.dropdownInner }, item.dropdown.map((dropdownItem, idx) => /* @__PURE__ */ React2.createElement(
+      hasDropdown && isOpen && /* @__PURE__ */ React3.createElement("div", { style: styles2.dropdown }, /* @__PURE__ */ React3.createElement("div", { style: styles2.dropdownInner }, item.dropdown.map((dropdownItem, idx) => /* @__PURE__ */ React3.createElement(
         "a",
         {
           key: idx,
@@ -1067,7 +1194,7 @@ function Header({
           onClick: (e) => handleNavClick(e, dropdownItem.href),
           style: styles2.dropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = colors.bgLight;
+            e.target.style.backgroundColor = t.hoverBg;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1077,26 +1204,26 @@ function Header({
       ))))
     );
   };
-  return /* @__PURE__ */ React2.createElement("header", { style: styles2.header }, /* @__PURE__ */ React2.createElement("div", { style: styles2.container }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement("header", { style: styles2.header }, /* @__PURE__ */ React3.createElement("div", { style: styles2.container }, /* @__PURE__ */ React3.createElement(
     "a",
     {
       href: logoHref,
       onClick: (e) => handleNavClick(e, logoHref),
-      style: { display: "flex", alignItems: "center" }
+      style: { display: "flex", alignItems: "center", flexShrink: 0 }
     },
-    logoSrc ? /* @__PURE__ */ React2.createElement("img", { src: logoSrc, alt: logoAlt, style: styles2.logo }) : /* @__PURE__ */ React2.createElement(
+    logoSrc ? /* @__PURE__ */ React3.createElement("img", { src: logoSrc, alt: logoAlt, style: styles2.logo }) : /* @__PURE__ */ React3.createElement(
       "span",
       {
         style: {
           fontFamily: fonts.primary,
           fontWeight: fontWeights.bold,
           fontSize: fontSizes["2xl"],
-          color: colors.evTeal
+          color: t.text
         }
       },
       "empowered.vote"
     )
-  ), /* @__PURE__ */ React2.createElement("nav", { style: styles2.nav, className: "ev-header-nav" }, navItems.map((item, idx) => /* @__PURE__ */ React2.createElement(NavLink, { key: idx, item }))), /* @__PURE__ */ React2.createElement("div", { style: { display: isMobile ? "none" : "flex", alignItems: "center", gap: spacing[3] } }, secondaryAction && React2.isValidElement(secondaryAction) && secondaryAction, secondaryAction && !React2.isValidElement(secondaryAction) && /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React3.createElement("nav", { style: styles2.nav, className: "ev-header-nav" }, navItems.map((item, idx) => /* @__PURE__ */ React3.createElement(NavLink, { key: idx, item }))), /* @__PURE__ */ React3.createElement("div", { style: { display: isMobile ? "none" : "flex", alignItems: "center", gap: spacing[3], flexShrink: 0 } }, secondaryAction && React3.isValidElement(secondaryAction) && secondaryAction, secondaryAction && !React3.isValidElement(secondaryAction) && /* @__PURE__ */ React3.createElement(
     "a",
     {
       href: secondaryAction.href,
@@ -1110,16 +1237,16 @@ function Header({
       style: styles2.secondaryAction,
       className: "ev-header-secondary",
       onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = colors.evTeal;
-        e.currentTarget.style.color = colors.textWhite;
+        e.currentTarget.style.backgroundColor = t.text;
+        e.currentTarget.style.color = darkMode ? t.surface : colors.textWhite;
       },
       onMouseLeave: (e) => {
         e.currentTarget.style.backgroundColor = "transparent";
-        e.currentTarget.style.color = colors.evTeal;
+        e.currentTarget.style.color = t.text;
       }
     },
     secondaryAction.label
-  ), ctaButton && /* @__PURE__ */ React2.createElement(
+  ), ctaButton && /* @__PURE__ */ React3.createElement(
     "a",
     {
       href: ctaButton.href,
@@ -1127,14 +1254,14 @@ function Header({
       style: styles2.ctaButton,
       className: "ev-header-cta",
       onMouseEnter: (e) => {
-        e.target.style.backgroundColor = colors.evTealDark;
+        e.target.style.backgroundColor = t.ctaBgHover;
       },
       onMouseLeave: (e) => {
-        e.target.style.backgroundColor = colors.evTeal;
+        e.target.style.backgroundColor = t.ctaBg;
       }
     },
     ctaButton.label
-  ), profileMenu && /* @__PURE__ */ React2.createElement("div", { ref: profileRef, style: { position: "relative" } }, /* @__PURE__ */ React2.createElement(
+  ), profileMenu && /* @__PURE__ */ React3.createElement("div", { ref: profileRef, style: { position: "relative" } }, /* @__PURE__ */ React3.createElement(
     "button",
     {
       style: styles2.profileButton,
@@ -1142,24 +1269,24 @@ function Header({
       "aria-label": "Profile menu",
       "aria-expanded": profileOpen
     },
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement(
       "svg",
       {
         width: "20",
         height: "20",
         viewBox: "0 0 24 24",
         fill: "none",
-        stroke: colors.evTeal,
+        stroke: t.text,
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round"
       },
-      /* @__PURE__ */ React2.createElement("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
-      /* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "7", r: "4" })
+      /* @__PURE__ */ React3.createElement("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ React3.createElement("circle", { cx: "12", cy: "7", r: "4" })
     )
-  ), profileOpen && /* @__PURE__ */ React2.createElement("div", { style: styles2.profileDropdown }, /* @__PURE__ */ React2.createElement("div", { style: styles2.profileDropdownInner }, profileMenu.label && /* @__PURE__ */ React2.createElement("div", { style: styles2.profileLabel }, profileMenu.label), profileMenu.items.map((item, idx) => {
+  ), profileOpen && /* @__PURE__ */ React3.createElement("div", { style: styles2.profileDropdown }, /* @__PURE__ */ React3.createElement("div", { style: styles2.profileDropdownInner }, profileMenu.label && /* @__PURE__ */ React3.createElement("div", { style: styles2.profileLabel }, profileMenu.label), profileMenu.items.map((item, idx) => {
     if (item.href) {
-      return /* @__PURE__ */ React2.createElement(
+      return /* @__PURE__ */ React3.createElement(
         "a",
         {
           key: idx,
@@ -1173,7 +1300,7 @@ function Header({
           },
           style: styles2.profileDropdownItem,
           onMouseEnter: (e) => {
-            e.target.style.backgroundColor = colors.bgLight;
+            e.target.style.backgroundColor = t.hoverBg;
           },
           onMouseLeave: (e) => {
             e.target.style.backgroundColor = "transparent";
@@ -1182,7 +1309,7 @@ function Header({
         item.label
       );
     }
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(
       "button",
       {
         key: idx,
@@ -1193,7 +1320,7 @@ function Header({
         },
         style: styles2.profileDropdownItem,
         onMouseEnter: (e) => {
-          e.target.style.backgroundColor = colors.bgLight;
+          e.target.style.backgroundColor = t.hoverBg;
         },
         onMouseLeave: (e) => {
           e.target.style.backgroundColor = "transparent";
@@ -1201,7 +1328,7 @@ function Header({
       },
       item.label
     );
-  }))))), /* @__PURE__ */ React2.createElement(
+  }))))), /* @__PURE__ */ React3.createElement(
     "button",
     {
       style: styles2.mobileMenuButton,
@@ -1210,7 +1337,7 @@ function Header({
       "aria-label": "Toggle menu",
       "aria-expanded": mobileMenuOpen
     },
-    /* @__PURE__ */ React2.createElement("div", { style: styles2.hamburger }, /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React3.createElement("div", { style: styles2.hamburger }, /* @__PURE__ */ React3.createElement(
       "span",
       {
         style: {
@@ -1219,10 +1346,10 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: t.text
         }
       }
-    ), /* @__PURE__ */ React2.createElement(
+    ), /* @__PURE__ */ React3.createElement(
       "span",
       {
         style: {
@@ -1231,13 +1358,13 @@ function Header({
           left: 0,
           width: "100%",
           height: "2px",
-          backgroundColor: colors.evTeal
+          backgroundColor: t.text
         }
       }
     ))
-  )), /* @__PURE__ */ React2.createElement("div", { style: styles2.mobileMenu, className: "ev-header-mobile-menu" }, navItems.map((item, idx) => {
+  )), /* @__PURE__ */ React3.createElement("div", { style: styles2.mobileMenu, className: "ev-header-mobile-menu" }, navItems.map((item, idx) => {
     const hasDropdown = item.dropdown && item.dropdown.length > 0;
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, { key: idx }, hasDropdown ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, { key: idx }, hasDropdown ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
       "span",
       {
         style: {
@@ -1247,7 +1374,7 @@ function Header({
         }
       },
       item.label
-    ), item.dropdown.map((sub, subIdx) => /* @__PURE__ */ React2.createElement(
+    ), item.dropdown.map((sub, subIdx) => /* @__PURE__ */ React3.createElement(
       "a",
       {
         key: subIdx,
@@ -1264,7 +1391,7 @@ function Header({
         }
       },
       sub.label
-    ))) : /* @__PURE__ */ React2.createElement(
+    ))) : /* @__PURE__ */ React3.createElement(
       "a",
       {
         href: item.href,
@@ -1276,7 +1403,7 @@ function Header({
       },
       item.label
     ));
-  }), secondaryAction && React2.isValidElement(secondaryAction) && /* @__PURE__ */ React2.createElement("div", { style: { marginTop: spacing[4], textAlign: "center" } }, secondaryAction), secondaryAction && !React2.isValidElement(secondaryAction) && /* @__PURE__ */ React2.createElement(
+  }), secondaryAction && React3.isValidElement(secondaryAction) && /* @__PURE__ */ React3.createElement("div", { style: { marginTop: spacing[4], textAlign: "center" } }, secondaryAction), secondaryAction && !React3.isValidElement(secondaryAction) && /* @__PURE__ */ React3.createElement(
     "a",
     {
       href: secondaryAction.href,
@@ -1291,7 +1418,7 @@ function Header({
       style: { ...styles2.secondaryAction, marginTop: spacing[4], textAlign: "center", justifyContent: "center" }
     },
     secondaryAction.label
-  ), ctaButton && /* @__PURE__ */ React2.createElement(
+  ), ctaButton && /* @__PURE__ */ React3.createElement(
     "a",
     {
       href: ctaButton.href,
@@ -1302,14 +1429,14 @@ function Header({
       style: { ...styles2.ctaButton, marginTop: spacing[4], textAlign: "center" }
     },
     ctaButton.label
-  ), profileMenu && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { style: styles2.mobileDivider }), profileMenu.label && /* @__PURE__ */ React2.createElement(
+  ), profileMenu && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { style: styles2.mobileDivider }), profileMenu.label && /* @__PURE__ */ React3.createElement(
     "span",
     {
       style: {
         ...styles2.mobileNavItem,
         fontWeight: fontWeights.medium,
         fontSize: fontSizes.sm,
-        color: colors.textMuted,
+        color: t.muted,
         cursor: "default",
         display: "block",
         borderBottom: "none"
@@ -1318,7 +1445,7 @@ function Header({
     profileMenu.label
   ), profileMenu.items.map((item, idx) => {
     if (item.href) {
-      return /* @__PURE__ */ React2.createElement(
+      return /* @__PURE__ */ React3.createElement(
         "a",
         {
           key: idx,
@@ -1335,7 +1462,7 @@ function Header({
         item.label
       );
     }
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React3.createElement(
       "button",
       {
         key: idx,
@@ -1359,10 +1486,10 @@ function Header({
 }
 
 // src/SiteHeader.jsx
-import React4 from "react";
+import React5 from "react";
 
 // src/FeedbackButton.jsx
-import React3 from "react";
+import React4 from "react";
 var FEEDBACK_BASE_DEFAULT = "https://alpha.empowered.vote/feedback";
 var HOST_FEATURE_MAP = {
   "compass.empowered.vote": "compass",
@@ -1433,7 +1560,7 @@ function FeedbackButton({
     cursor: "pointer"
   };
   const baseStyle = variant === "link" ? linkStyle2 : pillStyle;
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     "a",
     {
       href,
@@ -1469,10 +1596,17 @@ var defaultNavItems = [
       { label: "Find Representatives", href: "https://essentials.empowered.vote" },
       { label: "Read & Rank", href: "https://readrank.empowered.vote" },
       { label: "Treasury Tracker", href: "https://treasurytracker.empowered.vote" },
+      { label: "Civic Trivia", href: "https://ctc.empowered.vote" },
       { label: "Empowered Badges", href: "https://badges.empowered.vote" }
     ]
   }
 ];
+var evAppLinks = [
+  { label: "Compass", href: "https://compass.empowered.vote" },
+  { label: "Find Representatives", href: "https://essentials.empowered.vote" },
+  { label: "Treasury Tracker", href: "https://treasurytracker.empowered.vote" },
+  { label: "Civic Trivia", href: "https://ctc.empowered.vote" }
+];
 var defaultCtaButton = {
   label: "Donate",
   href: "https://empowered.vote/donate"
@@ -1497,11 +1631,11 @@ function SiteHeader({
   if (secondaryAction === false) {
     resolvedSecondary = void 0;
   } else if (secondaryAction === void 0) {
-    resolvedSecondary = /* @__PURE__ */ React4.createElement(FeedbackButton, { feature: feedbackFeature });
+    resolvedSecondary = /* @__PURE__ */ React5.createElement(FeedbackButton, { feature: feedbackFeature });
   } else {
     resolvedSecondary = secondaryAction;
   }
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     Header,
     {
       logoSrc,
@@ -1518,7 +1652,7 @@ function SiteHeader({
 }
 
 // src/FilterSidebar.jsx
-import React5 from "react";
+import React6 from "react";
 function FilterSidebar({
   title = "Filter by",
   zipCode = "",
@@ -1672,14 +1806,14 @@ function FilterSidebar({
       fontSize: fontSizes.sm
     }
   };
-  return /* @__PURE__ */ React5.createElement("aside", { style: styles2.sidebar, className: "ev-filter-sidebar" }, !isMobile && /* @__PURE__ */ React5.createElement("h2", { style: styles2.title }, title), /* @__PURE__ */ React5.createElement("div", { style: isMobile ? void 0 : styles2.contentTop }, /* @__PURE__ */ React5.createElement("div", { style: isMobile ? { marginBottom: spacing[3] } : styles2.section }, !isMobile && /* @__PURE__ */ React5.createElement("label", { style: styles2.sectionLabel }, "Location"), autocompleteContainerRef ? /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement("aside", { style: styles2.sidebar, className: "ev-filter-sidebar" }, !isMobile && /* @__PURE__ */ React6.createElement("h2", { style: styles2.title }, title), /* @__PURE__ */ React6.createElement("div", { style: isMobile ? void 0 : styles2.contentTop }, /* @__PURE__ */ React6.createElement("div", { style: isMobile ? { marginBottom: spacing[3] } : styles2.section }, !isMobile && /* @__PURE__ */ React6.createElement("label", { style: styles2.sectionLabel }, "Location"), autocompleteContainerRef ? /* @__PURE__ */ React6.createElement(
     "div",
     {
       ref: autocompleteContainerRef,
       style: styles2.zipInputWrapper,
       className: "ev-autocomplete-container"
     }
-  ) : /* @__PURE__ */ React5.createElement("div", { style: styles2.zipInputWrapper }, /* @__PURE__ */ React5.createElement(
+  ) : /* @__PURE__ */ React6.createElement("div", { style: styles2.zipInputWrapper }, /* @__PURE__ */ React6.createElement(
     "input",
     {
       ref: zipInputRef,
@@ -1691,7 +1825,7 @@ function FilterSidebar({
       style: styles2.zipInput,
       "aria-label": "Search location"
     }
-  ), /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React6.createElement(
     "button",
     {
       type: "button",
@@ -1700,7 +1834,7 @@ function FilterSidebar({
       "aria-label": "Clear ZIP code"
     },
     "\xD7"
-  ))), /* @__PURE__ */ React5.createElement("div", { style: isMobile ? {} : styles2.section }, !isMobile && /* @__PURE__ */ React5.createElement("label", { style: styles2.sectionLabel }, "Group"), /* @__PURE__ */ React5.createElement("div", { style: styles2.radioGroup, role: "radiogroup", "aria-label": "Filter by group" }, filterOptions.map((option) => /* @__PURE__ */ React5.createElement("label", { key: option.value, style: styles2.radioLabel }, /* @__PURE__ */ React5.createElement(
+  ))), /* @__PURE__ */ React6.createElement("div", { style: isMobile ? {} : styles2.section }, !isMobile && /* @__PURE__ */ React6.createElement("label", { style: styles2.sectionLabel }, "Group"), /* @__PURE__ */ React6.createElement("div", { style: styles2.radioGroup, role: "radiogroup", "aria-label": "Filter by group" }, filterOptions.map((option) => /* @__PURE__ */ React6.createElement("label", { key: option.value, style: styles2.radioLabel }, /* @__PURE__ */ React6.createElement(
     "input",
     {
       type: "radio",
@@ -1710,18 +1844,18 @@ function FilterSidebar({
       onChange: () => onFilterChange == null ? void 0 : onFilterChange(option.value),
       style: styles2.radioInput
     }
-  ), option.label))))), !isMobile && /* @__PURE__ */ React5.createElement("div", { style: styles2.imageSection }, locationLabel && /* @__PURE__ */ React5.createElement("div", { style: styles2.locationLabel }, locationLabel), buildingImageSrc ? /* @__PURE__ */ React5.createElement(
+  ), option.label))))), !isMobile && /* @__PURE__ */ React6.createElement("div", { style: styles2.imageSection }, locationLabel && /* @__PURE__ */ React6.createElement("div", { style: styles2.locationLabel }, locationLabel), buildingImageSrc ? /* @__PURE__ */ React6.createElement(
     "img",
     {
       src: buildingImageSrc,
       alt: `${selectedFilter} government building`,
       style: styles2.buildingImage
     }
-  ) : /* @__PURE__ */ React5.createElement("div", { style: styles2.buildingPlaceholder }, "No image")));
+  ) : /* @__PURE__ */ React6.createElement("div", { style: styles2.buildingPlaceholder }, "No image")));
 }
 
 // src/PoliticianCard.jsx
-import React6, { useState as useState4, useEffect as useEffect5 } from "react";
+import React7, { useState as useState4, useEffect as useEffect5 } from "react";
 function PoliticianCard({
   id,
   imageSrc,
@@ -1873,7 +2007,7 @@ function PoliticianCard({
       textTransform: "uppercase"
     }
   };
-  const CompassIcon2 = () => /* @__PURE__ */ React6.createElement(
+  const CompassIcon2 = () => /* @__PURE__ */ React7.createElement(
     "svg",
     {
       style: styles2.compassIcon,
@@ -1881,7 +2015,7 @@ function PoliticianCard({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       "polygon",
       {
         points: "12,1 21.5,6.5 21.5,17.5 12,23 2.5,17.5 2.5,6.5",
@@ -1891,13 +2025,13 @@ function PoliticianCard({
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React6.createElement("line", { x1: "12", y1: "12", x2: "12", y2: "1", stroke: "currentColor", strokeWidth: "1" }),
-    /* @__PURE__ */ React6.createElement("line", { x1: "12", y1: "12", x2: "21.5", y2: "6.5", stroke: "currentColor", strokeWidth: "1" }),
-    /* @__PURE__ */ React6.createElement("line", { x1: "12", y1: "12", x2: "21.5", y2: "17.5", stroke: "currentColor", strokeWidth: "1" }),
-    /* @__PURE__ */ React6.createElement("line", { x1: "12", y1: "12", x2: "12", y2: "23", stroke: "currentColor", strokeWidth: "1" }),
-    /* @__PURE__ */ React6.createElement("line", { x1: "12", y1: "12", x2: "2.5", y2: "17.5", stroke: "currentColor", strokeWidth: "1" }),
-    /* @__PURE__ */ React6.createElement("line", { x1: "12", y1: "12", x2: "2.5", y2: "6.5", stroke: "currentColor", strokeWidth: "1" }),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement("line", { x1: "12", y1: "12", x2: "12", y2: "1", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ React7.createElement("line", { x1: "12", y1: "12", x2: "21.5", y2: "6.5", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ React7.createElement("line", { x1: "12", y1: "12", x2: "21.5", y2: "17.5", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ React7.createElement("line", { x1: "12", y1: "12", x2: "12", y2: "23", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ React7.createElement("line", { x1: "12", y1: "12", x2: "2.5", y2: "17.5", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ React7.createElement("line", { x1: "12", y1: "12", x2: "2.5", y2: "6.5", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ React7.createElement(
       "polygon",
       {
         points: "12,4 18,7.5 18,16 12,19.5 7,15 5,8",
@@ -1905,7 +2039,7 @@ function PoliticianCard({
         opacity: "0.35"
       }
     ),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       "polygon",
       {
         points: "12,4 18,7.5 18,16 12,19.5 7,15 5,8",
@@ -1926,7 +2060,7 @@ function PoliticianCard({
     const initials = parts.length >= 2 ? parts[0][0] + parts[parts.length - 1][0] : ((_a = parts[0]) == null ? void 0 : _a[0]) || "?";
     return initials.toUpperCase();
   };
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "div",
     {
       style: styles2.card,
@@ -1951,8 +2085,8 @@ function PoliticianCard({
         }
       }
     },
-    badge && /* @__PURE__ */ React6.createElement("span", { style: styles2.badge }, badge),
-    /* @__PURE__ */ React6.createElement("div", { style: styles2.imageWrapper }, imageSrc && !imgError ? /* @__PURE__ */ React6.createElement(
+    badge && /* @__PURE__ */ React7.createElement("span", { style: styles2.badge }, badge),
+    /* @__PURE__ */ React7.createElement("div", { style: styles2.imageWrapper }, imageSrc && !imgError ? /* @__PURE__ */ React7.createElement(
       "img",
       {
         src: imageSrc,
@@ -1960,9 +2094,9 @@ function PoliticianCard({
         style: styles2.image,
         onError: () => setImgError(true)
       }
-    ) : /* @__PURE__ */ React6.createElement("div", { style: styles2.imagePlaceholder }, getInitials(name))),
-    /* @__PURE__ */ React6.createElement("div", { style: styles2.content }, /* @__PURE__ */ React6.createElement("h3", { style: styles2.name }, name), /* @__PURE__ */ React6.createElement("p", { style: styles2.title }, title), subtitle && /* @__PURE__ */ React6.createElement("p", { style: styles2.subtitle }, subtitle), footer && /* @__PURE__ */ React6.createElement("div", { style: { marginTop: "auto", marginLeft: "-5px" } }, footer)),
-    onCompassClick && /* @__PURE__ */ React6.createElement(
+    ) : /* @__PURE__ */ React7.createElement("div", { style: styles2.imagePlaceholder }, getInitials(name))),
+    /* @__PURE__ */ React7.createElement("div", { style: styles2.content }, /* @__PURE__ */ React7.createElement("h3", { style: styles2.name }, name), /* @__PURE__ */ React7.createElement("p", { style: styles2.title }, title), subtitle && /* @__PURE__ */ React7.createElement("p", { style: styles2.subtitle }, subtitle), footer && /* @__PURE__ */ React7.createElement("div", { style: { marginTop: "auto", marginLeft: "-5px" } }, footer)),
+    onCompassClick && /* @__PURE__ */ React7.createElement(
       "button",
       {
         type: "button",
@@ -1977,7 +2111,7 @@ function PoliticianCard({
         },
         "aria-label": `View ${name}'s compass`
       },
-      /* @__PURE__ */ React6.createElement(CompassIcon2, null)
+      /* @__PURE__ */ React7.createElement(CompassIcon2, null)
     )
   );
 }
@@ -1985,83 +2119,6 @@ function PoliticianCard({
 // src/CompassCardHorizontal.jsx
 import React11, { useState as useState6, useEffect as useEffect6 } from "react";
 
-// src/PlaceholderRadar.jsx
-import React7 from "react";
-function PlaceholderRadar({ size = 250, name = "" }) {
-  const cx = size / 2;
-  const cy = size / 2;
-  const r = size / 2 * 0.65;
-  const n = 8;
-  const vertices = Array.from({ length: n }, (_, i) => {
-    const a = 2 * Math.PI * i / n;
-    return [cx + r * Math.sin(a), cy - r * Math.cos(a)];
-  });
-  const outerPts = vertices.map(([x, y]) => `${x},${y}`).join(" ");
-  const midPts = vertices.map(([x, y]) => `${cx + (x - cx) * 0.6},${cy + (y - cy) * 0.6}`).join(" ");
-  const innerPts = vertices.map(([x, y]) => `${cx + (x - cx) * 0.3},${cy + (y - cy) * 0.3}`).join(" ");
-  return /* @__PURE__ */ React7.createElement(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: `0 0 ${size} ${size}`,
-      role: "img",
-      "aria-label": name ? `${name} \u2014 compass data unavailable` : "compass data unavailable",
-      style: {
-        backgroundColor: colorScales.teal["050"],
-        borderRadius: borderRadius.sm,
-        flexShrink: 0
-      }
-    },
-    vertices.map(([x, y], i) => /* @__PURE__ */ React7.createElement(
-      "line",
-      {
-        key: i,
-        x1: cx,
-        y1: cy,
-        x2: x,
-        y2: y,
-        stroke: colorScales.gray["200"],
-        strokeWidth: "1",
-        strokeDasharray: "2 3",
-        opacity: "0.6"
-      }
-    )),
-    /* @__PURE__ */ React7.createElement(
-      "polygon",
-      {
-        points: innerPts,
-        fill: "none",
-        stroke: colorScales.gray["200"],
-        strokeWidth: "1",
-        strokeDasharray: "2 3",
-        opacity: "0.5"
-      }
-    ),
-    /* @__PURE__ */ React7.createElement(
-      "polygon",
-      {
-        points: midPts,
-        fill: "none",
-        stroke: colorScales.gray["200"],
-        strokeWidth: "1",
-        strokeDasharray: "3 3",
-        opacity: "0.6"
-      }
-    ),
-    /* @__PURE__ */ React7.createElement(
-      "polygon",
-      {
-        points: outerPts,
-        fill: "none",
-        stroke: colorScales.gray["200"],
-        strokeWidth: "1.5",
-        strokeDasharray: "4 3"
-      }
-    )
-  );
-}
-
 // src/CompassCardHorizontalMeta.jsx
 import React10 from "react";
 
@@ -6160,14 +6217,78 @@ function getDisplayUrl(url) {
     return url.length > 60 ? url.slice(0, 57) + "..." : url;
   }
 }
+var USER_DOT = "#7C6B9E";
+var POL_DOT_LIGHT = "#5A9A6E";
+var POL_DOT_DARK = "#6DD28C";
+function palette(darkMode) {
+  return darkMode ? {
+    rowBorder: "rgba(255,255,255,0.08)",
+    rowHover: "#1e2a3a",
+    // ev-navy-elevated
+    title: "#f3f4f6",
+    chipLabel: "#d1d5db",
+    sectionLabel: "#9ca3af",
+    // 6.24:1 on #1a2235 ✓ AA
+    reasoning: "#d1d5db",
+    chevron: "#9ca3af",
+    // 6.24:1 — bumped from #6b7280 (3.28) for clarity
+    pillActiveBg: "#1e2a3a",
+    pillActiveBorder: "rgba(255,255,255,0.14)",
+    pillIdleText: "#9ca3af",
+    // 6.24:1 ✓ AA
+    pillActiveText: "#f3f4f6",
+    link: "#59b0c4",
+    // 6.37:1 ✓ AA
+    sourceText: "#9ca3af",
+    quoteText: "#d1d5db",
+    quoteBorder: "rgba(255,255,255,0.14)",
+    emptyText: "#9ca3af",
+    // 6.24:1 — bumped from #6b7280 (3.28, failed AA)
+    spinnerTrack: "#374151",
+    polDot: POL_DOT_DARK,
+    agreedBg: "rgba(14,116,144,0.18)",
+    agreedText: "#67e8f9",
+    disagreedBg: "rgba(180,83,9,0.18)",
+    disagreedText: "#fbbf24"
+  } : {
+    rowBorder: "#f1f1f1",
+    rowHover: "#f9fafb",
+    title: "#262626",
+    chipLabel: "#525252",
+    sectionLabel: "#6b7280",
+    // 4.83:1 on white — bumped from #a3a3a3 (2.52, failed AA)
+    reasoning: "#404040",
+    chevron: "#6b7280",
+    // 4.83:1 — bumped from #a3a3a3 (2.52, failed 3:1)
+    pillActiveBg: "#fafafa",
+    pillActiveBorder: "#e5e5e5",
+    pillIdleText: "#737373",
+    // 4.74:1 ✓ AA
+    pillActiveText: "#171717",
+    link: "#00657c",
+    sourceText: "#737373",
+    quoteText: "#374151",
+    quoteBorder: "#e2e8f0",
+    emptyText: "#6b7280",
+    // 4.83:1 — bumped from #a3a3a3 (2.52, failed AA)
+    spinnerTrack: "#e2e8f0",
+    polDot: POL_DOT_LIGHT,
+    agreedBg: "#ecfeff",
+    agreedText: "#0e7490",
+    disagreedBg: "#fffbeb",
+    disagreedText: "#b45309"
+  };
+}
 function StanceAccordion({
   topics,
   polAnswers,
+  userAnswerMap = {},
   politicianId,
   allTopics,
   expandedTopics,
+  darkMode = false,
   verdictsByTopic,
-  // Record<string, 'agreed' | 'disagreed'> | undefined — DEPRECATED, no longer rendered
+  // DEPRECATED, no longer rendered
   verdictsByQuote,
   // Record<quote_id, 'agreed' | 'disagreed'> | undefined
   initialExpandedTopicId,
@@ -6179,6 +6300,7 @@ function StanceAccordion({
   const [showAll, setShowAll] = useState17(false);
   const contextCache = useRef4(/* @__PURE__ */ new Map());
   const quotesCache = useRef4(null);
+  const c = palette(darkMode);
   const polAnswerMap = {};
   if (polAnswers) {
     polAnswers.forEach((a) => {
@@ -6270,201 +6392,314 @@ function StanceAccordion({
       visibleTopics = [pinned, ...baseTopics.filter((t) => String(t.id) !== String(initialExpandedTopicId))];
     }
   }
+  const sectionLabelStyle = {
+    fontSize: "11px",
+    fontWeight: 600,
+    color: c.sectionLabel,
+    textTransform: "uppercase",
+    letterSpacing: "0.06em"
+  };
   return /* @__PURE__ */ React30.createElement(
     "div",
     {
-      className: "flex flex-col",
+      className: "ev-stance-panel flex flex-col",
       style: { fontFamily: "'Manrope', sans-serif" }
     },
-    /* @__PURE__ */ React30.createElement(
-      "h3",
-      {
-        className: "text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-2",
-        style: { fontSize: "12px" }
-      },
-      "Stance Breakdown"
-    ),
+    /* @__PURE__ */ React30.createElement("h3", { style: { ...sectionLabelStyle, marginBottom: "8px" } }, "Stance Breakdown"),
     visibleTopics.map((topic) => {
       const topicId = String(topic.id);
-      const value = polAnswerMap[topicId];
-      const label = getStanceLabel(topicId, value);
+      const polValue = polAnswerMap[topicId];
+      const userValue = userAnswerMap[topicId];
+      const label = getStanceLabel(topicId, polValue);
       const isExpanded = expandedTopicId === topicId;
       const isLoading = loadingId === topicId;
       const cached = contextCache.current.get(topicId);
       const fullTopic = topicById[topicId];
       const questionText = fullTopic == null ? void 0 : fullTopic.question_text;
+      const titleText = questionText || topic.short_title;
+      const stances = (fullTopic == null ? void 0 : fullTopic.stances) || topic.stances || [];
       const topicQuotes = quotesCache.current ? quotesCache.current.filter((q) => {
         if (!q.issue) return false;
         if (q.candidateId && q.candidateId !== politicianId) return false;
         if (topic.topic_key) return q.issue === topic.topic_key;
         return topic.short_title && q.issue.toLowerCase() === topic.short_title.toLowerCase();
       }) : [];
-      return /* @__PURE__ */ React30.createElement("div", { key: topicId, className: "border-b border-neutral-100" }, /* @__PURE__ */ React30.createElement(
-        "button",
+      return /* @__PURE__ */ React30.createElement(
+        "div",
         {
-          type: "button",
-          onClick: () => handleToggle(topicId),
-          className: "w-full flex items-center justify-between py-3 px-2 text-left cursor-pointer hover:bg-neutral-50 transition-colors"
+          key: topicId,
+          style: { borderBottom: `1px solid ${c.rowBorder}` }
         },
-        /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React30.createElement("span", { className: "text-sm font-medium text-neutral-800 truncate" }, topic.short_title), questionText && /* @__PURE__ */ React30.createElement("span", { className: "text-xs text-neutral-400 mt-0.5" }, questionText), /* @__PURE__ */ React30.createElement("span", { className: "text-xs text-neutral-500 mt-0.5" }, label)),
         /* @__PURE__ */ React30.createElement(
-          "svg",
+          "button",
           {
-            width: "16",
-            height: "16",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            className: "text-neutral-400 flex-shrink-0 ml-2",
+            type: "button",
+            onClick: () => handleToggle(topicId),
+            className: "w-full flex items-start justify-between text-left cursor-pointer",
             style: {
-              transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
-              transition: "transform 0.2s ease"
+              padding: "12px 8px",
+              background: "transparent",
+              border: "none",
+              transition: "background 0.15s ease",
+              borderRadius: "8px"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.background = c.rowHover;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "transparent";
             }
           },
-          /* @__PURE__ */ React30.createElement("polyline", { points: "9 18 15 12 9 6" })
-        )
-      ), /* @__PURE__ */ React30.createElement(
-        "div",
-        {
-          style: {
-            display: "grid",
-            gridTemplateRows: isExpanded ? "1fr" : "0fr",
-            transition: "grid-template-rows 0.25s ease"
-          }
-        },
-        /* @__PURE__ */ React30.createElement("div", { style: { overflow: "hidden" } }, /* @__PURE__ */ React30.createElement("div", { className: "px-2 pb-4" }, isLoading && /* @__PURE__ */ React30.createElement("div", { className: "flex items-center py-3" }, /* @__PURE__ */ React30.createElement(
-          "div",
-          {
-            style: {
-              width: "20px",
-              height: "20px",
-              border: "2px solid #e2e8f0",
-              borderTopColor: "#00657c",
-              borderRadius: "50%",
-              animation: "ev-spin 0.8s linear infinite"
+          /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col min-w-0", style: { gap: "5px" } }, /* @__PURE__ */ React30.createElement(
+            "span",
+            {
+              style: {
+                fontSize: "14px",
+                fontWeight: 600,
+                color: c.title,
+                lineHeight: 1.4
+              }
+            },
+            titleText
+          ), /* @__PURE__ */ React30.createElement("span", { style: { display: "flex", alignItems: "flex-start", gap: "8px" } }, /* @__PURE__ */ React30.createElement(
+            "span",
+            {
+              style: {
+                width: "8px",
+                height: "8px",
+                borderRadius: "50%",
+                backgroundColor: c.polDot,
+                flexShrink: 0,
+                marginTop: "6px"
+              }
             }
-          }
-        )), !isLoading && cached && /* @__PURE__ */ React30.createElement(React30.Fragment, null, cached.reasoning ? /* @__PURE__ */ React30.createElement(
-          "p",
-          {
-            className: "text-sm text-neutral-700 mb-3",
-            style: { whiteSpace: "pre-wrap", lineHeight: 1.6 }
-          },
-          cached.reasoning
-        ) : null, cached.sources && cached.sources.length > 0 && /* @__PURE__ */ React30.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React30.createElement("p", { className: "text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-1.5" }, "References"), /* @__PURE__ */ React30.createElement("ol", { className: "list-decimal list-inside space-y-1" }, cached.sources.map((src, i) => /* @__PURE__ */ React30.createElement("li", { key: i, className: "text-xs text-neutral-600" }, /* @__PURE__ */ React30.createElement(
-          "a",
-          {
-            href: src,
-            target: "_blank",
-            rel: "noreferrer",
-            className: "inline-flex items-center gap-1.5 hover:text-[#00657c] transition-colors"
-          },
-          /* @__PURE__ */ React30.createElement(Favicon, { url: src }),
-          /* @__PURE__ */ React30.createElement("span", { className: "underline underline-offset-2" }, getDisplayUrl(src))
-        ))))), topicQuotes.length > 0 && /* @__PURE__ */ React30.createElement("div", { style: { marginTop: "12px" } }, /* @__PURE__ */ React30.createElement(
-          "p",
+          ), /* @__PURE__ */ React30.createElement(
+            "span",
+            {
+              style: {
+                fontSize: "13px",
+                color: c.chipLabel,
+                lineHeight: 1.45
+              }
+            },
+            label
+          ))),
+          /* @__PURE__ */ React30.createElement(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: c.chevron,
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "flex-shrink-0 ml-2",
+              style: {
+                marginTop: "3px",
+                transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform 0.2s ease"
+              }
+            },
+            /* @__PURE__ */ React30.createElement("polyline", { points: "9 18 15 12 9 6" })
+          )
+        ),
+        /* @__PURE__ */ React30.createElement(
+          "div",
           {
             style: {
-              fontSize: "11px",
-              fontWeight: 600,
-              color: "#737373",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: "8px"
+              display: "grid",
+              gridTemplateRows: isExpanded ? "1fr" : "0fr",
+              transition: "grid-template-rows 0.25s ease"
             }
           },
-          "Quotes"
-        ), topicQuotes.map((quote) => {
-          const verdict = verdictsByQuote ? verdictsByQuote[quote.id] : void 0;
-          const borderColor = verdict === "agreed" ? "#0e7490" : verdict === "disagreed" ? "#b45309" : "#e2e8f0";
-          const sourceName = quote.source_name || quote.sourceName;
-          return /* @__PURE__ */ React30.createElement(
+          /* @__PURE__ */ React30.createElement("div", { style: { overflow: "hidden" } }, /* @__PURE__ */ React30.createElement("div", { style: { padding: "4px 8px 16px" } }, stances.length > 0 && /* @__PURE__ */ React30.createElement(React30.Fragment, null, (userValue > 0 || polValue > 0) && /* @__PURE__ */ React30.createElement(
             "div",
             {
-              key: quote.id,
               style: {
-                borderLeft: `3px solid ${borderColor}`,
-                paddingLeft: "10px",
-                paddingTop: "6px",
-                paddingBottom: "6px",
-                marginBottom: "8px"
+                display: "flex",
+                alignItems: "center",
+                gap: "14px",
+                marginBottom: "8px",
+                fontSize: "12px",
+                color: c.sourceText
               }
             },
-            /* @__PURE__ */ React30.createElement(
-              "p",
+            userValue > 0 && /* @__PURE__ */ React30.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React30.createElement("span", { style: { width: "9px", height: "9px", borderRadius: "50%", backgroundColor: USER_DOT } }), "You"),
+            /* @__PURE__ */ React30.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React30.createElement("span", { style: { width: "9px", height: "9px", borderRadius: "50%", backgroundColor: c.polDot } }), "Their stance")
+          ), /* @__PURE__ */ React30.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "6px", marginBottom: "14px" } }, stances.map((stance, i) => {
+            const stanceNum = i + 1;
+            const isUser = userValue === stanceNum;
+            const isPol = polValue === stanceNum;
+            const isActive = isUser || isPol;
+            return /* @__PURE__ */ React30.createElement(
+              "div",
               {
+                key: i,
                 style: {
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: "10px",
+                  padding: "10px 12px",
+                  borderRadius: "12px",
                   fontSize: "13px",
-                  fontStyle: "italic",
-                  color: "#374151",
-                  margin: 0,
-                  lineHeight: 1.5
-                }
-              },
-              quote.text
-            ),
-            verdict === "agreed" && /* @__PURE__ */ React30.createElement(
-              "span",
-              {
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: "4px",
-                  backgroundColor: "#ecfeff",
-                  color: "#0e7490",
-                  padding: "2px 8px",
-                  borderRadius: "9999px",
-                  fontSize: "11px",
-                  fontWeight: 500,
-                  marginTop: "4px",
-                  flexShrink: 0
-                }
-              },
-              /* @__PURE__ */ React30.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React30.createElement("path", { d: "M5 13l4 4L19 7" })),
-              "Agreed"
-            ),
-            verdict === "disagreed" && /* @__PURE__ */ React30.createElement(
-              "span",
-              {
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: "4px",
-                  backgroundColor: "#fffbeb",
-                  color: "#b45309",
-                  padding: "2px 8px",
-                  borderRadius: "9999px",
-                  fontSize: "11px",
-                  fontWeight: 500,
-                  marginTop: "4px",
-                  flexShrink: 0
+                  lineHeight: 1.4,
+                  border: `1px solid ${isActive ? c.pillActiveBorder : "transparent"}`,
+                  backgroundColor: isActive ? c.pillActiveBg : "transparent"
                 }
               },
-              /* @__PURE__ */ React30.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React30.createElement("path", { d: "M6 18L18 6M6 6l12 12" })),
-              "Disagreed"
-            ),
-            sourceName && /* @__PURE__ */ React30.createElement(
-              "a",
+              /* @__PURE__ */ React30.createElement(
+                "span",
+                {
+                  style: {
+                    flexShrink: 0,
+                    width: "30px",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "5px",
+                    paddingTop: "3px"
+                  }
+                },
+                isUser && /* @__PURE__ */ React30.createElement("span", { style: { width: "9px", height: "9px", borderRadius: "50%", backgroundColor: USER_DOT, boxShadow: `0 0 0 3px ${USER_DOT}33` } }),
+                isPol && /* @__PURE__ */ React30.createElement("span", { style: { width: "9px", height: "9px", borderRadius: "50%", backgroundColor: c.polDot, boxShadow: `0 0 0 3px ${c.polDot}33` } })
+              ),
+              /* @__PURE__ */ React30.createElement(
+                "span",
+                {
+                  style: {
+                    flex: 1,
+                    color: isActive ? c.pillActiveText : c.pillIdleText,
+                    fontWeight: isActive ? 500 : 400
+                  }
+                },
+                stance.text
+              )
+            );
+          }))), isLoading && /* @__PURE__ */ React30.createElement("div", { className: "flex items-center", style: { padding: "12px 0" } }, /* @__PURE__ */ React30.createElement(
+            "div",
+            {
+              style: {
+                width: "20px",
+                height: "20px",
+                border: `2px solid ${c.spinnerTrack}`,
+                borderTopColor: "#00657c",
+                borderRadius: "50%",
+                animation: "ev-spin 0.8s linear infinite"
+              }
+            }
+          )), !isLoading && cached && /* @__PURE__ */ React30.createElement(React30.Fragment, null, cached.reasoning ? /* @__PURE__ */ React30.createElement(
+            "p",
+            {
+              style: {
+                fontSize: "14px",
+                color: c.reasoning,
+                marginBottom: "12px",
+                whiteSpace: "pre-wrap",
+                lineHeight: 1.6
+              }
+            },
+            cached.reasoning
+          ) : null, cached.sources && cached.sources.length > 0 && /* @__PURE__ */ React30.createElement("div", { style: { marginTop: "8px" } }, /* @__PURE__ */ React30.createElement("p", { style: { ...sectionLabelStyle, marginBottom: "6px" } }, "References"), /* @__PURE__ */ React30.createElement("ol", { style: { listStyle: "decimal", listStylePosition: "inside", display: "flex", flexDirection: "column", gap: "4px" } }, cached.sources.map((src, i) => /* @__PURE__ */ React30.createElement("li", { key: i, style: { fontSize: "12px", color: c.sourceText } }, /* @__PURE__ */ React30.createElement(
+            "a",
+            {
+              href: src,
+              target: "_blank",
+              rel: "noreferrer",
+              className: "inline-flex items-center gap-1.5",
+              style: { color: c.link }
+            },
+            /* @__PURE__ */ React30.createElement(Favicon, { url: src }),
+            /* @__PURE__ */ React30.createElement("span", { style: { textDecoration: "underline", textUnderlineOffset: "2px" } }, getDisplayUrl(src))
+          ))))), topicQuotes.length > 0 && /* @__PURE__ */ React30.createElement("div", { style: { marginTop: "14px" } }, /* @__PURE__ */ React30.createElement("p", { style: { ...sectionLabelStyle, marginBottom: "8px" } }, "Quotes"), topicQuotes.map((quote) => {
+            const verdict = verdictsByQuote ? verdictsByQuote[quote.id] : void 0;
+            const borderColor = verdict === "agreed" ? c.agreedText : verdict === "disagreed" ? c.disagreedText : c.quoteBorder;
+            const sourceName = quote.source_name || quote.sourceName;
+            return /* @__PURE__ */ React30.createElement(
+              "div",
               {
-                href: quote.source_url || quote.sourceUrl,
-                target: "_blank",
-                rel: "noreferrer",
+                key: quote.id,
                 style: {
-                  display: "block",
-                  fontSize: "11px",
-                  color: "#00657c",
-                  marginTop: "3px",
-                  textDecoration: "none"
+                  borderLeft: `3px solid ${borderColor}`,
+                  paddingLeft: "10px",
+                  paddingTop: "6px",
+                  paddingBottom: "6px",
+                  marginBottom: "8px"
                 }
               },
-              sourceName
-            )
-          );
-        })), !cached.reasoning && (!cached.sources || cached.sources.length === 0) && topicQuotes.length === 0 && /* @__PURE__ */ React30.createElement("p", { className: "text-sm text-neutral-400 italic py-2" }, "No detailed reasoning available for this topic."))))
-      ));
+              /* @__PURE__ */ React30.createElement(
+                "p",
+                {
+                  style: {
+                    fontSize: "13px",
+                    fontStyle: "italic",
+                    color: c.quoteText,
+                    margin: 0,
+                    lineHeight: 1.5
+                  }
+                },
+                quote.text
+              ),
+              verdict === "agreed" && /* @__PURE__ */ React30.createElement(
+                "span",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    backgroundColor: c.agreedBg,
+                    color: c.agreedText,
+                    padding: "2px 8px",
+                    borderRadius: "9999px",
+                    fontSize: "11px",
+                    fontWeight: 500,
+                    marginTop: "4px",
+                    flexShrink: 0
+                  }
+                },
+                /* @__PURE__ */ React30.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React30.createElement("path", { d: "M5 13l4 4L19 7" })),
+                "Agreed"
+              ),
+              verdict === "disagreed" && /* @__PURE__ */ React30.createElement(
+                "span",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    backgroundColor: c.disagreedBg,
+                    color: c.disagreedText,
+                    padding: "2px 8px",
+                    borderRadius: "9999px",
+                    fontSize: "11px",
+                    fontWeight: 500,
+                    marginTop: "4px",
+                    flexShrink: 0
+                  }
+                },
+                /* @__PURE__ */ React30.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React30.createElement("path", { d: "M6 18L18 6M6 6l12 12" })),
+                "Disagreed"
+              ),
+              sourceName && /* @__PURE__ */ React30.createElement(
+                "a",
+                {
+                  href: quote.source_url || quote.sourceUrl,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  style: {
+                    display: "block",
+                    fontSize: "11px",
+                    color: c.link,
+                    marginTop: "3px",
+                    textDecoration: "none"
+                  }
+                },
+                sourceName
+              )
+            );
+          })), !cached.reasoning && (!cached.sources || cached.sources.length === 0) && topicQuotes.length === 0 && /* @__PURE__ */ React30.createElement("p", { style: { fontSize: "14px", color: c.emptyText, fontStyle: "italic", padding: "8px 0" } }, "No detailed reasoning available for this topic."))))
+        )
+      );
     }),
     hasToggle && /* @__PURE__ */ React30.createElement(
       "button",
@@ -6472,7 +6707,7 @@ function StanceAccordion({
         type: "button",
         onClick: () => setShowAll((v) => !v),
         className: "text-sm font-medium mt-2 px-2 py-1 self-start cursor-pointer hover:underline",
-        style: { color: "#00657c" }
+        style: { color: c.link }
       },
       showAll ? "Show fewer" : `Show all ${expandedTopics.length} topics`
     )
@@ -6500,6 +6735,7 @@ export {
   JudicialScorecard,
   LegislativeInlineSummary,
   LegislativeRecord,
+  PlaceholderRadar,
   PoliticianCard,
   PoliticianProfile,
   RadarChartCore,
@@ -6519,6 +6755,7 @@ export {
   defaultNavItems,
   duration,
   easing,
+  evAppLinks,
   evContext,
   focus,
   fontSizes,