/* VoteMargin layer on top of the shared shell in site.css */
:root { --dem: #7aa5ff; --rep: #ff8a80; --none: #24262d; }
.elections { --dot: 160, 145, 255; }
.elections .glow { background: radial-gradient(closest-side, rgba(79, 132, 224, 0.16), rgba(218, 84, 76, 0.07) 55%, transparent); }
.elections .hero h1 .wi { background-image: linear-gradient(100deg, #f5f5f7 26%, #9fbdf3 40%, #f2a7a1 54%, #f5f5f7 68%); }
.elections .app-icon { box-shadow: 0 30px 90px -20px rgba(120, 110, 255, 0.5), 0 0 0 1px var(--line); }
.elections .card { --glow: 140, 120, 255; }
.elections .card.rise.in { transform: none; } /* no tilt: maps stay still under the pointer */
.subnav .short { display: none; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.legendbar { margin-top: 28px; --d: 1050ms; }
.mlegend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: 13px; color: var(--dim); align-items: center; }
.mlegend span { display: inline-flex; gap: 6px; align-items: center; }
.sw { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.stack { display: grid; gap: 22px; padding-bottom: 80px; }
.card { display: grid; gap: 18px; padding: clamp(18px, 3vw, 32px); min-width: 0;
  background: linear-gradient(90deg, #2f62c6, #8db0ef 40%, #ee918a 60%, #b02a24) top / 100% 3px no-repeat, var(--glass); }
.card-head { display: grid; gap: 8px; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.card h2 { margin: 0; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.card h3 { margin: 4px 0 0; font-size: 15px; color: var(--dim); font-weight: 600; }
.nums { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.n { font-size: clamp(40px, 6vw, 58px); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.dash { color: var(--faint); font-size: 36px; }
.lbl { color: var(--dim); font-size: 14px; margin-right: 6px; }
.badge { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); }
.dem { color: var(--dem); } .rep { color: var(--rep); } .ok { color: #58c993; font-weight: 700; }
.muted { color: var(--dim); margin: 0; font-size: 14px; }
.mapwrap { display: grid; }
.usmap { width: 100%; height: auto; max-width: 900px; justify-self: center; }
.usmap path { stroke: var(--bg); stroke-width: 1.2; cursor: pointer; transition: opacity .2s; }
.usmap:hover path { opacity: .55; } .usmap path:hover, .usmap path:focus { opacity: 1; stroke: #fff; stroke-width: 2; outline: none; }
.ml { font: 600 13px -apple-system, "Segoe UI", sans-serif; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.ml-safe-d, .ml-likely-d, .ml-safe-r, .ml-likely-r { fill: #fff; } .ml-lean-d, .ml-tilt-d, .ml-tilt-r, .ml-lean-r { fill: #111318; }
.ml-none, .ml-even { fill: #6b6f7a; }
path.m-safe-d { fill: #2f62c6; } path.m-likely-d { fill: #4f84e0; } path.m-lean-d { fill: #8db0ef; } path.m-tilt-d { fill: #c6d6f6; }
path.m-tilt-r { fill: #f4cbc7; } path.m-lean-r { fill: #ee918a; } path.m-likely-r { fill: #da544c; } path.m-safe-r { fill: #b02a24; }
path.m-none { fill: var(--none); } path.m-even { fill: #8e86b8; } path.pending { opacity: .35; }
.m-safe-d { background: #2f62c6; } .m-likely-d { background: #4f84e0; } .m-lean-d { background: #8db0ef; } .m-tilt-d { background: #c6d6f6; }
.m-tilt-r { background: #f4cbc7; } .m-lean-r { background: #ee918a; } .m-likely-r { background: #da544c; } .m-safe-r { background: #b02a24; }
.m-none { background: var(--none); } .m-even { background: #8e86b8; } .m-held-d { background: #1b3c80; } .m-held-r { background: #7a1b17; }
.seatbar { position: relative; padding-top: 22px; }
.segs { display: flex; height: 34px; border-radius: 8px; overflow: hidden; gap: 2px; }
.seg { display: grid; place-content: center; font-size: 12px; font-weight: 650; color: #fff; min-width: 0; transform-origin: left; }
.seg.m-lean-d, .seg.m-tilt-d, .seg.m-tilt-r, .seg.m-lean-r { color: #111318; }
.need { position: absolute; top: 0; bottom: -4px; border-left: 2px dashed var(--text); }
.need span { position: absolute; top: -2px; left: 6px; font-size: 12px; white-space: nowrap; color: var(--text); }
.close { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.close li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.025); min-width: 0; }
.close .st { font-weight: 700; width: 26px; } .close .st.wide { width: 46px; }
.close .who { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .close i { color: var(--dim); font-style: normal; }
.chip { font-size: 12px; font-weight: 650; padding: 3px 8px; border-radius: 6px; color: #fff; white-space: nowrap; }
.chip.m-lean-d, .chip.m-tilt-d, .chip.m-tilt-r, .chip.m-lean-r { color: #111318; }
.tw { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } th { color: var(--dim); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
#tip { position: fixed; z-index: 20; pointer-events: none; background: #f5f5f7; color: #050506; font-size: 13px; padding: 7px 10px; border-radius: 8px; max-width: 280px; }
[hidden] { display: none !important; }
.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff5c68; margin-right: 7px; vertical-align: 1px; }
.notes { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; line-height: 1.55; max-width: 78ch; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ctabs { display: flex; gap: 6px; flex-wrap: wrap; }
.conf { display: grid; gap: 10px; }
.crow { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 12px; font-size: 14px; }
.cbar2 { height: 12px; border-radius: 6px; background: rgba(255,255,255,0.07); overflow: hidden; }
.cbar2 i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3fb37f, #58c993); }
.crow .cval { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.cstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 14px 0 10px; }
.cstats div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.025); min-width: 0; }
.cstats b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cstats span { color: var(--dim); font-size: 12px; }
.cbar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; gap: 2px; }
.cbar .r { background: #58c993; } .cbar .m { background: #f0b44c; } .cbar .p { background: rgba(255,255,255,0.16); }
.cpanel h4 { margin: 16px 0 8px; font-size: 12px; color: var(--dim); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.feed .what i { color: var(--dim); font-style: normal; font-size: 13px; margin-left: 6px; }
.ctabs button { font: inherit; font-size: 14px; color: var(--dim); background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.ctabs button span { opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }
.ctabs button[aria-selected="true"] { color: #050506; background: #f5f5f7; border-color: #f5f5f7; }
.feed li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(255,255,255,0.025); }
.feed time { color: var(--dim); font-size: 13px; min-width: 66px; font-variant-numeric: tabular-nums; }
.feed .what { flex: 1 1 220px; min-width: 0; } .feed .ours { color: var(--dim); font-size: 13px; white-space: nowrap; }
.rng { display: block; color: var(--dim); font-size: 12px; font-weight: 400; margin-top: 2px; white-space: nowrap; }
.flip { margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px;
  border-radius: 5px; border: 1px solid var(--line); } .miss { color: var(--rep); font-weight: 700; }
.card a { color: inherit; }
@media (max-width: 600px) { .ml { display: none; } .subnav .long { display: none; } .subnav .short { display: inline; }
  th, td { padding: 9px 7px; } td:last-child { white-space: nowrap; } .crow { grid-template-columns: 92px 1fr 78px; font-size: 13px; } }
@media (prefers-reduced-motion: no-preference) {
  .livedot { animation: beat 1.6s ease-out infinite; }
  @keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(255,92,104,.65); } 80%, 100% { box-shadow: 0 0 0 7px rgba(255,92,104,0); } }
  .in .seg { animation: grow 1.1s var(--ease) both; } @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .in .usmap path { animation: fade .8s var(--ease) backwards; } @keyframes fade { from { opacity: 0; } }
}

/* shell additions */
.brand .mark { width: 26px; height: 26px; border-radius: 7px; margin-right: 10px; }
.foot .flinks { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.foot .flinks a { color: var(--dim); } .foot .flinks a:hover { color: var(--text); }
.prose { display: grid; gap: 12px; max-width: 72ch; line-height: 1.6; } .prose p { margin: 0; }
.prose a, .legal a, .notes a, .lede a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.statelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; color: var(--dim); }
.legal h2 { font-size: 18px; margin: 10px 0 0; } .legal p { margin: 0; line-height: 1.6; max-width: 72ch; color: var(--dim); }

/* track record head-to-head */
.legend2 { display: flex; gap: 16px; font-size: 13px; color: var(--dim); }
.legend2 i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.k-us { background: linear-gradient(90deg, #4f84e0, #8db0ef); } .k-them { background: rgba(255,255,255,.35); }
.duel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.dset { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.dset h3 { margin: 0; font-size: 16px; color: var(--text); display: flex; justify-content: space-between; align-items: baseline; }
.dset h3 span { color: var(--dim); font-weight: 500; font-size: 13px; }
.drow { display: grid; gap: 6px; } .drow > span { font-size: 12px; color: var(--dim); }
.dbar { display: grid; grid-template-columns: 1fr 40px; gap: 8px; align-items: center; }
.dbar div { height: 10px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.dbar i { display: block; height: 100%; border-radius: 6px; }
.dbar b { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.dbar.us i { background: linear-gradient(90deg, #4f84e0, #8db0ef); } .dbar.them i { background: rgba(255,255,255,.35); }
.dbar.them b { color: var(--dim); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) { .in .dbar i { animation: grow 1s var(--ease) both; transform-origin: left; } }

/* primaries */
.pbars { display: grid; gap: 8px; }
.pbar { display: grid; grid-template-columns: minmax(120px, 210px) 1fr 44px; gap: 10px; align-items: center; font-size: 14px; }
.pbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar div { height: 12px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 6px; }
.primary.p-dem .pbar i { background: linear-gradient(90deg, #2f62c6, #8db0ef); }
.primary.p-rep .pbar i { background: linear-gradient(90deg, #b02a24, #ee918a); }
.pbar b { text-align: right; font-variant-numeric: tabular-nums; }
.notes i { color: var(--dim); font-style: normal; }
@media (prefers-reduced-motion: no-preference) { .in .pbar i { animation: grow 1s var(--ease) both; transform-origin: left; } }

.dlist { display: grid; gap: 16px; }
.dlist .drow > span { font-size: 14px; color: var(--text); font-weight: 600; }
.dlist .dbar { grid-template-columns: 1fr 64px; }