@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");

/* State Navigate IV core.
 * Shared tokens, civic foundations, one heading scale, one spacing scale,
 * authentication, footer, and header live here. Route CSS loads first and
 * retains only page-family layout, data visualization, and component rules.
 */

/* ========================================================================== */
/* INTEGRATED: legacy civic foundation */
/* ========================================================================== */

/* =========================================================
   STYLE GROUP INDEX
   01) Design Tokens and Theme
   02) Global Base and Element Defaults
   03) Page Shell and Core Surfaces
   04) Search and Filtering UI
   05) District, Candidate, and Election Components
   06) Layout Blocks and Navigation Containers
   07) Footer and Utility Bars
   08) Selector Menus and Dropdown Systems
   09) Legislator and Vote Modules
   10) Responsive Breakpoints
========================================================= */

/* =========================================================
   01) Design Tokens and Theme
========================================================= */
:root {
  --brand_orange: #fa824c;
  --atlas_orange: #f7ad8b;
  --brand_white: #FCFAF5;
  --off_white: #FCFAF5;
  --brand_black: #242220;
  --neutral: #FCFAF5;
  --header_bg: var(--brand_white);
  --brand_red: #c22424;
  --brand_blue: #3061c3;
  --brand_green: #1e7e60;
  --yea_color: #08a283;
  --nay_color: #c41c08;
  --lt_gray: #d6d2ca;
  --min_gray: #f1eee7;
  --gray: #656565;
  --dark_gray: #323232;
  --header_gray: #f5f5f5;
  --BLACK: #242220;
  --WHITE: #FCFAF5;
  --atlas-bg: #242220;
  --atlas-bubble-bg: #3f3e3c;
  --atlas-text: #f0f0f0;
  --black: var(--BLACK);
  --white: var(--WHITE);
  --purple: #7a30a4;
  --toggle_background: var(--brand_black);
  --footer_background: #242220;
  --inline_container_w: 2px;
  --dropdown_bg: rgb(255, 255, 255);
  /* Rating colors */
  /* Theme-invariant forecast colors. These are data encodings, not brand colors. */
  --rating-no-election-d: #173c64;
  --rating-uncontested-d: #1d4a7b;
  --rating-solid-d: #2b5f9f;
  --rating-very-likely-d: #4779b4;
  --rating-likely-d: #6c97c7;
  --rating-lean-d: #92b4d4;
  --rating-tilt-d: #b9cede;
  --rating-toss-up: #d5d1c8;
  --rating-tilt-r: #dfbfba;
  --rating-lean-r: #d79b95;
  --rating-likely-r: #ca766f;
  --rating-very-likely-r: #b9554f;
  --rating-solid-r: #a63833;
  --rating-uncontested-r: #812622;
  --rating-no-election-r: #5f1b18;
  --rating-tilt-i: #b8d7c8;
  --rating-lean-i: #90bea9;
  --rating-likely-i: #65a286;
  --rating-very-likely-i: #43866b;
  --rating-solid-i: #2f6d55;
  --rating-uncontested-i: #24523f;
  --rating-no-election-i: #17382c;
  --rating-tilt-p: #eadfbd;
  --rating-lean-p: #ddca91;
  --rating-likely-p: #d1b45f;
  --rating-very-likely-p: #c29c38;
  --rating-solid-p: #a77d22;
  --rating-uncontested-p: #7d5d19;
  --rating-no-election-p: #584114;
  --rating-no-rating: #a9a7a1;
  --rating-none: #d5d1c8;
  --pct_in: #314158;
  /* POll Colors */
  --red: #d02c2c;
  --orange: #de863c;
  --yellow: #dabc51;
}

/* dark mode */
[data-theme="dark"] {
  --brand_orange: #f7ad8b;
  --atlas_orange: #f7ad8b;
  --brand_white: #282828;
  --header_bg: #1c1c1c;
  --brand_green: #82e9c9;
  --brand_black: #f9f9f9;
  --off_white: #2c2c2c;
  --brand_red: #ff9e9e;
  --brand_blue: #9ec0ff;
  --yea_color: #3e9685;
  --nay_color: #c55050;
  --lt_gray: #575757;
  --min_gray: #393939;
  --gray: #d8d8d8;
  --dark_gray: #e3e3e3;
  --neutral: #282828;
  --main_text: var(--brand_white);
  --main_background: rgb(51, 51, 51);
  --toggle_background: var(--gray);
  --footer_background: rgb(28, 28, 28);
  --inline_container_w: 1px;
  --WHITE: rgb(240, 240, 240);
  --BLACK: #282828;

  --atlas-bg: #f1f1f1;
  --atlas-bubble-bg: #d8d8d8;
  --atlas-text: #242220;
  --purple: #c983d8;
  --dropdown_bg: rgb(240, 240, 240);
  /* Forecast encodings remain identical in both themes. */
  --rating-no-election-d: #173c64;
  --rating-uncontested-d: #1d4a7b;
  --rating-solid-d: #2b5f9f;
  --rating-very-likely-d: #4779b4;
  --rating-likely-d: #6c97c7;
  --rating-lean-d: #92b4d4;
  --rating-tilt-d: #b9cede;
  --rating-toss-up: #d5d1c8;
  --rating-tilt-r: #dfbfba;
  --rating-lean-r: #d79b95;
  --rating-likely-r: #ca766f;
  --rating-very-likely-r: #b9554f;
  --rating-solid-r: #a63833;
  --rating-uncontested-r: #812622;
  --rating-no-election-r: #5f1b18;
  --rating-tilt-i: #b8d7c8;
  --rating-lean-i: #90bea9;
  --rating-likely-i: #65a286;
  --rating-very-likely-i: #43866b;
  --rating-solid-i: #2f6d55;
  --rating-uncontested-i: #24523f;
  --rating-no-election-i: #17382c;
  --rating-tilt-p: #eadfbd;
  --rating-lean-p: #ddca91;
  --rating-likely-p: #d1b45f;
  --rating-very-likely-p: #c29c38;
  --rating-solid-p: #a77d22;
  --rating-uncontested-p: #7d5d19;
  --rating-no-election-p: #584114;
  --rating-no-rating: #a9a7a1;
  --rating-none: #d5d1c8;
  --pct_in: #cad5e2;
  /* Polling map overrides */
  --red: #c0353c;
  --orange: #c1824e;
  --yellow: #c0bf69;
  tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.05);
  }
}

/* IV routes inherit their palette from iv.css while legacy routes keep the
   historical tokens above. This bridge is intentionally scoped to .iv-page. */
.iv-page {
  --brand_orange: var(--iv-orange);
  --atlas_orange: var(--iv-orange-2);
  --brand_white: var(--iv-paper);
  --off_white: var(--iv-panel);
  --brand_black: var(--iv-ink);
  --neutral: var(--iv-paper);
  --header_bg: var(--iv-paper);
  --brand_red: var(--iv-red);
  --brand_blue: var(--iv-blue);
  --brand_green: var(--iv-green);
  --yea_color: var(--iv-green);
  --nay_color: var(--iv-red);
  --lt_gray: var(--iv-panel);
  --min_gray: var(--iv-rule-soft);
  --gray: var(--iv-neutral);
  --dark_gray: var(--iv-ink);
  --header_gray: var(--iv-panel);
  --BLACK: var(--iv-ink);
  --WHITE: var(--iv-paper);
  --black: var(--iv-ink);
  --white: var(--iv-paper);
  --purple: var(--iv-purple);
  --toggle_background: var(--iv-ink);
  --footer_background: var(--iv-strong-bg);
  --dropdown_bg: var(--iv-panel);
  --atlas-bg: var(--iv-strong-bg);
  --atlas-bubble-bg: var(--iv-strong-rule);
  --atlas-text: var(--iv-strong-text);
  --pct_in: var(--iv-neutral);
  --red: var(--iv-red);
  --orange: var(--iv-orange);
  --yellow: var(--iv-gold);
}

.iv-page .atlas-home-wrap {
  --atlas-brand-orange: var(--iv-orange-2);
  --atlas-brand-red: var(--iv-red);
  --atlas-brand-blue: var(--iv-blue);
  --atlas-account-bg: var(--iv-orange-2);
}

#theme-toggle {
  cursor: pointer;
  z-index: 10000;
  font-size: 12px;
  border-radius: 5px !important;
  font-weight: 700;
  padding: 6px 10px;
  background-color: var(--toggle_background);
  color: var(--brand_white);
  font-family: var(--iv-font-mono);
  text-transform: none;
}
/* =========================================================
   02) Global Base and Element Defaults: Base / Reset
========================================================= */
*,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0px !important;
}

html,
body {
  margin: 0;
  padding: 0;
  margin-top: 0px !important;
}

img,
svg {
  vertical-align: middle;
}

p {
  background: transparent;
}

.condensed-p{
  letter-spacing: -0.045em !important;
}

hr {
  border: 1px solid black;
  margin-top: 10px;
  z-index: 1;
}

/* =========================================================
   02) Global Base and Element Defaults: Typography
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6,
p,
text,
a {
  font-family: var(--iv-font-sans);
  font-weight: 400;
  color: var(--brand_black);
}

h4 {
  font-size: 24px;
}

ol {
  margin-left: 10px;
  list-style-type: lower-roman;
}

mark {
  background-color: var(--brand_orange);
  color: var(--brand_white);
  padding: 2px;
}
span,
label {
  font-family: var(--iv-font-mono);
}

strong,
code,
label {
  color: var(--brand_black);
}

/* =========================================================
   02) Global Base and Element Defaults: Form Controls
========================================================= */
select {
  font-family: var(--iv-font-mono);
  font-size: 16px;
  border-radius: 0px;
  border: none;
  border-bottom: 2px solid var(--brand_black);
  background-color: transparent;
  margin: 10px;
  font-weight: 400;
  padding: 3px;
  text-align: right;
  background: transparent;
  color: var(--brand_black);
}

input {
  font-family: var(--iv-font-mono);
  font-size: 16px;
  border-radius: 0px;
  border: none;
  border-bottom: 2px solid var(--brand_black);
  text-align: right;
}

/* adjust color input */
input[type="color"] {
  padding: 0;
  border: none;
  background: none;
  min-height: 40px;
  width: 40px;
  border-radius: 5px;
  margin: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

input:focus,
select:focus {
  outline: none;
}

select option {
  background-color: var(--brand_black);
  color: var(--brand_white);
}

@media (min-width: 801px) {
  select {
    font-size: 12px;
  }
}

/* =========================================================
   02) Global Base and Element Defaults: Tables
========================================================= */
table {
  border-collapse: separate;
  border-spacing: 0px;
}

td {
  border-bottom: 1px solid #d4d4d4;
  background: transparent;
  color: var(--brand_black);
}

table p {
  margin: 3px;
  padding: 3px;
  font-weight: 400;
  font-family: var(--iv-font-mono);
  font-size: 14px;
  background-color: transparent;
}

.demos-tables {
  background: transparent;
  display: flex;
  align-items: center;
  width: 100%;
}

.demos-cell {
  border: none;
  background: transparent;
  color: var(--brand_black);
  min-width: 0;
}

.demos-cell-label {
  flex: 0 0 20%;
}

.demos-cell-chart {
  flex: 1 1 80%;
}

.demos-tables td,
#footer td,
#map-select td,
#election-select td {
  border: none;
}

/* =========================================================
   03) Page Shell and Core Surfaces
========================================================= */

/* =========================================================
   Sticky banner
========================================================= */
#banner {
  position: sticky;
  top: 0px;
}

#svg_outer {
  width: 100%;
  text-align: center;
}

#featured-pages {
  width: min(95%, 820px);
  margin: 28px auto 24px;
  text-align: left;
}

#featured-pages[hidden] {
  display: none;
}

.featured-pages-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.featured-pages-kicker {
  margin: 0;
  font-family: var(--iv-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

#featured-pages-title {
  margin: 6px 0 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1;
}

.featured-pages-grid {
  display: block;
  text-align: center;
}

.featured-page-card {
  display: inline-flex;
  vertical-align: top;
  width: 100%;
  max-width: 20%;
  padding: 18px;
  margin: 0 12px 12px 0;
  border-radius: 18px;
  text-decoration: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background: var(--brand_white);
  color: var(--brand_black);
  border: 2px solid var(--brand_black);
  min-height: 200px;
  box-shadow: 0 16px 32px rgba(36, 34, 32, 0.12);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.featured-page-card:hover,
.featured-page-card:focus-visible {
  transform: translateY(-1px);
  background: var(--brand_black);
  color: var(--brand_white);
}

.featured-page-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
}

.featured-page-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.featured-page-state,
.featured-page-cta {
  font-family: var(--iv-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}

.featured-page-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-family: var(--iv-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}

.featured-page-badge::before {
  content: "\1F512";
  font-size: 11px;
  margin-right: 0px;
}

.featured-page-badge-live::before {
  content: "\25CF";
  color: var(--brand_orange);
  margin-right: 3px;
}

.featured-page-card[data-live="true"] {
  animation: featured-page-live-pulse 1.6s ease-in-out infinite alternate;
}

.featured-page-card[data-live="true"]:hover,
.featured-page-card[data-live="true"]:focus-visible {
  animation: none;
}

@keyframes featured-page-live-pulse {
  0% {
    background: var(--brand_white);
  }
  100% {
    background: var(--lt_gray);
  }
}

.featured-page-title {
  display: block;
  font-size: 24px;
  font-weight: 350;
  line-height: 1.05;
  color: inherit;
  text-align: left;
}

.featured-page-cta::after {
  content: " \2197";
}

@media (max-width: 640px) {
  #featured-pages {
    margin-top: 22px;
  }

  .featured-pages-grid {
    text-align: center;
  }

  .featured-page-card {
    width: 100%;
    max-width: 45%;
    min-height: 140px;
    padding: 14px;
    margin: 0 10px 10px 0;
    gap: 5px;
  }

  .featured-page-meta {
    gap: 6px;
  }

  .featured-page-badges {
    justify-content: center;
  }

  .featured-page-title {
    font-size: 16px;
  }
}

#banner-computer {
  background-color: white;
}

/* =========================================================
   District title / Top title
========================================================= */
#district-title {
  text-align: center;
  background: var(--brand_white);
  position: relative;
  overflow: hidden;
  margin-top: 60px;
  font-family: var(--iv-font-sans);
}

#district-title span {
  position: relative;
  z-index: 1;
}

#top-title {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -200%);
  opacity: 0;
  padding: 0;
  margin: 0;
  font-size: 20px;
  transition:
    transform 0.5s ease-out,
    opacity 0.3s ease-out;
  z-index: 1000;
  border-bottom: 2px solid transparent;
  background-color: white;
}

.not-found-panel {
  display: inline-block;
  width: min(95%, 1000px);
  padding: 36px 28px;
  border: var(--inline_container_w) solid var(--brand_black);
  border-radius: 10px;
  background: var(--brand_white);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

#top-title.visible {
  transform: translate(-50%, 10px);
  opacity: 1;
}

#page_name {
  font-size: 22px;
  font-family: var(--iv-font-mono);
  font-weight: 700;
  padding: 13.75px;
  width: min(95%, 880px);
  margin: 10px auto;
  margin-top: 80px;
  margin-bottom: 10px;
  border-radius: 10px;
  text-align: left;
  border: 2px solid var(--brand_black);
  background-color: var(--brand_black);
  color: var(--brand_white);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
#page_name_header {
  font-size: 16px;
  font-family: var(--iv-font-mono);
  font-weight: 700;
  height: 33.5px;
  background-color: var(--lt_gray);
  color: var(--brand_black);
  border-radius: 5px;
  padding: 5px 10px;
  text-align: center;
  display: none;
  position: fixed;
  top: 12.5px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1000;
}

/* =========================================================
   W-NOMINATE underline animation
========================================================= */
.wnom-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--brand_orange);
  width: 0%;
  animation: underlineSlide 1s forwards;
}

@keyframes underlineSlide {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* =========================================================
   Tooltip
========================================================= */
#election-tooltip {
  position: absolute;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
}

#election-tooltip p {
  margin: 0px;
  padding: 0px;
  font-weight: 500;
  font-family: var(--iv-font-mono);
  font-size: 14px;
}

body:not(.iv-district-summary) #election-tooltip.legacy-election-tooltip {
  z-index: 2000;
  box-sizing: border-box;
  width: min(300px, calc(100vw - 24px));
  padding: 12px 14px;
  pointer-events: none;
  color: #FCFAF5;
  background: #242220;
  border: 1px solid #242220;
  border-top: 4px solid var(--legacy-tooltip-accent, #fa824c);
  border-radius: 5px;
  box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
}

body:not(.iv-district-summary) #election-tooltip .legacy-tooltip-kicker {
  margin-bottom: 4px;
  color: #d6d2ca;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

body:not(.iv-district-summary) #election-tooltip .legacy-tooltip-title {
  margin: 0 0 10px;
  color: #FCFAF5;
  font-family: var(--iv-font-sans);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
}

body:not(.iv-district-summary) #election-tooltip .legacy-tooltip-results {
  padding-top: 6px;
  border-top: 1px solid #65615c;
}

body:not(.iv-district-summary) #election-tooltip .legacy-tooltip-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 4px 0;
  font-family: var(--iv-font-mono);
  font-size: 11px;
  line-height: 1.3;
}

body:not(.iv-district-summary) #election-tooltip .legacy-tooltip-row > span:not(.legacy-tooltip-party) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.iv-district-summary) #election-tooltip .legacy-tooltip-row strong {
  color: #FCFAF5;
  font-weight: 600;
  white-space: nowrap;
}

body:not(.iv-district-summary) #election-tooltip .legacy-tooltip-party {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

body:not(.iv-district-summary) #election-tooltip .legacy-tooltip-margin,
body:not(.iv-district-summary) #election-tooltip .legacy-tooltip-empty {
  margin-top: 7px;
  color: #d6d2ca;
  font-size: 11px;
  line-height: 1.35;
}

#tooltip,
#tooltip p {
  color: var(--BLACK);
}

/* =========================================================
   Vote info block
========================================================= */

.bill-number {
  text-decoration: underline;
  margin: 2px;
  color: white;
}

.vote-id {
  font-weight: 400;
  text-decoration: none;
  color: white;
}

.bill-title {
  text-decoration: underline;
  margin: 2px;
  font-weight: 500;
  color: white;
}

.bill-description {
  font-weight: 350;
  margin: 2px;
  color: white;
}

#vote-abstract p {
  color: var(--brand_black);
  text-align: left;
}

/* =========================================================
   Horizontal scroller
========================================================= */
#top-wheel {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: center;
}

.top_wheel_box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 0 2px;
  background-color: var(--brand_white);
  border-radius: 5px;
  text-align: center;
  font-family: var(--iv-font-mono);
  font-size: 14px;
  border: var(--inline_container_w) solid var(--brand_black);
  font-weight: 700;
  flex: 0 0 auto;
}

#top-wheel div:hover {
  background-color: var(--lt_gray);
  cursor: pointer;
}

#top-wheel::-webkit-scrollbar {
  height: 16px;
  display: block;
}

#top-wheel::-webkit-scrollbar-thumb {
  background-color: var(--lt_gray);
  border-radius: 2.5px;
}

#scroll-arrow {
  position: absolute !important;
  display: inline-block;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-family: var(--iv-font-mono);
  color: var(--brand_black);
  pointer-events: none;
  z-index: 2;
  padding: 0px !important;
  margin: 0px;
}

#top-wheel-container-2 {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}

/* =========================================================
   Forecast items
========================================================= */
#forecast_margin {
  font-weight: 700;
  font-family: var(--iv-font-mono);
  color: var(--brand_black) !important;
}

#forecast_link_ds {
  font-family: var(--iv-font-mono);
  font-weight: 600;
  background-color: var(--brand_black);
  color: var(--brand_white);
  padding: 8px 12px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 13px;
}

/* =========================================================
   Buttons / Links
========================================================= */

button {
  background-color: var(--brand_black);
  color: var(--brand_white);
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.orange_links {
  background-color: var(--brand_orange);
  font-family: var(--iv-font-mono);
  font-weight: 800;
  color: var(--brand_white);
  border-radius: 5px;
  padding: 8px 16px;
  margin: 10px;
  text-decoration: none;
  display: inline-block;
}

.orange_links:hover {
  border: 2px solid var(--brand_orange);
  padding: 6px 14px;
  background-color: var(--brand_white);
  color: var(--brand_orange);
}

/* =========================================================
   Vote search bar / filters
========================================================= */
/* =========================================================
   04) Search and Filtering UI
========================================================= */
/* ===============================
   Vote Query Wrapper
================================ */
#vote-query-wrapper {
  position: sticky;
  top: 70px;
  z-index: 100;
  margin-bottom: 20px;
}

/* ===============================
   Search Bar
================================ */
#vote-search-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;

  padding: 12px 16px;
  border: 2px solid var(--brand_black);
  border-radius: 10px;
  background: var(--brand_white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  position: relative;
  z-index: 200;
}

#vote-search {
  width: 250px;
  border: 1px solid var(--brand_black);
  background: var(--brand_black);
  text-align: right;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
  color: var(--brand_white);
  margin-left: auto;
}
#vote-search::placeholder {
  color: var(--lt_gray);
}

#clear-search {
  display: none;
  padding: 6px 10px;
  background: var(--brand_red);
  cursor: pointer;
  font-weight: 800;
}

#filter-toggle {
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  border: 1px solid var(--brand_black);
  background: var(--lt_gray);
  cursor: pointer;
  color: var(--brand_black);
}

/* ===============================
   Filter Panel (Overlay)
================================ */
#vote-filter-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(100%, 400px);

  background: white;
  border: 1px solid var(--brand_black);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);

  padding: 5px;

  display: none;
  z-index: 150;

  text-align: right;
}

#vote-filter-panel table td {
  border: none;
  padding: 5px;
  vertical-align: bottom;
  width: 33%;
  text-align: right;
}
#vote-filter-panel table {
  width: calc(100% - 10px);
}
/* ===============================
   Filter Rows
================================ */
/* Filter rows as fixed grid */
.filter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 18px;
}

/* Each grid cell becomes right-anchored */
.filter-row label {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* RIGHT edge anchor */
  justify-content: flex-end;
  text-align: right;
  color: var(--BLACK);
}

/* ===============================
   Labels (Right-Aligned Columns)
================================ */
#vote-filter-panel label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;

  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  color: var(--BLACK);
}

/* ===============================
   Inputs & Selects (Underline Style)
================================ */
#vote-filter-panel input,
#vote-filter-panel select {
  width: 80%;

  text-align: right;
  font-size: 12px;

  border: none;
  border-bottom: 2px solid var(--BLACK);
  background: transparent;
  padding: 4px;
  margin: 0px;
  margin-top: 10px;
  color: var(--BLACK) !important;
}

/* Safari / Chrome select alignment */

/* ===============================
   Inline Inputs (Cut Angle / Yea %)
================================ */
.inline-input {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.inline-input select,
.inline-input input {
  width: 70px;
}

/* ===============================
   Actions
================================ */
.filter-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

#filter-close {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;

  border: 1px solid var(--brand_black);
  border-radius: 8px;

  background-color: var(--lt_gray);
  color: var(--brand_black);
  cursor: pointer;
}

/* ===============================
   Responsive
================================ */

/* =========================================================
   05) District, Candidate, and Election Components
========================================================= */

/* =========================================================
   Candidate bits
========================================================= */
#candidate-party {
  font-family: var(--iv-font-mono);
  text-align: center;
  font-size: 14px;
  display: inline-block;
  margin: 0px;
  padding: 5px;
  border-radius: 5px;
  font-weight: 800 !important;
  margin-right: 10px;
}
#candidate-party h6 {
  margin: 2px;
}
.candidate-party {
  font-family: var(--iv-font-mono);
  text-align: center;
  font-size: 14px;
  display: inline-block;
  margin: 0px;
  padding: 5px;
  border-radius: 5px;
  color: var(--brand_white);
  font-weight: 800 !important;
}

.secondary-party {
  font-family: var(--iv-font-mono);
  text-align: center;
  font-size: 12px;
  display: inline-block;
  margin: 0px;
  padding: 3px;
  border-radius: 3px;
  color: var(--WHITE);
  font-weight: 700 !important;
  margin-top: 5px;
}

#candidate-name h4 {
  margin: 5px;
  font-family: var(--iv-font-mono);
  font-weight: 900;
  font-size: 18px;
  margin-top: 10px;
}
.district-label {
  font-family: var(--iv-font-mono);
  font-weight: 700;
  font-size: 15px;
  margin: 0px;
  margin-bottom: 10px;
  color: var(--brand_black);
}
#candidate-name-leg h4 {
  margin: 5px;
  font-family: var(--iv-font-mono);
  font-weight: 700;
  font-size: 14px;
  margin-top: 10px;
}

#candidate-image1 img {
  height: 250px;
  width: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}
#candidate-image-leg img {
  height: 187.5px;
  width: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

#forecast_data {
  display: none;
}

.cand_div img {
  height: 115px;
  margin: 0px auto;
  border-radius: 10px;
  border: 1px solid var(--brand_black);
}

.cand_div {
  display: inline-block;
  height: 120px;
}

.info_div {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  vertical-align: middle;
  margin-left: 10px;
  height: 120px;
}

/* =========================================================
   Incumbent / legislator links
========================================================= */
#incumbent-img img {
  height: 100px;
  border-radius: 50%;
  margin-right: 10px;
  text-align: center;
  margin: 0px;
}

#incumbent-name h5 {
  text-align: center;
  font-size: 18px;
  display: inline-block;
  margin: 0px;
  margin-bottom: 10px;
}

.legislator-link {
  font-family: var(--iv-font-mono);
  color: var(--brand_white);
  margin-top: 10px;
  font-weight: 500;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  display: inline-block;
  word-break: break-word;
  white-space: normal;
  text-align: center;
  max-width: 110px;
}

.empty-legislator {
  color: var(--brand_black);
  margin-left: 0px;
  font-weight: 500;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  margin-top: 10px;
}

.inc_buttons {
  font-family: var(--iv-font-mono);
  font-size: 14px;
  font-weight: 500;
  background-color: var(--brand_black);
  color: var(--brand_white);
  text-align: center;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

.inc_buttons:hover {
  background-color: var(--brand_white);
  color: var(--brand_black);
  border: 2px solid var(--brand_black);
  padding: 3px 8px;
  font-weight: 700;
}

#multi_incs {
  margin-bottom: 15px;
}

#multi_incs p {
  font-family: var(--iv-font-mono);
  font-size: 14px;
  font-weight: 400;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  display: inline-block;
}

#incumbent_label {
  font-family: var(--iv-font-mono);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
}

/* =========================================================
   Layout helpers
========================================================= */
/* =========================================================
   06) Layout Blocks and Navigation Containers
========================================================= */
.containerMAP {
  display: flex !important;
  width: 100% !important;
}

.left,
.right {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

.valign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* PAYALL */
.site-auth-access-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  font-family: var(--iv-font-sans);
}
.site-auth-access-modal,
.site-auth-access-modal * {
  font-family: var(--iv-font-sans);
}
.site-auth-access-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-auth-access-modal__dialog {
  position: relative;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: 4vh auto 0;
  background: var(--brand_white);
  color: var(--brand_black);
  border: 1px solid rgba(46, 40, 36, 0.1);
  border-radius: 14px;
  padding: 32px 32px 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  transform: translateY(8px);
  opacity: 0;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.site-auth-access-modal.is-visible .site-auth-access-modal__dialog {
  transform: translateY(0);
  opacity: 1;
}
.site-auth-access-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--gray);
  transition: color 0.15s;
}
.site-auth-access-modal__close:hover {
  color: var(--brand_black);
}

.site-auth-access-modal__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand_orange);
  font-family: var(--iv-font-mono);
  display: inline-block;
  padding: 2px;
  text-transform: uppercase;
}
.site-auth-access-modal__title {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.15;
  text-transform: none;
  font-weight: 700;
}
.site-auth-access-modal__subtitle {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray);
}

.site-auth-access-modal__tier {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--brand_black);
  background-color: #f7ad8b;
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
}

.site-auth-access-modal__body {
  font-size: 14px;
  line-height: 1.6;
}

.site-auth-access-modal__form {
  display: grid;
  gap: 14px;
}

.site-auth-access-modal__field {
  display: grid;
  gap: 6px;
}
.site-auth-access-modal__field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--brand_black);
}

.site-auth-access-modal__field input,
.site-auth-access-modal__field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--lt_gray);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;
  background: var(--brand_white);
  color: var(--brand_black);
}
.site-auth-access-modal__field input:focus,
.site-auth-access-modal__field select:focus {
  outline: none;
  border-color: var(--brand_orange);
  box-shadow: 0 0 0 3px rgba(250, 130, 76, 0.18);
}

.site-auth-access-modal__field-with-action {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.site-auth-access-modal__field-with-action input {
  flex: 1 1 auto;
  min-width: 0;
}

.site-auth-access-modal__password-toggle {
  flex: 0 0 auto;
  appearance: none;
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--lt_gray);
  color: var(--brand_black);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    color 0.15s;
}

.site-auth-access-modal__password-toggle:hover {
  border-color: var(--brand_orange);
}

.site-auth-access-modal__password-toggle[aria-pressed="true"] {
  background: var(--brand_black);
  border-color: var(--brand_black);
  color: var(--brand_white);
}

[data-theme="dark"] .site-auth-access-modal__password-toggle {
  background: rgba(34, 34, 34, 0.92);
}

[data-theme="dark"]
  .site-auth-access-modal__password-toggle[aria-pressed="true"] {
  background: var(--brand_orange);
  border-color: var(--brand_orange);
  color: var(--brand_white);
}

.password-toggle {
  max-width: 50px;
}

.site-auth-access-modal__inline-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.site-auth-access-modal__submit {
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  background: #f7ad8b;
  color: var(--brand_black);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.site-auth-access-modal__submit:hover {
  opacity: 0.88;
}
.site-auth-access-modal__link {
  background-color: var(--lt_gray);
  padding: 8px 14px;
  color: var(--brand_black);
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
.site-auth-access-modal__text-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--brand_orange);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  justify-self: start;
  padding: 0;
}
.site-auth-access-modal__helper {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray);
}

.site-auth-access-modal__terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--brand_black);
}


.site-auth-access-modal__terms a {
  color: var(--brand_orange);
  font-weight: 600;
  text-decoration: none;
}

.site-auth-access-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.site-auth-access-modal__button {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.site-auth-access-modal__button:hover {
  opacity: 0.88;
}
.site-auth-access-modal__button--primary {
  background: var(--brand_orange);
  color: var(--brand_white);
}
.site-auth-access-modal__button--secondary,
[data-theme="dark"] .site-auth-access-modal__button--secondary {
  background: var(--brand_black);
  color: var(--brand_white);
}
.site-auth-access-modal__status {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray);
  min-height: 20px;
  display: block;
}

.site-auth-access-modal__status[data-status-tone="error"] {
  color: var(--brand_red);
}
.site-auth-access-modal__status[data-status-tone="success"] {
  color: var(--brand_green);
}

.site-auth-preview-lock {
  position: relative;
  overflow: hidden;
  border-radius: var(--site-auth-preview-radius, 14px);
}
.site-auth-preview-lock > :not(.site-auth-preview-lock__overlay) {
  opacity: var(--site-auth-preview-opacity, 0.3);
  filter: saturate(0.8) blur(0.6px);
}
.site-auth-preview-lock[data-site-auth-mask-text="true"]
  > :not(.site-auth-preview-lock__overlay)
  :is(
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    a,
    button,
    label,
    li,
    strong,
    em,
    small,
    select,
    option,
    input,
    textarea
  ) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  background-image: none !important;
}
.site-auth-preview-lock[data-site-auth-mask-text="true"]
  > :not(.site-auth-preview-lock__overlay)
  svg
  text {
  fill: transparent !important;
  stroke: transparent !important;
}
.site-auth-preview-lock__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  text-align: center;
  font-family: var(--iv-font-sans);
  border-radius: inherit;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-auth-preview-lock__card {
  width: 100%;
  max-width: var(--site-auth-preview-card-width, 420px);
  padding: 32px 28px 24px;
  border: 1px solid rgba(46, 40, 36, 0.1);
  border-radius: 14px;
  background: var(--brand_white);
  color: var(--brand_black);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .site-auth-preview-lock__card {
  background: #262626;
  color: rgba(255, 248, 235, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
}
.site-auth-preview-lock__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand_orange);
  font-family: var(--iv-font-sans);
}
.site-auth-preview-lock__title {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  text-transform: none;
  color: var(--brand_black);
  font-family: var(--iv-font-sans);
}

.site-auth-preview-lock__body {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray);
  font-family: var(--iv-font-sans);
}

.site-auth-preview-lock__button {
  display: inline-block;
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  background: var(--brand_orange);
  color: var(--brand_white);
  text-decoration: none;
  font-family: var(--iv-font-sans);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.site-auth-preview-lock__button:hover {
  opacity: 0.88;
}

@media (max-width: 640px) {
  .site-auth-access-modal__dialog {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: 12px auto 0;
    padding: 24px 20px 22px;
  }

  .site-auth-access-modal__field-with-action {
    gap: 8px;
  }

  .site-auth-access-modal__password-toggle {
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
  }

  .site-auth-access-modal__actions {
    margin-top: 18px;
  }

  .site-auth-access-modal__title {
    font-size: 22px;
  }

  .site-auth-preview-lock__card {
    max-width: 360px;
    padding: 24px 20px 20px;
  }

  .site-auth-preview-lock__title {
    font-size: 20px;
  }

  .site-auth-preview-lock__body,
  .site-auth-preview-lock__button {
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  #popup-dialog {
    margin-top: 7vh;
    padding: 28px 20px 22px;
  }

  #popup-actions {
    flex-direction: column;
  }

  #popup-donate,
  #popup-dismiss {
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   Map select
========================================================= */
.map_select select {
  background-color: var(--brand_black);
  color: var(--brand_white);
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
}

#election-div {
  min-height: 700px;
}

/* =========================================================
   Page cover + return home
========================================================= */
#page-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--brand_white);
  z-index: 9999;
}

#return-home {
  position: fixed;
  bottom: 50px;
  left: 0px;
  z-index: 1000;
  cursor: pointer;
  border-radius: 0px 5px 5px 0px;
  background-color: var(--brand_black);
  color: var(--brand_white);
  padding: 10px 10px 10px 5px;
  font-size: 18px;
  font-family: var(--iv-font-mono);
  text-decoration: none;
  font-weight: 600;
}

/* =========================================================
   Data toggles / state pills
========================================================= */
.dd_button {
  margin: 0px;
  display: inline-block;
  background-color: var(--lt_gray);
  font-family: var(--iv-font-mono);
  color: var(--brand_black);
  font-size: 16px;
}

.dd_button.selected {
  margin: 0px;
  display: inline-block;
  background-color: var(--brand_orange);
  font-family: var(--iv-font-mono);
  color: var(--brand_white);
  font-size: 16px;
  font-weight: 700;
}

.data-item {
  padding: 2px;
  cursor: pointer;
}

.data-item:hover {
  background-color: var(--lt_gray);
  border-radius: 3px;
}

.data-item:hover p {
  font-weight: 800;
  color: var(--brand_black) !important;
}

.state-item {
  display: inline-block;
  border-radius: 5px;
  margin: 3px;
  padding: 3px;
}

.state-item.active {
  background-color: var(--brand_black);
}

.state-item.active p {
  color: var(--brand_white);
}

.state-item.active h2 {
  color: var(--brand_white);
  border-bottom: 2px solid var(--brand_white) !important;
}

.state-item.active span {
  color: var(--brand_black);
  background-color: var(--brand_white) !important;
}

/* =========================================================
   Misc IDs
========================================================= */

.other_candidate_link {
  font-family: var(--iv-font-mono);
  color: var(--lt_gray);
  margin-right: 10px;
  margin-left: 0px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 12px;
  text-decoration: none;
  background-color: var(--brand_black);
  display: inline-block;
  margin-top: 10px;
}

#mode-select {
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 20px;
  background-color: var(--brand_black);
  color: var(--brand_white);
  border-radius: 5px;
}

th {
  border-bottom: 2px solid var(--brand_black);
  text-align: right;
}

#live_en_title {
  font-size: 30px;
  font-weight: 350;
  text-align: center;
  margin-top: 20px;
  display: inline-block;
  margin: 0px auto;
  max-width: 95%;
  text-underline-offset: 8px;
  line-height: 1.5;
}

.loading-message {
  text-align: center;
  font-family: var(--iv-font-mono);
  font-size: 16px;
  font-weight: 500;
  margin: 20px;
  background-color: var(--brand_black);
  color: var(--brand_white);
}

#account-text {
  font-family: var(--iv-font-mono);
  font-size: 14px;
  font-weight: 400;
  background-color: var(--brand_black);
  width: min(100%, 600px);
  color: var(--brand_white);
  padding: 5px;
  border-radius: 5px;
  margin: 0px auto;
}

.district-margin {
  text-align: center;
  padding: 3px;
  font-size: 16px;
  margin: 0px;
  font-family: var(--iv-font-mono);
  font-weight: 400 !important;
}

/* =========================================================
   Election-night winner bars / odds
========================================================= */
.winner_called {
  display: none;
  font-weight: 800;
  color: var(--brand_white);
}

.winner_called.DEMWIN {
  background-color: var(--brand_blue);
  padding: 5px;
}

.winner_called.REPWIN {
  background-color: var(--brand_red);
  padding: 5px;
}

.rep_win_top {
  background-color: var(--brand_red);
  color: var(--brand_white);
  padding: 2px 3px;
  border-radius: 3px;
  font-weight: 700;
}

.dem_win_top {
  background-color: var(--brand_blue);
  color: var(--brand_white);
  padding: 2px 3px;
  border-radius: 3px;
  font-weight: 700;
}

.win_div {
  width: 98%;
  margin-left: 1%;
}

.no_winner_called {
  margin: 0px;
}

.win_div p {
  margin: 3px;
  font-family: var(--iv-font-mono);
  font-size: 14px;
}

.dem_win_line {
  height: 5px;
  background-color: var(--brand_blue);
  margin-bottom: 0px;
  width: 50%;
  display: absolute;
}

.tie_line {
  height: 5px;
  background-color: var(--lt_gray);
  margin-bottom: 0px;
  width: 0%;
  display: absolute;
}

.rep_div p {
  text-align: right;
}

.dem_seats_won {
  color: var(--brand_black);
  font-weight: 700;
  border-bottom: 2px solid var(--brand_blue);
}

.rep_seats_won {
  color: var(--brand_black);
  font-weight: 700;
  border-bottom: 2px solid var(--brand_red);
}

.dem_vote_current {
  color: var(--brand_black);
  font-weight: 700;
  border-bottom: 2px solid var(--brand_blue);
}

.rep_vote_current {
  color: var(--brand_black);
  font-weight: 700;
  border-bottom: 2px solid var(--brand_red);
}

.conf_int_txt {
  font-size: 12px;
  font-family: var(--iv-font-mono);
  font-weight: 350;
  color: var(--brand_black);
  margin-right: 7px;
}

.mid_txt {
  font-size: 17px;
  font-family: var(--iv-font-mono);
  font-weight: 800;
  color: var(--brand_black);
  margin-right: 7px;
}

.mid_txt_vote {
  font-size: 14px;
  font-family: var(--iv-font-mono);
  font-weight: 800;
  color: var(--brand_black);
  margin-right: 7px;
}

#win_line {
  display: flex;
  align-items: center;
  position: relative;
}

.winner_text {
  margin: 0;
  color: white;
  font-weight: 700;
  position: absolute;
}

.odds_button {
  background-color: var(--brand_white);
  color: var(--brand_black);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 5px;
  font-family: var(--iv-font-mono);
  border: 1px solid var(--brand_black);
}

.odds_button.active {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 800;
}

.NavCast {
  font-weight: 800;
  color: var(--brand_black);
}

#navcast_select {
  z-index: 1000;
  background-color: var(--brand_black);
  border-radius: 5px;
  padding: 5px;
  color: var(--brand_white);
  border: none;
  font-size: 16px;
  font-weight: 600;
}

.cur_margin {
  display: none;
  background-color: var(--brand_black);
  color: white;
  font-weight: 700;
  margin-left: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 13px;
}

/* =========================================================
   Titles / meta text
========================================================= */
.party_title {
  font-weight: 700;
  font-size: 20px !important;
}

.last-updated-p {
  font-size: 14px;
  font-family: var(--iv-font-mono);
  font-weight: 500;
}

.state_nav_span {
  font-family: var(--iv-font-mono);
  font-weight: 600;
  font-size: 14px;
  background-color: var(--brand_orange);
  color: var(--brand_white);
  padding: 3px 6px;
  border-radius: 3px;
}

#district_number {
  font-weight: 350;
  font-family: var(--iv-font-sans);
  color: var(--brand_black);
}

#top_div {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 900px;
  margin: auto;
  justify-content: center;
  align-items: flex-start;
}

/* =========================================================
   District select container (dark pill)
========================================================= */

#district_select_container {
  background-color: var(--brand_white);
  display: inline-block;
  margin: 0px auto;
  padding: 5px 10px;
  border-radius: 10px;
  max-width: 95%;
  margin-top: 20px;
  margin-bottom: 10px;
  width: min(95%, 880px);
  text-align: center;
  border: var(--inline_container_w) solid var(--brand_black);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

#district_select_container p {
  font-size: 20px;
  font-weight: 700;
  display: inline-block;
  margin: 10px;
  padding: 0px;
  font-family: var(--iv-font-mono);
  color: var(--brand_black);
}

#district_select_container select {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid var(--brand_black);
  display: inline-block;
  color: var(--brand_black);
  margin: 0px;
}

#district_select_container select:hover,
#district_select_container select:focus {
  border-bottom: 2px solid var(--brand_orange);
}

.district_select {
  color: var(--brand_white);
  border-bottom: 2px solid var(--brand_white);
}

.chamber_button {
  font-family: var(--iv-font-mono);
  font-size: 12px;
  font-weight: 400;
  background-color: var(--lt_gray);
  color: var(--brand_black);
  border: none;
  border-radius: 5px;
  margin: 5px;
  padding: 8px 10px;
  cursor: pointer;
}

.chamber_button:hover {
  border: var(--brand_black) 2px solid;
  padding: 6px 8px;
  font-weight: 700;
  background-color: var(--brand_white);
}

.chamber_button.active {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
}

/* =========================================================
   Banner nav select (SVG arrow)
========================================================= */
.banner_nav {
  z-index: 1000;
  border-radius: 5px;
  padding: 5px;
  color: var(--brand_black);
  border: none;
  text-align: right;
  text-align-last: right;
  font-size: 16px;
  font-weight: 700;
  display: inline-block;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path fill='%23000000' d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 26px 26px;
  padding-right: 44px;
}

/* =========================================================
   Inline containers
========================================================= */
.inline_container {
  display: inline-block;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: var(--inline_container_w) solid var(--brand_black);
  border-radius: 10px;
  margin-top: 20px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.inline_container_no {
  display: inline-block;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 0px;
  border-radius: 10px;
  margin-top: 20px;
}

.inline_title {
  text-align: left;
  font-family: var(--iv-font-mono);
  font-weight: 700;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 5px;
}
.inline_p {
  text-align: left;
  margin-left: 5px;
  font-family: var(--iv-font-sans);
  font-weight: 400;
  font-size: 15px;
  margin-top: 5px;
  width: min(90%, 700px);
}

/* =========================================================
   Search UI
========================================================= */

.search_container {
  width: min(200px, 100%);
  margin: 0 auto;
  text-align: left;
  border-radius: 3px;
  background-color: var(--brand_white);
  z-index: 9999;
  right: 30px;
  display: inline-block;
  visibility: hidden;
}
.search_input {
  width: 200px;
  height: 30px;
  font-size: 14px;
  padding: 5px;
  font-family: var(--iv-font-mono);
  background-color: var(--brand_black);
  margin-right: 10px;
  color: var(--brand_white);
  border-radius: 5px;
  border: 1px solid var(--brand_white);
}

/* placeholder color (with vendor fallbacks) */
.search_input::placeholder {
  color: var(--lt_gray);
  opacity: 1; /* ensure visibility in Firefox */
}
.search_input::-webkit-input-placeholder,
.search_input:-ms-input-placeholder,
.search_input::-ms-input-placeholder {
  color: var(--lt_gray);
}

.search_input:focus {
  outline: none;
  border: 1px solid var(--brand_orange);
}

#search_results_header {
  margin: 0 auto;
  text-align: left;
  border: 1px solid var(--brand_black);
  display: none;
  border-radius: 3px;
  position: absolute;
  background-color: white;
  z-index: 9999;
  margin-top: 5px;
  right: 65px;
}

#search_results_header_phone {
  width: 95%;
  margin-left: 2.5%;
  border-bottom: 2px solid var(--brand_black);
}
#search_input_header_phone {
  width: calc(100% - 20px);
  font-size: 14px;
  border-radius: 3px;
  display: inline-block;
  padding: 10px;
  margin: 10px;
}

#mobile-column-select {
  color: var(--brand_black) !important;
  border-radius: 3px;
}

.result_div {
  border-bottom: 1px solid var(--lt_gray);
  padding: 0px;
}

.result_div h3 {
  font-family: var(--iv-font-mono);
  font-size: 13px;
  text-decoration: none;
  color: var(--brand_black);
  display: inline-block;
  padding: 2px 6px;
  margin: 2px;
  font-weight: 700;
}

.result_div p {
  font-family: var(--iv-font-mono);
  font-size: 11px;
  text-decoration: none;
  display: inline-block;
  padding: 2px 0px;
  margin: 2px;
  color: var(--brand_black);
  font-weight: 350;
}

.result_div span {
  font-family: var(--iv-font-mono);
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  margin-right: 10px;
  padding: 2px 6px;
  margin-left: 0px;
}

.search_emblem {
  display: inline-block;
  background-color: var(--brand_black);
  height: 30px !important;
  width: 30px !important;
  border-radius: 5px;
  margin-left: 5px;
  padding: 5px;
  cursor: pointer;
}

/* =========================================================
   Atlas header assistant
========================================================= */
body.atlas-home-test .brand-right > .search_container {
  display: none !important;
  visibility: hidden !important;
}

.atlas-home-wrap {
  --atlas-brand-orange: #f7ad8b;
  --atlas-brand-red: #c22424;
  --atlas-brand-blue: #3061c3;
  --atlas-account-bg: #f7ad8b;
  position: relative;
  display: inline-block;
  margin-left: 8px;
  font-family: var(--iv-font-sans);
}

.atlas-home-wrap * {
  font-family: var(--iv-font-sans);
}

.atlas-home-toggle {
  cursor: pointer;
  display: inline-block !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 6px !important;
  border: 2px solid var(--brand_black) !important;
  border-radius: 5px;
  background-color: var(--brand_white) !important;
  color: var(--brand_black) !important;
  text-transform: none;
  font-family: var(--iv-font-mono);
}

.atlas-home-toggle:hover {
  background-color: var(--atlas-text) !important;
  color: var(--atlas-bg) !important;
  font-weight: 900;
}

.atlas-home-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 9900;
  width: min(340px, calc(100vw - 24px));
  max-height: min(640px, calc(100vh - 20px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background: var(--atlas-bg);
  color: var(--atlas-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.atlas-home-panel[hidden] {
  display: none;
}

.brand-bar.phone .atlas-home-panel {
  left: 0;
  right: auto;
}

.atlas-home-head {
  display: block;
  color: var(--atlas-text);
  font-size: 14px;
  font-weight: 350;
  line-height: 1.1;
  margin-bottom: 2px;
}

.atlas-home-head span {
  display: inline-block;
  width: calc(100% - 36px);
  padding-top: 4px;
}

.atlas-home-close {
  display: inline-block !important;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 4px 7px;
  background: var(--atlas-bubble-bg);
  border: 1px solid var(--atlas-bubble-bg);
  border-radius: 5px;
  color: var(--atlas-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  vertical-align: top;
}

.atlas-home-close:hover {
  background-color: var(--atlas-brand-orange);
  border-color: var(--atlas-brand-orange);
  color: var(--atlas-bg);
}

.atlas-home-messages {
  min-height: 86px;
  max-height: 380px;
  overflow: auto;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 1px 10px 1px 1px;
  scrollbar-color: var(--atlas-bg) var(--atlas-bubble-bg);
  scrollbar-width: thin;
}

.atlas-home-messages::-webkit-scrollbar {
  width: 3px;
  background-color: var(--atlas-bubble-bg);
}

.atlas-home-messages::-webkit-scrollbar-thumb {
  background-color: var(--atlas-bg);
  border-radius: 3px;
}

.atlas-home-message {
  padding: 10px;
  border: 1px solid var(--atlas-bubble-bg);
  border-radius: 5px;
  background: var(--atlas-bubble-bg);
  color: var(--atlas-text);
  margin: 0;
}

.atlas-home-message.user {
  justify-self: end;
  max-width: 82%;
  background: transparent;
  color: var(--atlas-text);
  border-color: var(--atlas-text);
  padding: 7px 9px;
}

.atlas-home-message p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: inherit;
  text-transform: none;
}

.atlas-home-thinking {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.atlas-home-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.atlas-home-dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
  animation: atlas-home-dot 900ms ease-in-out infinite;
}

.atlas-home-dots span:nth-child(2) {
  animation-delay: 120ms;
}

.atlas-home-dots span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes atlas-home-dot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-home-dots span {
    animation: none;
    opacity: 1;
  }
}

.atlas-home-links,
.atlas-home-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 10px;
}

.atlas-home-quick-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.atlas-home-quick-links .atlas-home-link {
  justify-content: center;
  margin: 0;
  border-color: var(--lt_gray);
  background: var(--lt_gray);
  color: var(--brand_black);
  font-family: var(--iv-font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.atlas-home-quick-links .atlas-home-link:hover {
  border-color: var(--gray);
  background: var(--gray);
  color: var(--brand_white);
}

.atlas-home-link,
.atlas-home-choice {
  display: inline-flex !important;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  margin: 4px 4px 0 0;
  padding: 5px 8px;
  border: 2px solid var(--atlas-bg);
  border-radius: 5px;
  background: var(--atlas-bg);
  color: var(--atlas-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  text-transform: none;
}

.atlas-home-link:hover,
.atlas-home-choice:hover {
  background: var(--atlas-text);
  border-color: var(--atlas-text);
  color: var(--atlas-bg);
}

.atlas-home-select {
  width: 100%;
  margin: 0;
  margin-top: 10px;
  padding: 7px 9px;
  border: 1px solid var(--atlas-bubble-bg);
  border-radius: 5px;
  background: var(--atlas-bubble-bg);
  color: var(--atlas-text);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  text-transform: none;
}

.atlas-home-select:focus {
  outline: none;
  border-color: var(--atlas-brand-orange);
}

.atlas-home-select option {
  background: var(--atlas-bubble-bg);
  color: var(--atlas-text);
}

.atlas-home-party {
  display: inline-block !important;
  padding: 1px 5px;
  border: 1px solid var(--atlas-text);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--atlas-text);
}

.atlas-home-party.dem {
  background: var(--atlas-brand-blue);
}

.atlas-home-party.rep {
  background: var(--atlas-brand-red);
}

.atlas-home-form {
  display: block;
  margin-top: 2px;
}

.atlas-home-input {
  display: inline-block;
  width: calc(100% - 51px);
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--atlas-bubble-bg);
  border-radius: 5px;
  background: var(--atlas-bubble-bg);
  color: var(--atlas-text);
  font-size: 14px;
  text-align: left;
  text-transform: none;
  margin-right: 7px;
  vertical-align: top;
}

.atlas-home-input:focus {
  outline: none;
  border: 1px solid var(--atlas-brand-orange);
}

.atlas-home-input::placeholder {
  color: var(--atlas-text);
  opacity: 1;
}

.atlas-home-send {
  display: inline-block !important;
  min-height: 34px;
  width: auto;
  padding: 7px 9px !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  border: 2px solid var(--atlas-brand-orange);
  border-radius: 5px;
  background-color: var(--atlas-account-bg);
  color: var(--atlas-bg);
  cursor: pointer;
  text-transform: none;
  font-family: var(--iv-font-mono);
}

.atlas-home-send:hover {
  background-color: var(--atlas-brand-orange);
  border-color: var(--atlas-brand-orange);
  color: var(--atlas-text);
}

/* =========================================================
   Campaign finance split pane
========================================================= */
#cf_election_div {
  border-right: 1px solid var(--brand_black);
  padding: 10px;
  width: 250px;
  display: inline-block;
  height: 220px;
  overflow-y: scroll;
}
/*Hide the scrollbar*/
#cf_election_div::-webkit-scrollbar {
  display: none;
}
#cf_election_div {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

#cf_election_div2 {
  display: inline-block;
  padding: 10px;
  width: calc(100% - 270px);
  vertical-align: top;
}

#cf_election_div2 table {
  vertical-align: top;
}

#cf_div_phone,
.candidate_div.computer,
.candidate_outer.computer {
  width: 100%;
}

#cf_election_div h3,
#cf_div_phone h3 {
  color: var(--brand_black);
  font-family: var(--iv-font-mono);
  text-align: left;
}

#cf_election_div p {
  font-family: var(--iv-font-mono);
  text-align: left;
  margin-left: 20px;
  padding: 5px;
  cursor: pointer;
}

.election-year.active {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 800;
}

.election-year-phone {
  display: inline-block;
  padding: 5px 5px;
  margin: 2px;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--iv-font-mono);
  font-size: 14px;
}

.election-year-phone.active {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 800;
}

/* =========================================================
   Demo columns
========================================================= */
.demos_div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 0px;
}

.demo_col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 0px;
}

.demo_col h4.inline_title {
  padding-left: 5px;
}

.demo_inner {
  width: min(100%, 450px);
  margin: 0;
}

.demo_inner span {
  color: var(--brand_black);
}

.inc_container {
  margin-top: 20px;
  width: 280px;
}

/* =========================================================
   Navigation bar (computer)
========================================================= */
#navigation_computer {
  position: fixed;
  top: 60px;
  background-color: var(--lt_gray);
  z-index: 1000;
  border-bottom: 1px solid var(--brand_black);
  width: 100%;
  display: none;
}

#navigation_phone {
  position: fixed;
  background-color: var(--brand_white);
  z-index: 9000;
  border-bottom: 1px solid var(--brand_black);
  border-left: 1px solid var(--brand_black);
  width: 80%;
  left: 20%;
  height: 100%;
  display: none;
  padding: 10px 0px;
  text-align: right;
}

.nav_computer_link {
  text-decoration: none;
  color: var(--brand_black);
  font-weight: 500;
  text-align: right;
}

.nav_phone_cat h3 {
  margin: 10px;
  background-color: none;
  color: var(--brand_black);
  padding: 5px 10px;
  font-weight: 700;
  font-family: var(--iv-font-mono);
  font-size: 16px;
  text-align: left;
  border-bottom: 1px solid var(--brand_black);
}

.nav_phone_cat a {
  margin: 10px 20px;
  font-family: var(--iv-font-mono);
  font-size: 16px;
  cursor: pointer;
  text-align: right;
  display: block;
  font-weight: 350;
}

.menu_button_open {
  background-color: var(--brand_black);
  color: var(--brand_black);
}

/* =========================================================
   Hub nav
========================================================= */
.hub-nav {
  padding: 20px;
  text-align: center;
  background-color: var(--lt_gray);
  border-top: var(--brand_black) 2px solid;
}

.hub-nav h4 {
  margin: 5px;
  margin-bottom: 10px;
  font-family: var(--iv-font-mono);
}

.hub-item {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  width: 200px;
  margin-right: 20px;
  margin-top: 10px;
  text-align: center;
  border: var(--brand_black) 2px solid;
  border-radius: 10px;
  padding: 10px;
  height: 150px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.hub-item:hover {
  background-color: var(--brand_black);
}
.hub-item:hover a {
  color: var(--brand_white);
  font-weight: 700;
}

.hub-item img {
  width: 60px;
  display: block;
}

.hub-item a {
  display: inline-block;
  padding: 6px 12px;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--iv-font-mono);
  color: var(--brand_black);
}

/* =========================================================
   Footer
========================================================= */
/* =========================================================
   07) Footer and Utility Bars
========================================================= */
.footer {
  background: var(--footer_background);
  color: var(--brand_white);
  font-family: var(--iv-font-sans);
  z-index: 4;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-logo img {
  max-width: 300px;
}

.footer-social {
  display: flex;
  gap: 15px;
}

.footer-social img {
  height: 28px;
  width: auto;
}

.footer hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 25px 0;
}

.footer-cta {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.cta-btn {
  color: var(--BLACK);
  background: var(--brand_orange);
  padding: 8px 12px;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  text-transform: none;
}

.cta-btn:hover {
  background: var(--brand_white);
}

.footer-powered {
  margin-top: 30px;
  text-align: center;
}

.footer-powered img {
  width: 200px;
  height: auto;
}

.footer-privacy {
  color: var(--WHITE);
}

.privacy-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.footer-privacy a,
.footer-privacy p {
  color: var(--WHITE);
  text-decoration: none;
  font-weight: 600;
  text-transform: none;
}

/* =========================
   UTILITY BAR
========================= */

.utility-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 8px 20px;
  padding-bottom: 0px;
  min-height: 36px;
  font-size: 13px;
  text-transform: none;
  background: var(--header_bg) !important;
  margin: 0px;
  z-index: 9999;
}

.utility-bar.alt {
  position: sticky;
  top: 0;
  z-index: 9999;
  padding-bottom: 8px;
}

.utility-bar a,
.utility-bar button,
.utility-bar p,
.utility-bar span {
  color: var(--gray);
  background: none;
  border: none;
  font-family: var(--iv-font-mono);
  cursor: pointer;
  padding: 3px;
  margin: 0;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  display: inline;
  font-weight: 600 !important;
}
.utility-bar span {
  margin-right: 0px;
}

.utility-bar [hidden] {
  display: none !important;
}

.utility-bar a:hover,
.utility-bar button:hover,
.utility-bar p:hover {
  color: var(--brand_black);
  background-color: var(--lt_gray);
}

.utility-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.utility-donate {
  font-weight: 900;
  color: var(--brand_black) !important;
  margin-right: 0px !important;
  font-family: var(--iv-font-mono);
}

.utility-center {
  gap: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -3px;
  justify-self: center;
}

.utility-left {
  display: flex;
  align-items: center;
  justify-self: start;
}

/* =========================================================
   08) Selector Menus and Dropdown Systems
========================================================= */
/* ============================= */
/* STATE SELECTOR WRAPPER */
/* ============================= */

.state-selector-wrapper {
  position: relative;
  display: inline-block;
  margin: 0px;
}
/* ============================= */
/* BUTTON */
/* ============================= */

.state-selector {
  background: none;
  border: none;
  padding: 4px 6px !important;

  font-family: var(--iv-font-mono);
  font-weight: 600 !important;
  border-radius: 0px;
  border-bottom: none !important;
  font-size: 12px !important;
  text-transform: none !important;

  cursor: pointer;
  white-space: nowrap;
}

/* ============================= */
/* DROPDOWN BASE (SHARED) */
/* ============================= */

.state-dropdown,
.more_div,
.dropdown_menu,
.page-dropdown {
  position: absolute;
  top: 125%;
  right: 0;
  background: var(--dropdown_bg);
  border: 1px solid var(--BLACK);
  padding: 6px 8px;
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  grid-template-columns: 1fr;
  text-align: right;
  text-transform: none;
}

.state-dropdown {
  grid-auto-flow: column;
  grid-template-rows: repeat(25, auto);
  column-gap: 28px;
}

/* ============================= */
/* OPEN STATE (SHARED) */
/* ============================= */

.state-dropdown.open,
.more_div.open,
.dropdown_menu.open,
.page-dropdown.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================= */
/* OPTION BASE (SHARED) */
/* ============================= */

.state-option,
.more_div a,
.dropdown_menu a,
.page-option {
  font-family: var(--iv-font-mono);
  white-space: nowrap;
  cursor: pointer;
  display: block;
  text-transform: none;
  text-align: right;
  color: var(--BLACK) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  font-weight: 400 !important;
  border-radius: 0px;
  border-bottom: 2px solid transparent !important;
}

/* ============================= */
/* OPTION HOVER (SHARED) */
/* ============================= */

.state-option:hover,
.more_div a:hover,
.dropdown_menu a:hover,
.page-option:hover {
  background: var(--lt_gray) !important;
  color: var(--brand_black) !important;
  border-bottom: 2px solid var(--brand_black) !important;
  font-weight: 800 !important;
}

/* =========================
   BRAND + SEARCH
========================= */

.brand-bar {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  padding: 0px 20px;
  position: relative;
  height: 70px;
  background-color: var(--header_bg) !important;
  z-index: 899;
}

.brand-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1000px, calc(100% - 40px));
  border-bottom: 1px solid var(--brand_black);
  transform: translateX(-50%);
  pointer-events: none;
}

.brand-bar-alt {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  padding: 30px 20px;
  position: relative;
  height: 90px;
  background-color: var(--header_bg) !important;
  border-bottom: 1px solid var(--brand_black);
}

.logo-alt img {
  height: 70px;
  z-index: 1;
}

.brand-bar.phone.alt {
  border-bottom: 2px solid var(--brand_black);
}

.brand-bar.phone {
  padding: 14px 10px;
  height: 80px;
}

.logo img {
  height: 48px;
  z-index: 9000;
}

.logo-alt img {
  height: 55px;
}

.brand-bar.phone .logo img {
  height: 45px;
}

.brand-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
}
.brand-left {
  display: flex;
  align-items: center;
}

.brand-right {
  display: flex;
  align-items: center;
  justify-self: end;
}

.brand-center-alt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}
.brand-left-alt {
  display: flex;
  align-items: center;
}

.brand-right-alt {
  display: flex;
  align-items: center;
  justify-self: end;
  margin-right: 5px;
  margin-bottom: 5px;
}
.donate_link {
  text-decoration: none;
  background-color: var(--brand_black) !important;
  color: var(--brand_white) !important;
  font-family: var(--iv-font-mono);
  font-size: 12px !important;
  font-weight: 800;
  padding: 4px 20px !important;
  border-radius: 5px;
  border: 2px solid var(--brand_black) !important;
  margin-right: 0px !important;
}

.donate_link:hover {
  background-color: var(--brand_white) !important;
  border: 2px solid var(--brand_black) !important;
  color: var(--brand_black) !important;
  font-weight: 900;
  padding: 4px 20px !important;
}

.utility-auth-link {
  text-decoration: none;
  background-color: #f7ad8b !important;
  color: var(--BLACK) !important;
  border: 2px solid var(--brand_orange);
  font-family: var(--iv-font-mono);
  font-size: 12px !important;
  font-weight: 800;
  padding: 6px 10px !important;
  border-radius: 5px;
}

.utility-auth-link:hover {
  background-color: var(--brand_white) !important;
  color: var(--brand_orange) !important;
  border: var(--brand_orange) 2px solid !important;
  font-weight: 900;
  padding: 4px 8px !important;
}

/* =========================
   SECTION NAV
========================= */

.section-nav {
  position: sticky;
  top: -0.5px;
  z-index: 100;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 10px 20px;

  background: var(--header_bg) !important;
  border-bottom: 1px solid var(--brand_black);
}

body.sn-news-page .elementor-location-single,
body.sn-news-page .elementor-location-archive,
body.sn-news-page .elementor[data-elementor-type="wp-page"] {
  padding-top: 24px;
}

#logo_section_nav {
  position: absolute;
  left: 20px;
  height: 35px;
  display: none;
}

.section-nav a,
.section-nav p,
.section-nav button,
.section-nav span {
  font-family: var(--iv-font-mono);
  text-transform: none;
  color: var(--gray);
  padding: 4px;
  padding-top: 4px;
  margin: 0px;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  margin-bottom: 0px;
  margin-top: 0px;
  cursor: pointer;
  font-weight: 400;
  white-space: nowrap;
}

.section-nav a:hover,
.section-nav p:hover,
.section-nav button:hover,
.section-nav span:hover,
.section-nav a.active,
.section-nav p.active,
.section-nav button.active {
  color: var(--brand_black);
  border-bottom: 2px solid var(--brand_black);
  font-weight: 800;
}

.section-nav.phone {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: -5px;
  overflow: visible; /* 🔑 REQUIRED */
}
.section-nav.phone p {
  display: inline-block;
  margin: 0px;
  margin-right: 10px;
  font-size: 14px;
}
.section-nav.phone a {
  font-size: 14px;
  margin-right: 15px;
}

.state-badge {
  font-family: var(--iv-font-mono);
  font-size: 14px !important;
  padding: 4px 6px !important;
  text-transform: none;
  background-color: none;
  color: var(--brand_black) !important;
  border-left: 2px solid var(--brand_black);
  border-bottom: 2px solid transparent !important;
  font-weight: 800 !important;
  transition: all 0.1s ease;
}

.state-badge:hover {
  background-color: var(--brand_white);
  color: var(--brand_black) !important;
  font-weight: 800 !important;
  padding: 4px 5px !important;
  border-left: 4px solid var(--brand_black) !important;
}

.base_nav {
  cursor: pointer;
}

.non_base:hover {
  background-color: var(--lt_gray);
  cursor: pointer;
  font-weight: 800;
  border-radius: 3px;
}
.more_wrapper,
.dropdown_wrapper {
  position: relative;
  display: inline-block;
  z-index: 9999;
}

.state-badge_wrapper {
  position: relative;
  display: inline-block;
}

.more_button {
  cursor: pointer;
  margin: 0;
}

.more_wrapper .more_div {
  top: 100%;
}

.base_mb.active {
  background-color: var(--BLACK);
  color: var(--WHITE) !important;
  pointer-events: none;
}

.more_wrapper:hover .more_div,
.more_wrapper:focus-within .more_div,
.dropdown_wrapper:hover .dropdown_menu,
.dropdown_wrapper:focus-within .dropdown_menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 10000;
}

/* =========================================================
   Phone section nav
========================================================= */
/* ============================= */
/* PAGE SELECTOR WRAPPER */
/* ============================= */

.page-selector-wrapper,
.page-selector {
  background: var(--brand_white);
  color: var(--brand_black) !important;
  border-radius: 0px;
  display: inline-block;
}

.page-selector-wrapper {
  position: relative;
}

/* ============================= */
/* BUTTON */
/* ============================= */

.page-selector {
  background: none;
  border: none;
  padding: 6px 8px !important;

  font-family: var(--iv-font-mono);
  font-size: 14px !important;
  font-weight: 600;
  color: var(--brand_black);

  cursor: pointer;
  white-space: nowrap;
}

/* dropdown styles consolidated above */

/* =========================================================
   Phone Menu
========================================================= */
/* === OVERLAY === */
#mobileDrawerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 998;
}

/* === DRAWER === */
#mobileDrawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(85vw, 360px);
  height: 100vh;
  background: var(--brand_white);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 999;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--brand_black);
}

/* ACTIVE STATE */
#mobileDrawer.active {
  transform: translateX(0);
}

#mobileDrawerOverlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* === HEADER === */
.drawer-header {
  display: flex;
  justify-content: flex-end;
  padding: 14px 16px;
  border-bottom: 1px solid var(--lt_gray);
}

#drawerClose {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* === NAV === */
.drawer-nav {
  padding: 12px 18px;
  overflow-y: auto;
}

.drawer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drawer-nav li {
  border-bottom: 1px solid var(--lt_gray);
}

.drawer-nav a {
  display: block;
  padding: 14px 0;
  font-family: var(--iv-font-mono);
  font-size: 13px;
  text-transform: none;
  color: var(--brand_black);
  text-decoration: none;
}

/* =========================================================
   09) Legislator and Vote Modules
========================================================= */
/* =========================
   Legislators
========================= */
.member_box {
  margin: 10px;
  max-width: 200px;
  vertical-align: top;
}

.leg_title h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 5px 0px;
  font-family: var(--iv-font-mono);
}
#cycle_title {
  font-family: var(--iv-font-mono);
  font-size: 16px;
  display: inline-block;
}

.cycles {
  font-family: var(--iv-font-mono);
  font-size: 14px;
  margin-right: 10px;
  margin-left: 0px;
  display: inline-block;
  padding: 4px 9px;
  border-radius: 5px;
  background-color: var(--lt_gray);
  font-weight: 350;
  cursor: pointer;
  border: 2px solid var(--lt_gray);
}

.cycles.active {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 800;
  pointer-events: none;
  border: 2px solid var(--brand_black);
}

.cycles:hover {
  background-color: var(--brand_white);
  color: var(--brand_black);
  font-weight: 800;
  border: 2px solid var(--brand_black);
}

.cycles.active:hover {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 800;
  border: none;
  position: inherit;
}

#ideology-table h5 {
  font-family: var(--iv-font-mono);
  font-size: 14px;
  margin: 3px;
}

#ideology-table h6 {
  font-family: var(--iv-font-mono);
  font-size: 12px;
  margin: 3px;
}

.committee-link {
  font-family: var(--iv-font-mono);
  font-size: 13px;
  margin: 3px;
  text-decoration: none;
  color: var(--brand_black);
  background: var(--lt_gray);
  padding: 5px 10px;
  border-radius: 4px;
}

.committee-link:hover {
  border: 2px solid var(--brand_black);
  background-color: var(--brand_white);
  font-weight: 700;
  padding: 3px 8px;
}

.loading p {
  background-color: var(--lt_gray);
  text-align: center;
  font-size: 13px;
  border-radius: 5px;
  padding: 10px;
  font-family: var(--iv-font-mono);
  font-weight: 800;
}

.member-cell {
  border: 2px solid var(--brand_black);
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  display: inline-block;
  width: 200px;
  min-height: 250px;
  vertical-align: top;
}

.session_button {
  font-family: var(--iv-font-mono);
  font-size: 12px;
  font-weight: 400;
  background-color: var(--lt_gray);
  color: var(--brand_black);
  border: none;
  border-radius: 5px;
  margin: 5px;
  padding: 8px 10px;
  cursor: pointer;
  display: inline-block;
}

.session_button:hover {
  border: var(--brand_black) 2px solid;
  background-color: var(--brand_white);
  padding: 6px 8px;
  font-weight: 700;
}

.session_button.active {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
}

.active.filter-btn span {
  color: var(--brand_white);
}

/* =========================
   W-NOMINATE STYLES
========================= */
.vote_div {
  width: 100%;
  padding: 5px;
  border: 2px solid var(--brand_black);
  border-radius: 10px;
  margin-top: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.vote_div:hover {
  background-color: var(--lt_gray);
  cursor: pointer;
}

.filter-btn span {
  color: var(--brand_black);
}

.filter-btn.active span {
  color: var(--brand_white);
}

.election-chat-section {
  margin: 26px auto 10px;
  padding: 22px 18px;
  border-radius: 14px;
  background: var(--off_white);
  border: 1px solid var(--lt_gray);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.election-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
}

.election-chat-kicker,
.election-chat-time {
  font-family: var(--iv-font-mono);
}

.election-chat-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.election-chat-status {
  margin: 0;
  font-size: 12px;
  color: var(--gray);
  text-align: right;
}

.election-chat-list {
  display: grid;
  gap: 12px;
}

.election-chat-item {
  border: 1px solid var(--lt_gray);
  border-radius: 12px;
  padding: 14px 15px;
  background: var(--off_white);
}

.election-chat-item-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.election-chat-author {
  font-family: var(--iv-font-sans);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.election-chat-author-meta {
  display: block;
}

.election-chat-time {
  font-size: 12px;
  color: var(--gray);
  white-space: nowrap;
}

.election-chat-body {
  line-height: 1.65;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.election-chat-body span,
.election-chat-body code {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.election-chat-empty {
  margin: 0;
  color: var(--gray);
}

.election-chat-drawer {
  position: fixed;
  right: 16px;
  bottom: 72px;
  top: 88px;
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 20px 18px 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  z-index: 1240;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(calc(100% + 32px));
  transition:
    transform 220ms ease,
    opacity 220ms ease,
    visibility 0s linear 220ms;
  overflow: hidden;
}

body.election-chat-open .election-chat-drawer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition:
    transform 220ms ease,
    opacity 220ms ease,
    visibility 0s;
}

.election-chat-drawer .election-chat-header {
  align-items: flex-start;
}

.election-chat-drawer #election-chat-title {
  margin-bottom: 4px;
  font-size: 32px;
  line-height: 1.08;
}

.election-chat-drawer .election-chat-list {
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
  align-content: start;
  max-width: 100%;
}

.election-chat-launcher {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  padding: 5px 10px;
  background: var(--lt_gray);
  color: var(--brand_black);
  border: 2px solid var(--brand_black);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.22);
  font-family: var(--iv-font-mono);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
}

.election-chat-launcher-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d43f3a;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.election-chat-launcher-badge[hidden] {
  display: none;
}

.election-chat-close {
  border: 2px solid var(--brand_black);
  border-radius: 5px;
  background: var(--lt_gray);
  color: var(--brand_black);
  font-family: var(--iv-font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  cursor: pointer;
}

.election-chat-toast-stack {
  position: fixed;
  right: 16px;
  bottom: 76px;
  width: min(280px, calc(100vw - 32px));
  display: grid;
  gap: 6px;
  z-index: 1260;
  pointer-events: none;
}

.election-chat-toast {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--lt_gray);
  background: var(--off_white);
  color: var(--brand_black);
  text-align: right;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  pointer-events: auto;
  cursor: pointer;
}

.election-chat-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.election-chat-toast .election-chat-item-header {
  gap: 8px;
  margin-bottom: 4px;
}

.election-chat-toast .election-chat-author-meta,
.election-chat-toast .election-chat-body {
  text-align: right;
}

.election-chat-toast .election-chat-author {
  font-size: 13px;
}

.election-chat-toast .election-chat-time {
  font-size: 11px;
}

.election-chat-toast .election-chat-body {
  max-height: 6.4em;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
}

body.election-chat-floating-enabled .zoom_out {
  right: 124px;
}

/* === MOBILE ONLY === */
@media (min-width: 768px) {
  #mobileDrawer,
  #mobileDrawerOverlay {
    display: none;
  }
}

/* =========================
   RESPONSIVE
========================= */
/* =========================================================
   10) Responsive Breakpoints
========================================================= */

@media (max-width: 768px) {
  .brand-bar {
    grid-template-columns: 1fr auto;
    row-gap: 12px;
  }

  .brand-center {
    grid-column: span 2;
  }

  .section-nav {
    overflow-x: auto;
    justify-content: flex-start;
  }
}

/* =========================================================
   Responsive
========================================================= */
@media only screen and (max-width: 600px) {
  .div-descrip {
    color: var(--brand_white);
    text-align: center;
  }

  .credits-link {
    background-color: var(--brand_orange);
    padding: 3px;
    color: var(--brand_white);
    font-family: var(--iv-font-mono);
    font-size: 12px;
  }
}

@media only screen and (min-width: 600px) {
  .div-descrip {
    color: var(--brand_white);
    text-align: center;
    margin: 5px;
  }

  .div-title {
    font-weight: 400;
    text-align: center;
    width: 600px;
    margin: 5px;
    margin-top: 20px;
    margin-left: calc(50% - 300px);
    font-size: 30px;
  }

  .credits-link {
    background-color: var(--brand_orange);
    color: var(--brand_white);
    padding: 10px;
    font-family: var(--iv-font-mono);
    text-align: center;
  }
}

@media (max-width: 768px) {
  .footer-top {
    flex-direction: row;
  }

  .footer-logo img {
    max-width: 220px;
  }

  .footer-cta {
    gap: 20px;
  }

  .privacy-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media only screen and (max-width: 800px) {
  /* FIX: you had .top-title.visible but element is #top-title */
  #top-title.visible {
    transform: translate(-50%, 14.5px);
    opacity: 1;
  }

  .wnom-title {
    text-align: center;
    font-weight: 400;
    font-size: 20px;
  }

  .bill-number,
  .vote-id {
    font-size: 14px;
  }

  .bill-title {
    font-size: 18px;
  }

  .bill-description {
    font-size: 12px;
  }

  .inline_container_no,
  .inline_container,
  .inc_container {
    width: min(95%, 450px);
  }

  .inline_container_no {
    padding: 0px;
  }

  #live_en_title {
    font-size: 24px;
  }

  .win_div p {
    font-size: 12px;
  }

  .party_title {
    font-size: 16px !important;
  }

  .mid_txt {
    font-size: 13px;
  }

  .conf_int_txt {
    font-size: 11px;
  }

  h4 {
    font-size: 18px;
  }

  .last-updated-p {
    font-size: 12px;
  }

  #district_select_container p,
  #district_select_container select {
    font-size: 18px;
  }

  #district_select_container {
    padding: 5px;
  }

  .banner_nav {
    font-size: 13px;
    height: 33.5px;
  }

  .cb {
    display: none;
  }

  .demos_div {
    flex-direction: column;
  }

  .demo_inner {
    width: 100%;
    max-width: none;
    margin: 0 0 16px 0;
  }

  .demo_col,
  .demos_div {
    width: 100%;
  }

  .inline_title {
    font-size: 17px;
    margin-top: 20px;
  }
  .inline_p {
    font-size: 14px;
  }
  .search_container {
    width: 85%;
    left: 7.5%;
  }
  #search_input_header,
  #search_results_header {
    width: 100%;
  }
  #page_name {
    font-size: 20px;
    text-align: center;
  }
  .hub-item {
    width: 140px;
    height: auto;
  }
  .state-badge {
    padding: 7px 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-left: 4px solid var(--brand_black) !important;
  }
  .state-badge:hover {
    background-color: var(--brand_white);
    color: var(--brand_black) !important;
    font-weight: 800 !important;
    padding: 8px 6px !important;
    border-left: 4px solid var(--brand_black) !important;
  }

  #top_div {
    gap: 0px;
    width: 100%;
  }
  #summary_div {
    border: 2px solid var(--brand_black);
    padding: 20px 10px !important;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 95% !important;
  }
  .member_box {
    margin: 5px;
    max-width: 45%;
  }
  .member-cell {
    width: 45%;
    margin: 5px;
  }
  #candidate-image-leg img {
    height: 125px;
    width: 100px;
  }
  .section-nav {
    gap: 5px;
  }

  .orange_links {
    font-size: 13px;
    margin: 5px;
  }
  #theme-toggle {
    top: 2px;
  }
  td p {
    font-size: 12px;
  }
}

@media only screen and (max-width: 700px) {
  .election-chat-header,
  .election-chat-item-header {
    display: grid;
  }

  .election-chat-status {
    text-align: left;
  }

  .election-chat-drawer {
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 76px;
    width: auto;
    max-height: min(72vh, 560px);
    padding: 16px 14px 14px;
  }

  .election-chat-drawer #election-chat-title {
    font-size: 28px;
    line-height: 1.12;
  }

  .election-chat-drawer .election-chat-close {
    justify-self: center;
  }

  .election-chat-launcher,
  .election-chat-toast-stack {
    right: 12px;
  }

  body.election-chat-floating-enabled .zoom_out {
    right: 15px;
    bottom: 72px;
  }
}

@media only screen and (min-width: 800px) {
  .phone {
    display: none;
  }

  .bill-number,
  .vote-id {
    font-size: 18px;
  }

  .bill-title {
    font-size: 22px;
  }

  .bill-description {
    font-size: 15px;
  }
}

/* Raw legacy paint values above remain available to non-IV pages. On IV
   routes, these UI details resolve through the compact semantic palette. */
.iv-page hr {
  border-color: var(--iv-rule);
}

.iv-page tr:nth-child(even) {
  background: var(--iv-rule-soft);
}

.iv-page td {
  border-bottom-color: var(--iv-rule-soft);
}

.iv-page .orange_links:hover,
.iv-page .site-auth-access-modal__eyebrow,
.iv-page .site-auth-access-modal__text-link,
.iv-page .site-auth-access-modal__terms a,
.iv-page .site-auth-preview-lock__eyebrow,
.iv-page .utility-auth-link:hover {
  color: var(--iv-accent-text) !important;
}



.iv-page .featured-page-card {
  box-shadow: 0 16px 32px var(--iv-shadow);
}

.iv-page #vote-search-bar {
  box-shadow: 0 4px 8px var(--iv-shadow);
}

.iv-page #vote-filter-panel {
  box-shadow: 0 10px 20px var(--iv-shadow);
}

.iv-page #banner-computer,
.iv-page #top-title,
.iv-page #election-tooltip,
.iv-page #vote-filter-panel,
.iv-page #search_results_header {
  background-color: var(--iv-paper);
}

.iv-page #election-tooltip {
  border: 1px solid var(--brand_black) !important;
  border-radius: 0 !important;
  border-color: var(--brand_black) !important;
  background-color: var(--brand_white) !important;
  box-shadow: 5px 5px 0 var(--brand_black);
}

.iv-page .bill-number,
.iv-page .vote-id,
.iv-page .bill-title,
.iv-page .bill-description,
.iv-page .winner_text,
.iv-page .cur_margin,
.iv-page .election-chat-launcher-badge {
  color: var(--iv-on-party);
}

.iv-page .site-auth-access-modal__backdrop,
.iv-page .site-auth-preview-lock__overlay,
.iv-page #mobileDrawerOverlay {
  background: var(--iv-shadow-strong);
}

.iv-page .site-auth-access-modal__dialog,
.iv-page .site-auth-preview-lock__card {
  border-color: var(--iv-rule-soft);
  box-shadow: 0 24px 80px var(--iv-shadow-strong);
}

.iv-page .site-auth-access-modal__tier,
.iv-page .site-auth-access-modal__submit,
.iv-page .utility-auth-link {
  background-color: var(--iv-orange-2);
}

.iv-page .site-auth-access-modal__field input:focus,
.iv-page .site-auth-access-modal__field select:focus {
  box-shadow: 0 0 0 3px var(--iv-orange-rule);
}

[data-theme="dark"] .iv-page .site-auth-access-modal__password-toggle,
[data-theme="dark"] .iv-page .site-auth-preview-lock__card {
  background: var(--iv-strong-bg);
}

[data-theme="dark"] .iv-page .site-auth-preview-lock__card {
  color: var(--iv-strong-text);
  border-color: var(--iv-strong-rule);
}

.iv-page .atlas-home-panel {
  box-shadow: 0 4px 12px var(--iv-shadow-strong);
}

.iv-page .state-dropdown,
.iv-page .more_div,
.iv-page .dropdown_menu,
.iv-page .page-dropdown {
  box-shadow: 0 6px 18px var(--iv-shadow);
}

.iv-page .election-chat-section {
  box-shadow: 0 18px 36px var(--iv-shadow);
}

.iv-page .election-chat-launcher {
  box-shadow: 0 18px 36px var(--iv-shadow-strong);
}

.iv-page .election-chat-toast {
  box-shadow: 0 10px 24px var(--iv-shadow);
}

.iv-page .footer hr {
  border-top-color: var(--iv-strong-rule);
}

.iv-page .election-chat-launcher-badge {
  background: var(--iv-red);
}

@media only screen and (max-width: 800px) {
  .iv-page #summary_div {
    box-shadow: 2px 2px 5px var(--iv-shadow);
  }
}

/* ========================================================================== */
/* INTEGRATED: canonical tokens and primitives */
/* ========================================================================== */

/*
 * State Navigate IV design system.
 *
 * The twelve named colors below come directly from the final two artboards in
 * graphics/4_0/2027_v3.ai. This is the only IV stylesheet that owns literal
 * interface colors; branched page styles consume these shared roles.
 */

:root {
  color-scheme: light;

  /* 2027 light palette — edit site colors here. */
  --iv-orange: #DE7441;
  --iv-orange-2: #F2B08E;
  --iv-ink: #242220;
  --iv-paper1: #FCFAF5;
  --iv-paper: #FCFAF5;
  --iv-cream: var(--iv-paper);
  --iv-neutral: #4f4f4f;
  --iv-neutral-2: #c3c3c3;
  --iv-blue: #3F67B5;
  --iv-red: #B64545;
  --iv-green: #2E7D66;
  --iv-purple: #8B56A8;
  --iv-gold: #C6922E;
  --iv-teal: #2F7E94;
  --iv-uni-black:#242220;

  /* Data scales always use the light palette, regardless of interface theme. */
  --iv-data-paper: #FCFAF5;
  --iv-data-dark: #242220;
  --iv-data-neutral: #D8D8D8;
  --iv-data-panel: color-mix(in srgb, var(--iv-data-paper) 30%, var(--iv-data-neutral));
  --iv-data-blue: #3F67B5;
  --iv-data-blue-wash: color-mix(in srgb, var(--iv-data-blue) 11%, var(--iv-data-paper));
  --iv-data-blue-rule: color-mix(in srgb, var(--iv-data-blue) 55%, var(--iv-data-paper));
  --iv-data-blue-strong: color-mix(in srgb, var(--iv-data-blue) 78%, var(--iv-data-dark));
  --iv-data-blue-deep: color-mix(in srgb, var(--iv-data-blue) 60%, var(--iv-data-dark));
  --iv-data-red: #B64545;
  --iv-data-red-wash: color-mix(in srgb, var(--iv-data-red) 11%, var(--iv-data-paper));
  --iv-data-red-rule: color-mix(in srgb, var(--iv-data-red) 55%, var(--iv-data-paper));
  --iv-data-red-strong: color-mix(in srgb, var(--iv-data-red) 78%, var(--iv-data-dark));
  --iv-data-red-deep: color-mix(in srgb, var(--iv-data-red) 60%, var(--iv-data-dark));
  --iv-data-green: #2E7D66;
  --iv-data-green-wash: color-mix(in srgb, var(--iv-data-green) 11%, var(--iv-data-paper));
  --iv-data-green-rule: color-mix(in srgb, var(--iv-data-green) 55%, var(--iv-data-paper));
  --iv-data-green-strong: color-mix(in srgb, var(--iv-data-green) 78%, var(--iv-data-dark));
  --iv-data-green-deep: color-mix(in srgb, var(--iv-data-green) 60%, var(--iv-data-dark));
  --iv-data-purple: #8B56A8;
  --iv-data-purple-wash: color-mix(in srgb, var(--iv-data-purple) 11%, var(--iv-data-paper));
  --iv-data-purple-rule: color-mix(in srgb, var(--iv-data-purple) 55%, var(--iv-data-paper));
  --iv-data-purple-strong: color-mix(in srgb, var(--iv-data-purple) 78%, var(--iv-data-dark));
  --iv-data-purple-deep: color-mix(in srgb, var(--iv-data-purple) 60%, var(--iv-data-dark));
  --iv-data-gold: #C6922E;
  --iv-data-gold-strong: color-mix(in srgb, var(--iv-data-gold) 78%, var(--iv-data-dark));
  --iv-data-gold-deep: color-mix(in srgb, var(--iv-data-gold) 60%, var(--iv-data-dark));
  --iv-data-teal: #2F7E94;
  --iv-data-teal-rule: color-mix(in srgb, var(--iv-data-teal) 55%, var(--iv-data-paper));

  /* Forecast spectrum — intentionally separate from the interface/brand colors.
     These fixed values are shared by light and dark mode so margin, win %, and
     rating views always encode the same result with the same color. */
  --iv-forecast-d-no-election: #173C64;
  --iv-forecast-d-uncontested: #1D4A7B;
  --iv-forecast-d-solid: #2B5F9F;
  --iv-forecast-d-very-likely: #4779B4;
  --iv-forecast-d-likely: #6C97C7;
  --iv-forecast-d-lean: #92B4D4;
  --iv-forecast-d-tilt: #B9CEDE;
  --iv-forecast-toss-up: #D5D1C8;
  --iv-forecast-r-tilt: #DFBFBA;
  --iv-forecast-r-lean: #D79B95;
  --iv-forecast-r-likely: #CA766F;
  --iv-forecast-r-very-likely: #B9554F;
  --iv-forecast-r-solid: #A63833;
  --iv-forecast-r-uncontested: #812622;
  --iv-forecast-r-no-election: #5F1B18;
  --iv-forecast-i-tilt: #B8D7C8;
  --iv-forecast-i-lean: #90BEA9;
  --iv-forecast-i-likely: #65A286;
  --iv-forecast-i-very-likely: #43866B;
  --iv-forecast-i-solid: #2F6D55;
  --iv-forecast-i-uncontested: #24523F;
  --iv-forecast-i-no-election: #17382C;
  --iv-forecast-p-tilt: #EADFBD;
  --iv-forecast-p-lean: #DDCA91;
  --iv-forecast-p-likely: #D1B45F;
  --iv-forecast-p-very-likely: #C29C38;
  --iv-forecast-p-solid: #A77D22;
  --iv-forecast-p-uncontested: #7D5D19;
  --iv-forecast-p-no-election: #584114;
  --iv-forecast-no-rating: #A9A7A1;

  /* Fixed endpoints used for artwork, masks, and text on colored fills. */
  --iv-dark: #242220;
  --iv-light: #F9F9FA;

  /* Shared surfaces and rules, derived only from the twelve-color palette. */
  --iv-panel: color-mix(in srgb, var(--iv-paper) 30%, var(--iv-neutral-2));
  --iv-page-bg: var(--iv-paper);
  --iv-page-text: var(--iv-ink);
  --iv-page-muted: var(--iv-neutral);
  --iv-panel-bg: var(--iv-panel);
  --iv-rule: var(--iv-neutral-2);
  --iv-rule-soft: color-mix(in srgb, var(--iv-neutral-2) 62%, transparent);
  --iv-rule-strong: color-mix(in srgb, var(--iv-neutral) 76%, transparent);
  --iv-shadow: color-mix(in srgb, var(--iv-dark) 18%, transparent);
  --iv-shadow-strong: color-mix(in srgb, var(--iv-dark) 30%, transparent);

  /* Reusable washes replace the former bank of one-off RGBA variables. */
  --iv-orange-wash: color-mix(in srgb, var(--iv-orange) 12%, transparent);
  --iv-orange-rule: color-mix(in srgb, var(--iv-orange) 36%, transparent);
  --iv-accent-text: color-mix(in srgb, var(--iv-orange) 100%, var(--iv-ink));
  --iv-blue-wash: color-mix(in srgb, var(--iv-blue) 11%, transparent);
  --iv-blue-rule: color-mix(in srgb, var(--iv-blue) 55%, transparent);
  --iv-red-wash: color-mix(in srgb, var(--iv-red) 11%, transparent);
  --iv-red-rule: color-mix(in srgb, var(--iv-red) 55%, transparent);
  --iv-green-wash: color-mix(in srgb, var(--iv-green) 11%, transparent);
  --iv-green-rule: color-mix(in srgb, var(--iv-green) 55%, transparent);
  --iv-dark-wash: color-mix(in srgb, var(--iv-dark) 12%, transparent);
  --iv-dark-shadow: color-mix(in srgb, var(--iv-dark) 18%, transparent);
  --iv-dark-shadow-strong: color-mix(in srgb, var(--iv-dark) 26%, transparent);
  --iv-dark-muted: color-mix(in srgb, var(--iv-dark) 72%, transparent);
  --iv-dark-strong: color-mix(in srgb, var(--iv-dark) 88%, transparent);
  --iv-light-rule-soft: color-mix(in srgb, var(--iv-light) 18%, transparent);
  --iv-light-rule: color-mix(in srgb, var(--iv-light) 30%, transparent);
  --iv-light-muted: color-mix(in srgb, var(--iv-light) 64%, transparent);
  --iv-light-strong: color-mix(in srgb, var(--iv-light) 90%, transparent);
  /* Orange fills keep the fixed dark endpoint for accessible contrast. */
  --iv-on-accent: var(--iv-dark);
  --iv-on-party: var(--iv-paper);

  /* Dark bands stay dark in both themes; inverse panels deliberately flip. */
  --iv-strong-bg: #1D1D1D;
  --iv-strong-text: #F9F9F9;
  --iv-strong-muted: #A5A5A5;
  --iv-strong-rule: #4A4A4A;
  --iv-inverse-bg: var(--iv-strong-bg);
  --iv-inverse-text: var(--iv-strong-text);
  --iv-inverse-muted: var(--iv-strong-muted);
  --iv-inverse-rule: var(--iv-strong-rule);
  --iv-inverse-wash: color-mix(in srgb, var(--iv-inverse-text) 7%, transparent);
  --iv-atlas-bubble-bg: color-mix(in srgb, var(--iv-inverse-bg) 84%, var(--iv-inverse-text));

  /* Header roles remain semantic so every branch can share one header. */
  --iv-banner-bg: var(--iv-paper);
  --iv-banner-ink: var(--iv-ink);
  --iv-banner-orange: var(--iv-orange);
  --iv-banner-blue: var(--iv-blue);
  --iv-banner-muted: var(--iv-neutral);
  --iv-banner-rule: var(--iv-rule);

  /* Type, layout, and control primitives. */
  --iv-max: 1320px;
  --iv-shell: min(calc(100% - 72px), var(--iv-max));
  --iv-font-sans: "IBM Plex Sans", sans-serif;
  --iv-font-mono: "JetBrains Mono", monospace;
  --iv-gutter: 36px;
  --iv-grid-gap: 24px;
  --iv-section-space: 64px;
  --iv-control-height: 44px;
  --iv-radius: 4px;

  /* Small compatibility bridge for legacy generated templates. */
  --brand_white: var(--iv-paper);
  --brand_black: var(--iv-ink);
  --brand_orange: var(--iv-orange);
  --brand_blue: var(--iv-blue);
  --brand_red: var(--iv-red);
  --brand_green: var(--iv-green);
  --brand_grey: var(--iv-neutral);
  --BLACK: var(--iv-ink);
  --WHITE: var(--iv-paper);
  --black: var(--iv-ink);
  --white: var(--iv-paper);
  --gray: var(--iv-neutral);
  --lt_gray: var(--iv-panel);
  --lt_blue: var(--iv-blue);
  --lt_red: var(--iv-red);
  --orange: var(--iv-orange);
  --blue: var(--iv-blue);
  --red: var(--iv-red);
  --green: var(--iv-green);
  --purple: var(--iv-purple);
  --cream: var(--iv-paper);
  --ink: var(--iv-ink);
  --muted: var(--iv-neutral);
  --rule: var(--iv-rule);
  --state-map-fill: var(--iv-paper);
  --atlas-bg: var(--iv-inverse-bg);
  --atlas-text: var(--iv-inverse-text);
  --atlas-bubble-bg: var(--iv-atlas-bubble-bg);
  --yea_color: var(--iv-green);
  --nay_color: var(--iv-red);

  /* Encoded controls use only palette endpoints. */
  --iv-select-chevron-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23242220' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E");
  --iv-select-chevron-ink-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23242220' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  --iv-select-chevron-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23f9f9fa' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E");
  --iv-select-chevron-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f9f9fa' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");

  --iv-admin-progress-track: var(--iv-dark-wash);
  --iv-admin-progress-end: var(--iv-orange-2);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* 2027 dark palette — paired exactly with the light roles above. */
  --iv-orange: #DE7441;
  --iv-orange-2: #F2B08E;
  --iv-ink: #F9F9F9;
  --iv-paper: #1D1D1D;
  --iv-neutral: #A5A5A5;
  --iv-neutral-2: #4A4A4A;
  --iv-blue: #89A8E6;
  --iv-red: #D98282;
  --iv-green: #7FC0A8;
  --iv-purple: #B790CF;
  --iv-gold: #D8AE5A;
  --iv-teal: #73B8C8;
  --iv-uni-black:#1D1D1D;
    --iv-strong-bg: #131313;

  --iv-accent-text: var(--iv-orange);
  --iv-inverse-bg: var(--iv-ink);
  --iv-inverse-text: var(--iv-paper);
  --iv-banner-bg: #131313;
  --iv-inverse-muted: #6E6E6E;
  --iv-inverse-rule: #D8D8D8;
  --iv-select-chevron-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23f9f9f9' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E");
  --iv-select-chevron-ink-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f9f9f9' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* Scoped state that changes role meaning without adding another palette. */
.iv-page {
  /* Legacy and embedded rating consumers inherit the same theme-invariant data colors. */
  --rating-no-election-d: var(--iv-forecast-d-no-election);
  --rating-uncontested-d: var(--iv-forecast-d-uncontested);
  --rating-solid-d: var(--iv-forecast-d-solid);
  --rating-very-likely-d: var(--iv-forecast-d-very-likely);
  --rating-likely-d: var(--iv-forecast-d-likely);
  --rating-lean-d: var(--iv-forecast-d-lean);
  --rating-tilt-d: var(--iv-forecast-d-tilt);
  --rating-toss-up: var(--iv-forecast-toss-up);
  --rating-tilt-r: var(--iv-forecast-r-tilt);
  --rating-lean-r: var(--iv-forecast-r-lean);
  --rating-likely-r: var(--iv-forecast-r-likely);
  --rating-very-likely-r: var(--iv-forecast-r-very-likely);
  --rating-solid-r: var(--iv-forecast-r-solid);
  --rating-uncontested-r: var(--iv-forecast-r-uncontested);
  --rating-no-election-r: var(--iv-forecast-r-no-election);
  --rating-tilt-i: var(--iv-forecast-i-tilt);
  --rating-lean-i: var(--iv-forecast-i-lean);
  --rating-likely-i: var(--iv-forecast-i-likely);
  --rating-very-likely-i: var(--iv-forecast-i-very-likely);
  --rating-solid-i: var(--iv-forecast-i-solid);
  --rating-uncontested-i: var(--iv-forecast-i-uncontested);
  --rating-no-election-i: var(--iv-forecast-i-no-election);
  --rating-tilt-p: var(--iv-forecast-p-tilt);
  --rating-lean-p: var(--iv-forecast-p-lean);
  --rating-likely-p: var(--iv-forecast-p-likely);
  --rating-very-likely-p: var(--iv-forecast-p-very-likely);
  --rating-solid-p: var(--iv-forecast-p-solid);
  --rating-uncontested-p: var(--iv-forecast-p-uncontested);
  --rating-no-election-p: var(--iv-forecast-p-no-election);
  --rating-no-rating: var(--iv-forecast-no-rating);
  --rating-none: var(--iv-forecast-toss-up);
  --iv-hover-orange-bg: var(--iv-orange-wash);
  --iv-change-flash-bg: color-mix(in srgb, var(--iv-page-text) 24%, transparent);
  --iv-balanced-feed-bg: var(--iv-page-bg);
  --iv-topic-depth-bg: color-mix(in srgb, var(--iv-page-bg) 94%, var(--iv-orange));
  --iv-surface-muted-bg: var(--iv-panel);
  --iv-focus-orange-ring: var(--iv-orange-rule);
  min-width: 0;
  overflow-x: clip;
  background: var(--iv-page-bg);
  color: var(--iv-page-text);
  font-family: var(--iv-font-sans);
}

.iv-state-newsroom .iv-bias-neutral { --iv-bias-color: var(--iv-green); }
.iv-state-newsroom .iv-bias-left { --iv-bias-color: var(--iv-blue); }
.iv-state-newsroom .iv-bias-right { --iv-bias-color: var(--iv-red); }

.iv-page .iv-surface-dark {
  --iv-accent-text: var(--iv-orange-2);
  --iv-on-party: var(--iv-dark);
  --iv-page-text: #F9F9F9;
  --iv-neutral: #A5A5A5;
  --iv-rule: #4A4A4A;
  --iv-blue: #89A8E6;
  --iv-red: #D98282;
  --iv-green: #7FC0A8;
  --iv-purple: #B790CF;
  --iv-gold: #D8AE5A;
  --iv-teal: #73B8C8;
}

.iv-account-shell .pricing-page .pricing-features li {
  --iv-account-feature-rule: var(--iv-rule-soft);
}

.iv-account-shell .pricing-page .pricing-card:is(.is-recommended, .is-required) .pricing-features li {
  --iv-account-feature-text: var(--iv-light-strong);
}

.iv-committees-iv {
  --committee-party-d: var(--iv-blue);
  --committee-party-r: var(--iv-red);
  --committee-party-i: var(--iv-green);
  --committee-party-o: var(--iv-green);
}

.iv-committees-iv .iv-committee-member-card {
  --member-party: var(--committee-party-o);
}

.iv-committees-iv .iv-committee-member-card[data-party="d"] { --member-party: var(--committee-party-d); }
.iv-committees-iv .iv-committee-member-card[data-party="r"] { --member-party: var(--committee-party-r); }
.iv-committees-iv .iv-committee-member-card[data-party="i"] { --member-party: var(--committee-party-i); }

/* Shared district primitives used by both district branches. */
.iv-district-summary *,
.iv-district-summary *::before,
.iv-district-summary *::after {
  box-sizing: border-box;
}

.iv-district-summary #candidate-party {
  display: none !important;
}

.iv-district-summary .iv-party-initial[data-party="d"] { background: var(--iv-blue); }
.iv-district-summary .iv-party-initial[data-party="r"] { background: var(--iv-red); }
.iv-district-summary .iv-party-initial[data-party="i"] { background: var(--iv-green); }

.iv-district-summary #mapSVG .city,
.iv-district-summary #mapSVG .city-label {
  display: none;
}

@media (max-width: 900px) {
  .iv-district-summary .iv-district-route {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 640px) {
  .iv-district-summary #candidate-table-phone tbody {
    display: block;
    width: 100%;
  }

  .iv-district-summary #candidate-table-phone .table-header-cand {
    display: none;
  }
}

html {
  background: var(--iv-page-bg);
  color: var(--iv-page-text);
  font-family: var(--iv-font-sans);
}

body {
  margin: 0;
  background: var(--iv-page-bg);
  color: var(--iv-page-text);
  font-family: var(--iv-font-sans);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(button, select) {
  cursor: pointer;
}

:where(img, svg) {
  max-width: 100%;
}

:where(a) {
  color: inherit;
}


.iv-shell {
  width: var(--iv-shell);
  max-width: var(--iv-max);
  margin-inline: auto;
}

.iv-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 12000;
  padding: 10px 12px;
  background: var(--iv-orange);
  color: var(--iv-on-accent);
  font-family: var(--iv-font-mono);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
}

.iv-skip-link:focus {
  transform: translateY(0);
}

.iv-visually-hidden,
.iv-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.iv-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin: 0;
  padding-bottom: 20px;
}

.iv-section-heading :where(h1, h2, h3),
.iv-section-title {
  margin: 0;
  color: var(--iv-page-text);
  font-family: var(--iv-font-sans);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1;
}

.iv-kicker,
.iv-control-label,
.iv-section-status {
  margin: 0;
  color: var(--iv-neutral);
  font-family: var(--iv-font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  :root {
    --iv-shell: min(calc(100% - 32px), var(--iv-max));
  }
}

@media (max-width: 560px) {
  :root {
    --iv-shell: min(calc(100% - 28px), var(--iv-max));
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================================== */
/* INTEGRATED: site authentication */
/* ========================================================================== */

/* Shared authentication UI. Loaded by site-auth.js on every protected page. */
[data-site-auth-hidden-until-auth="true"] {
  visibility: hidden !important;
}

.site-auth-access-modal {
  --site-auth-ink: #242220;
  --site-auth-muted: #65615c;
  --site-auth-surface: #fffdf8;
  --site-auth-panel: #f1eee7;
  --site-auth-border: rgba(36, 34, 32, 0.18);
  --site-auth-accent: #fa824c;
  --site-auth-accent-soft: #f7ad8b;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 24px;
  color: var(--site-auth-ink);
  font-family: var(--iv-font-sans);
}

.site-auth-access-modal,
.site-auth-access-modal * {
  box-sizing: border-box;
}

.site-auth-access-modal[hidden] {
  display: none !important;
}

.site-auth-access-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 23, 22, 0.76);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.site-auth-access-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 34px 34px 30px;
  border: 1px solid var(--site-auth-border);
  border-radius: 7px;
  background: var(--site-auth-surface);
  color: var(--site-auth-ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.site-auth-access-modal.is-visible .site-auth-access-modal__dialog {
  opacity: 1;
  transform: translateY(0);
}

.site-auth-access-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--site-auth-muted);
  font: 24px/1 var(--iv-font-sans);
  cursor: pointer;
}

.site-auth-access-modal__close:hover {
  background: var(--site-auth-panel);
  color: var(--site-auth-ink);
}

.site-auth-access-modal[data-site-auth-locked="true"] .site-auth-access-modal__close {
  display: none;
}

.site-auth-access-modal__eyebrow {
  margin: 0 0 12px;
  color: var(--site-auth-accent);
  font: 600 11px/1.3 var(--iv-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-auth-access-modal__title {
  margin: 0 0 8px;
  color: var(--site-auth-ink);
  font: 700 clamp(24px, 4vw, 30px)/1.15 "IBM Plex Sans", Arial, sans-serif;
  letter-spacing: -0.02em;
  text-transform: none;
}

.site-auth-access-modal__subtitle {
  margin: 0 0 14px;
  color: var(--site-auth-muted);
  font-size: 14px;
  line-height: 1.55;
}

.site-auth-access-modal__tier {
  display: inline-block;
  margin: 0 0 20px;
  padding: 7px 10px;
  border-radius: 4px;
  background: var(--site-auth-accent-soft);
  color: var(--site-auth-ink);
  font: 600 12px/1.3 var(--iv-font-mono);
}

.site-auth-access-modal__tier[hidden] {
  display: none;
}

.site-auth-access-modal__body {
  color: var(--site-auth-ink);
  font-size: 14px;
  line-height: 1.6;
}

.site-auth-access-modal__body p {
  margin: 0;
  text-transform: none;
}

.site-auth-access-modal__form,
.site-auth-access-modal__field {
  display: grid;
}

.site-auth-access-modal__form {
  gap: 15px;
}

.site-auth-access-modal__field {
  gap: 7px;
}

.site-auth-access-modal__field label {
  color: var(--site-auth-ink);
  font: 600 12px/1.3 var(--iv-font-mono);
  letter-spacing: 0.02em;
}

.site-auth-access-modal__field input,
.site-auth-access-modal__field select {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--site-auth-border);
  border-radius: 5px;
  outline: 0;
  background: #fff;
  color: var(--site-auth-ink);
  font: 400 16px/1.4 var(--iv-font-sans);
}

.site-auth-access-modal__field input:focus,
.site-auth-access-modal__field select:focus {
  border-color: var(--site-auth-accent);
  box-shadow: 0 0 0 3px rgba(250, 130, 76, 0.2);
}

.site-auth-access-modal__field-with-action {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.site-auth-access-modal__field-with-action input {
  min-width: 0;
  flex: 1 1 auto;
}

.site-auth-access-modal button {
  font-family: var(--iv-font-sans);
}

.site-auth-access-modal__password-toggle,
.site-auth-access-modal__submit,
.site-auth-access-modal__link,
.site-auth-access-modal__button {
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.site-auth-access-modal__password-toggle,
.site-auth-access-modal__link {
  flex: 0 0 auto;
  border-color: var(--site-auth-border);
  background: var(--site-auth-panel);
  color: var(--site-auth-ink);
}

.site-auth-access-modal__password-toggle:hover,
.site-auth-access-modal__link:hover {
  border-color: var(--site-auth-accent);
}

.site-auth-access-modal__password-toggle[aria-pressed="true"] {
  border-color: var(--site-auth-ink);
  background: var(--site-auth-ink);
  color: var(--site-auth-surface);
}

.site-auth-access-modal__inline-actions,
.site-auth-access-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.site-auth-access-modal__inline-actions {
  margin-top: 2px;
}

.site-auth-access-modal__actions {
  margin-top: 22px;
}

.site-auth-access-modal__submit,
.site-auth-access-modal__button--primary {
  border-color: var(--site-auth-accent);
  background: var(--site-auth-accent);
  color: #242220;
}

.site-auth-access-modal__submit:hover,
.site-auth-access-modal__button:hover {
  filter: brightness(0.94);
}

.site-auth-access-modal__submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.site-auth-access-modal__button--secondary {
  border-color: var(--site-auth-ink);
  background: var(--site-auth-ink);
  color: var(--site-auth-surface);
}

.site-auth-access-modal__text-link {
  appearance: none;
  justify-self: start;
  min-height: 32px;
  margin: -3px 0 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #c95125;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.site-auth-access-modal__text-link:hover,
.site-auth-access-modal__terms a:hover {
  text-decoration: underline;
}

.site-auth-access-modal__helper,
.site-auth-access-modal__status {
  margin: 0;
  color: var(--site-auth-muted);
  font-size: 13px;
  line-height: 1.5;
}

.site-auth-access-modal__status {
  min-height: 20px;
}

.site-auth-access-modal__status[data-status-tone="error"] {
  color: #a61f1f;
}

.site-auth-access-modal__status[data-status-tone="success"] {
  color: #176a50;
}

.site-auth-access-modal__terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--site-auth-ink);
  font-size: 13px;
  line-height: 1.45;
}

.site-auth-access-modal__terms input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.site-auth-access-modal__terms a {
  color: #c95125;
  font-weight: 600;
  text-decoration: none;
}

.site-auth-access-modal :focus-visible {
  outline: 3px solid var(--site-auth-accent);
  outline-offset: 2px;
}

[data-theme="dark"] .site-auth-access-modal {
  --site-auth-ink: #f7f3ec;
  --site-auth-muted: #bbb5ac;
  --site-auth-surface: #242220;
  --site-auth-panel: #35322f;
  --site-auth-border: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .site-auth-access-modal__field input,
[data-theme="dark"] .site-auth-access-modal__field select {
  background: #1c1b1a;
  color: var(--site-auth-ink);
}

@media (max-width: 560px) {
  .site-auth-access-modal {
    padding: 12px;
  }

  .site-auth-access-modal__dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 28px 20px 22px;
    border-radius: 7px;
  }

  .site-auth-access-modal__field-with-action {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-auth-access-modal__dialog {
    transition: none;
  }
}

/* ========================================================================== */
/* INTEGRATED: civic footer */
/* ========================================================================== */

/* Shared calm-civic footer for State Navigate IV pages. */

.iv-civic-footer,
.iv-civic-footer * {
  box-sizing: border-box;
}

.iv-civic-footer {
  padding: clamp(66px, 7vw, 96px) 0 24px;
  background: var(--iv-strong-bg);
  color: var(--iv-strong-text);
  font-family: var(--iv-font-sans);
}

.iv-civic-footer a {
  color: inherit;
}

.iv-civic-footer-shell {
  width: min(calc(100% - 72px), 1320px);
  margin-inline: auto;
}

.iv-civic-footer-lead {
  display: grid;
  grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr);
  gap: clamp(42px, 6vw, 70px);
  align-items: end;
}

.iv-civic-footer-logo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
}

.iv-civic-footer-logo img {
  display: block;
  width: clamp(150px, 18vw, 270px);
  max-width: 100%;
  height: auto;
}

.iv-civic-footer-lead > p {
  max-width: 680px;
  margin: 0;
  color: var(--iv-strong-text);
  font-size: clamp(25px, 3vw, 42px);
  font-weight: 450;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.iv-civic-footer-rule {
  position: relative;
  height: 24px;
  margin: 52px 0 38px;
}

.iv-civic-footer-rule::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--iv-light-muted);
}

.iv-civic-footer-rule::after,
.iv-civic-footer-rule span {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 2px solid var(--iv-strong-text);
  border-radius: 50%;
  background: var(--iv-blue);
  transform: translateY(-50%);
}

.iv-civic-footer-rule::after {
  left: 0;
}

.iv-civic-footer-rule span {
  right: 0;
  background: var(--iv-red);
}

.iv-civic-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr .8fr 1.2fr;
  gap: clamp(30px, 4vw, 50px);
}

.iv-civic-footer-links nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.iv-civic-footer-links h2 {
  margin: 0 0 8px;
  color: var(--iv-light-muted);
  font-size: 20px !important;
}

.iv-civic-footer-links a {
  font-family: var(--iv-font-mono);
  font-size: 12px;
  text-decoration: none;
}

.iv-civic-footer-links a:hover {
  color: var(--iv-orange-2);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.iv-civic-footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--iv-light-rule);
  color: var(--iv-light-muted);
  font-family: var(--iv-font-mono);
  font-size: 11px;
}



@media (max-width: 900px) {
  .iv-civic-footer-links {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .iv-civic-footer {
    padding-top: 58px;
  }

  .iv-civic-footer-shell {
    width: min(calc(100% - 30px), 1320px);
  }

  .iv-civic-footer-lead,
  .iv-civic-footer-links {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .iv-civic-footer-logo img {
    width: min(285px, 100%);
  }

  .iv-civic-footer-rule {
    margin: 42px 0 34px;
  }

  .iv-civic-footer-legal {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

/* ========================================================================== */
/* INTEGRATED: civic header */
/* ========================================================================== */

/*
 * Canonical IV banner.
 *
 * The extra .iv-global-banner class deliberately gives these rules priority
 * over the older header rules in index-iv.css, district-iv.css, and
 * w-nominate-iv.css without changing the rest of those page systems.
 */
body .iv-global-banner.iv-site-header {
  position: relative;
  top: auto;
  z-index: 900;
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--iv-banner-rule);
  background: var(--iv-banner-bg);
  color: var(--iv-ink);
  font-family: var(--iv-font-sans);
}

/*
 * On project-level pages, keep the global banner available while the page
 * scrolls. State pages already have their own sticky .section-nav, so their
 * global banner remains in normal document flow.
 */
body:not(:has(.section-nav)):not(:has(.iv-state-nav))
  .iv-global-banner.iv-site-header {
  position: sticky;
  top: 0;
}

.section-nav.computer,
.section-nav {
  background-color: var(--iv-banner-bg) !important;
  background: var(--iv-banner-bg) !important;
}

body .iv-global-banner.iv-site-header,
body .iv-global-banner.iv-site-header *,
body .iv-global-banner.iv-site-header *::before,
body .iv-global-banner.iv-site-header *::after {
  box-sizing: border-box;
}

body .iv-global-banner.iv-site-header :where(button, input, select) {
  font: inherit;
}

body .iv-global-banner.iv-site-header :where(button, select) {
  cursor: pointer;
}

body .iv-global-banner.iv-site-header :where(a) {
  color: inherit;
}

body .iv-global-banner.iv-site-header > .iv-banner-shell.iv-header-inner {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 28px;
  width: min(calc(100% - 72px), 1360px);
  min-height: 88px;
  margin: 0 auto;
  padding: 0;
}

body .iv-global-banner.iv-site-header .iv-header-logo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0;
}

body .iv-global-banner.iv-site-header .iv-header-logo img {
  display: block;
  width: 200px;
  height: auto;
  margin: 0;
}

body .iv-global-banner.iv-site-header .iv-header-nav,
body .iv-global-banner.iv-site-header .iv-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

body .iv-global-banner.iv-site-header .iv-header-nav {
  justify-content: center;
}

body .iv-global-banner.iv-site-header .iv-header-actions {
  justify-content: flex-end;
}

body .iv-global-banner.iv-site-header .iv-header-nav > a,
body .iv-global-banner.iv-site-header .iv-header-nav > .dropdown_wrapper > a,
body .iv-global-banner.iv-site-header .iv-header-actions > a,
body .iv-global-banner.iv-site-header .iv-theme-toggle,
body .iv-global-banner.iv-site-header .state-selector {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin: 0;
  padding: 7px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--iv-ink) !important;
  font-family: var(--iv-font-mono);
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0.025em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

body .iv-global-banner.iv-site-header .iv-theme-toggle,
body .iv-global-banner.iv-site-header .state-selector {
  appearance: none;
  cursor: pointer;
}

body .iv-global-banner.iv-site-header .iv-header-nav span {
  margin-left: 5px;
  color: var(--iv-accent-text);
  font-size: 13px;
}

body .iv-global-banner.iv-site-header .iv-header-nav > a:hover,
body
  .iv-global-banner.iv-site-header
  .iv-header-nav
  > .dropdown_wrapper
  > a:hover,
body .iv-global-banner.iv-site-header .iv-theme-toggle:hover,
body .iv-global-banner.iv-site-header .state-selector:hover {
  color: var(--iv-accent-text) !important;
}

body .iv-global-banner.iv-site-header .iv-account-link {
  border: 1px solid var(--iv-ink) !important;
}

body
  .iv-global-banner.iv-site-header
  .iv-account-link:is(:hover, :focus-visible) {
  background: var(--iv-banner-bg) !important;
  color: var(--iv-ink) !important;
  box-shadow: 4px 4px 0 var(--iv-ink);
  transform: translate(-2px, -2px);
}

body .iv-global-banner.iv-site-header .iv-header-actions > #theme-toggle {
  background: var(--iv-banner-bg) !important;
  color: var(--iv-ink) !important;
  border: 1px solid var(--iv-ink) !important;
  border-radius: 0;
}

body
  .iv-global-banner.iv-site-header
  :is(#theme-toggle, #menu-theme-toggle):is(:hover, :focus-visible) {
  background: var(--iv-banner-bg) !important;
  color: var(--iv-ink) !important;
  box-shadow: 4px 4px 0 var(--iv-ink);
  transform: translate(-2px, -2px);
}

body .iv-global-banner.iv-site-header .iv-header-actions > .iv-donate-link {
  gap: 10px;
  border: 1px solid var(--iv-banner-orange) !important;
  background: var(--iv-banner-orange) !important;
  color: var(--iv-paper) !important;
  font-size:12px !important;
}

body .iv-global-banner.iv-site-header .iv-menu-toggle {
  display: none;
  place-items: center;
  gap: 4px;
  width: 44px;
  min-width: 44px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--iv-ink);
  border-radius: 0;
  background: transparent;
  color: var(--iv-ink);
}

body .iv-global-banner.iv-site-header .iv-menu-icon-hamburger {
  display: grid;
  gap: 4px;
  width: 19px;
}

body .iv-global-banner.iv-site-header .iv-menu-icon-hamburger > span {
  display: block;
  width: 19px;
  height: 2px;
  background: currentColor;
}

body .iv-global-banner.iv-site-header .iv-menu-toggle:focus-visible {
  outline: 3px solid var(--iv-focus-orange-ring);
  outline-offset: 2px;
}

body .iv-global-banner.iv-site-header .iv-menu-toggle:hover,
body .iv-global-banner.iv-site-header .iv-menu-toggle:focus-visible,
body .iv-global-banner.iv-site-header .iv-menu-toggle[aria-expanded="true"] {
  background: var(--iv-ink);
  color: var(--iv-banner-bg);
}

body.iv-banner-menu-open {
  overflow: hidden;
}

body .iv-global-banner.iv-site-header .iv-banner-menu {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
}

body .iv-global-banner.iv-site-header .iv-banner-menu[hidden] {
  display: none;
}

body .iv-global-banner.iv-site-header .iv-banner-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 34, 32, 0.48);
  opacity: 0;
  transition: opacity 180ms ease;
}

body .iv-global-banner.iv-site-header .iv-banner-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 20px));
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border-left: 2px solid var(--iv-ink);
  background: var(--iv-banner-bg);
  color: var(--iv-ink);
  box-shadow: -10px 0 0 rgba(36, 34, 32, 0.16);
  transform: translateX(100%);
  transition: transform 180ms ease;
}

body
  .iv-global-banner.iv-site-header
  .iv-banner-menu.is-open
  .iv-banner-menu-backdrop {
  opacity: 1;
}

body
  .iv-global-banner.iv-site-header
  .iv-banner-menu.is-open
  .iv-banner-menu-panel {
  transform: translateX(0);
}

body .iv-global-banner.iv-site-header .iv-banner-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--iv-ink);
}

body .iv-global-banner.iv-site-header .iv-banner-menu-head h2 {
  margin: 0;
}

body .iv-global-banner.iv-site-header .iv-banner-menu-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--iv-ink);
  border-radius: 0;
  background: transparent;
  color: var(--iv-ink);
  font-family: var(--iv-font-mono);
  font-size: 19px;
}

body .iv-global-banner.iv-site-header .iv-banner-menu-close:hover {
  background: var(--iv-ink);
  color: var(--iv-banner-bg);
}

body .iv-global-banner.iv-site-header .iv-banner-menu-theme {
  display: none;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--iv-banner-rule);
  color: var(--iv-ink);
  font-family: var(--iv-font-mono);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body .iv-global-banner.iv-site-header .iv-banner-menu-theme #menu-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 96px;
  min-height: 42px;
  height: 42px;
  padding: 9px 12px !important;
  border: 1px solid var(--iv-ink) !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--iv-ink) !important;
  font-family: var(--iv-font-mono);
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1;
}

body
  .iv-global-banner.iv-site-header
  .iv-banner-menu-theme
  #menu-theme-toggle:hover,
body
  .iv-global-banner.iv-site-header
  .iv-banner-menu-theme
  #menu-theme-toggle:focus-visible {
  background: var(--iv-ink) !important;
  color: var(--iv-banner-bg) !important;
}

body .iv-global-banner.iv-site-header .iv-banner-menu-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  margin: 0;
  padding: 0;
}

body .iv-global-banner.iv-site-header .iv-banner-menu-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 13px 16px;
  border-right: 1px solid var(--iv-banner-rule);
  border-bottom: 1px solid var(--iv-banner-rule);
  color: var(--iv-ink);
  font-family: var(--iv-font-mono);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

body .iv-global-banner.iv-site-header .iv-banner-menu-nav a::after {
  content: "→";
  color: var(--iv-accent-text);
  font-size: 15px;
}

body
  .iv-global-banner.iv-site-header
  .iv-banner-menu-nav
  .iv-banner-menu-account-link {
  background: var(--iv-orange-wash);
}

body .iv-global-banner.iv-site-header .iv-banner-menu-nav a:hover,
body .iv-global-banner.iv-site-header .iv-banner-menu-nav a:focus-visible {
  background: var(--iv-ink);
  color: var(--iv-banner-bg);
}

body .iv-global-banner.iv-site-header .iv-donate-link:hover {
  box-shadow: 4px 4px 0 var(--iv-ink);
  transform: translate(-2px, -2px);
}

/* Shared utility dropdowns and the state selector. */
body
  .iv-global-banner.iv-site-header
  :is(.state-selector-wrapper, .dropdown_wrapper) {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

body .iv-global-banner.iv-site-header :is(.state-dropdown, .dropdown_menu) {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 9999;
  display: grid;
  min-width: 250px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--iv-ink);
  border-radius: 0;
  background: var(--iv-banner-bg);
  color: var(--iv-ink);
  box-shadow: 8px 8px 0 var(--iv-ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: left;
}

body
  .iv-global-banner.iv-site-header
  :is(.state-dropdown, .dropdown_menu)[hidden] {
  display: none;
}

body .iv-global-banner.iv-site-header :is(.state-dropdown, .dropdown_menu).open,
body
  .iv-global-banner.iv-site-header
  :is(.state-selector-wrapper, .dropdown_wrapper):is(:hover, :focus-within)
  :is(.state-dropdown, .dropdown_menu) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body .iv-global-banner.iv-site-header .state-dropdown {
  width: min(360px, calc(100vw - 32px));
  max-height: min(590px, calc(100vh - 126px));
  grid-auto-flow: row;
  grid-auto-rows: minmax(46px, auto);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  overflow-y: auto;
}

body .iv-global-banner.iv-site-header :is(.state-option, .dropdown_menu a) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 46px;
  margin: 0;
  padding: 11px 42px 11px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--iv-banner-rule) !important;
  border-radius: 0;
  background: var(--iv-banner-bg) !important;
  color: var(--iv-ink) !important;
  font-family: var(--iv-font-mono);
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
}

body
  .iv-global-banner.iv-site-header
  :is(.state-option, .dropdown_menu a)::after {
  content: "→";
  position: absolute;
  right: 16px;
  color: var(--iv-accent-text);
  font-size: 15px;
  line-height: 1;
  transition: transform 140ms ease;
}

body .iv-global-banner.iv-site-header .state-dropdown .state-option {
  padding-right: 16px !important;
}

body .iv-global-banner.iv-site-header .state-dropdown .state-option::after {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
}

body .iv-global-banner.iv-site-header .state-option:nth-child(odd) {
  border-right: 1px solid var(--iv-banner-rule) !important;
}

body
  .iv-global-banner.iv-site-header
  :is(.state-option, .dropdown_menu a):is(:hover, :focus-visible) {
  border-bottom-color: var(--iv-ink) !important;
  background: var(--iv-ink) !important;
  color: var(--iv-banner-bg) !important;
}

body
  .iv-global-banner.iv-site-header
  :is(.state-option, .dropdown_menu a):is(:hover, :focus-visible)::after {
  transform: translateX(4px);
}

body .iv-global-banner.iv-site-header .state-option[aria-current="page"] {
  box-shadow: inset 5px 0 0 var(--iv-banner-orange);
}

/* Compact Atlas panel copied from the finance IV banner. */
body .iv-global-banner.iv-site-header .iv-header-atlas {
  display: inline-flex;
  min-width: 0;
}

body .iv-global-banner.iv-site-header .atlas-home-wrap {
  position: relative;
  display: inline-block;
  margin-left: 0;
  font-family: var(--iv-font-sans);
}

body .iv-global-banner.iv-site-header .atlas-home-toggle {
  min-height: 42px;
  margin: 0;
  padding: 7px 9px !important;
  border: 1px solid var(--iv-ink) !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--iv-ink) !important;
  font-family: var(--iv-font-mono);
  font-size: 12px;
  font-weight: 750;
}

body
  .iv-global-banner.iv-site-header
  .atlas-home-toggle:is(:hover, :focus-visible) {
  background: var(--iv-banner-bg) !important;
  color: var(--iv-ink) !important;
  box-shadow: 4px 4px 0 var(--iv-ink);
  transform: translate(-2px, -2px);
}

body .iv-global-banner.iv-site-header .atlas-home-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 9900;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 112px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--iv-inverse-text);
  border-radius: 0;
  background: var(--iv-inverse-bg);
  color: var(--iv-inverse-text);
  box-shadow: 8px 8px 0 var(--iv-inverse-bg);
}

body .iv-global-banner.iv-site-header .atlas-home-panel[hidden] {
  display: none;
}

body .iv-global-banner.iv-site-header .atlas-home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 2px solid var(--iv-inverse-text);
  color: var(--iv-inverse-text);
}

body .iv-global-banner.iv-site-header .atlas-home-head > span {
  width: auto;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 24px;
  font-weight: 850;
}

body .iv-global-banner.iv-site-header .atlas-home-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--iv-inverse-text);
  border-radius: 0;
  background: transparent;
  color: var(--iv-inverse-text);
  font-family: var(--iv-font-mono);
  font-size: 17px;
}

body .iv-global-banner.iv-site-header .atlas-home-close:hover {
  border-color: var(--iv-banner-orange);
  background: var(--iv-banner-orange);
  color: var(--iv-on-accent);
}

body .iv-global-banner.iv-site-header .atlas-home-messages {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 176px;
  max-height: 390px;
  margin: 0;
  padding: 0;
  overflow: auto;
  background: var(--iv-inverse-bg);
  scrollbar-color: var(--iv-banner-orange) var(--iv-inverse-bg);
  scrollbar-width: thin;
}

body .iv-global-banner.iv-site-header .atlas-home-messages::-webkit-scrollbar {
  width: 6px;
  background: var(--iv-inverse-bg);
}

body
  .iv-global-banner.iv-site-header
  .atlas-home-messages::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: var(--iv-banner-orange);
}

body .iv-global-banner.iv-site-header .atlas-home-message {
  margin: 0;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--iv-inverse-rule);
  border-radius: 0;
  background: transparent;
  color: var(--iv-inverse-text);
}

body .iv-global-banner.iv-site-header .atlas-home-message.assistant {
  border-left: 5px solid var(--iv-banner-orange);
}

body .iv-global-banner.iv-site-header .atlas-home-message.user {
  justify-self: stretch;
  max-width: none;
  border-right: 5px solid var(--iv-inverse-text);
  border-left: 0;
  background: var(--iv-inverse-wash);
}

body .iv-global-banner.iv-site-header .atlas-home-message p {
  margin: 0;
  color: inherit;
  font-family: var(--iv-font-sans);
  font-size: 14px;
  line-height: 1.4;
}

body .iv-global-banner.iv-site-header .atlas-home-links,
body .iv-global-banner.iv-site-header .atlas-home-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
}

body .iv-global-banner.iv-site-header .atlas-home-quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--iv-inverse-text);
}

body .iv-global-banner.iv-site-header .atlas-home-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--iv-inverse-text);
  font-family: var(--iv-font-sans);
  font-size: 15px;
  text-decoration: none;
  text-transform: none !important;
  font-weight: 400 !important;
}

body .iv-global-banner.iv-site-header .atlas-home-link::after {
  content: "→";
  color: var(--iv-accent-text);
  font-size: 15px;
}

body
  .iv-global-banner.iv-site-header
  .atlas-home-quick-links
  .atlas-home-link
  + .atlas-home-link {
  border-left: 1px solid var(--iv-inverse-text);
}

body .iv-global-banner.iv-site-header .atlas-home-link:hover,
body .iv-global-banner.iv-site-header .atlas-home-choice:hover {
  background: var(--iv-inverse-text);
  color: var(--iv-inverse-bg);
}

body .iv-global-banner.iv-site-header .atlas-home-message .atlas-home-links,
body .iv-global-banner.iv-site-header .atlas-home-choices {
  gap: 6px;
  margin: 12px 0 0;
}

body .iv-global-banner.iv-site-header .atlas-home-choice,
body .iv-global-banner.iv-site-header .atlas-home-select {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--iv-inverse-text);
  border-radius: 0;
  background: transparent;
  color: var(--iv-inverse-text);
  font-family: var(--iv-font-mono);
  font-size: 11px;
  text-align: left;
}

body .iv-global-banner.iv-site-header .atlas-home-select {
  margin-top: 12px;
  background: var(--iv-inverse-bg);
}

body .iv-global-banner.iv-site-header .atlas-home-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin: 0;
  border-top: 2px solid var(--iv-inverse-text);
}

body .iv-global-banner.iv-site-header .atlas-home-input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: var(--iv-inverse-bg);
  color: var(--iv-inverse-text);
  font-family: var(--iv-font-sans);
  font-size: 14px;
  text-align: left;
}

body .iv-global-banner.iv-site-header .atlas-home-input::placeholder {
  color: var(--iv-inverse-muted);
}

body .iv-global-banner.iv-site-header .atlas-home-send {
  min-width: 64px;
  min-height: 52px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-left: 2px solid var(--iv-inverse-text);
  border-radius: 0;
  background: var(--iv-banner-orange);
  color: var(--iv-on-accent);
  font-family: var(--iv-font-mono);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

body .iv-global-banner.iv-site-header .atlas-home-send:hover {
  background: var(--iv-inverse-text);
  color: var(--iv-inverse-bg);
}

body .iv-global-banner.iv-site-header .atlas-home-thinking,
body .iv-global-banner.iv-site-header .atlas-home-dots {
  display: inline-flex;
  align-items: center;
}

body .iv-global-banner.iv-site-header .atlas-home-thinking {
  gap: 7px;
}

body .iv-global-banner.iv-site-header .atlas-home-dots {
  gap: 4px;
}

body .iv-global-banner.iv-site-header .atlas-home-dots span {
  width: 5px;
  height: 5px;
  margin: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: iv-banner-atlas-dot 900ms ease-in-out infinite;
}

body .iv-global-banner.iv-site-header .atlas-home-dots span:nth-child(2) {
  animation-delay: 120ms;
}

body .iv-global-banner.iv-site-header .atlas-home-dots span:nth-child(3) {
  animation-delay: 240ms;
}

body .iv-global-banner.iv-site-header .atlas-home-party {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

body .iv-global-banner.iv-site-header .atlas-home-party.dem {
  background: var(--iv-blue);
}

body .iv-global-banner.iv-site-header .atlas-home-party.rep {
  background: var(--iv-red);
}

body
  .iv-global-banner.iv-site-header
  :is(a, button, input, select):focus-visible {
  outline: 3px solid var(--iv-banner-blue);
  outline-offset: 4px;
}

body .iv-global-banner.iv-site-header .atlas-home-input:focus-visible {
  outline: 3px solid var(--iv-banner-orange);
  outline-offset: -3px;
}

body
  .iv-global-banner.iv-site-header
  :is(.atlas-home-choice, .atlas-home-select):focus-visible {
  outline: 3px solid var(--iv-banner-orange);
  outline-offset: 2px;
}

/* Canonical state-product navigation shared by Districts, Finance, and Forecasts. */
body > .section-nav {
  position: sticky;
  top: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  color: var(--iv-ink);
  font-family: var(--iv-font-mono);
  white-space: nowrap;
}

body > .section-nav.phone {
  display: none;
  margin-top: 0px !important;
}

body > .section-nav.computer {
  justify-content: flex-start;
  gap: 24px;
  min-height: 46px;
  padding-block: 0;
  /* Use the same 1360px shell as the global banner so the logo and state marker align. */
  padding-inline: max(36px, calc((100vw - 1360px) / 2));
  border-bottom: 1px solid var(--iv-rule);
  background: var(--iv-paper);
  box-shadow: none;
}

body > .section-nav.computer.iv-nav-scrolled {
  justify-content: center;
  padding-inline: 72px;
  border-bottom-color: transparent;
  box-shadow: 0 3px 14px var(--iv-dark-shadow);
}

body > .section-nav #logo_section_nav {
  display: none;
}

body > .section-nav.computer.iv-nav-scrolled #logo_section_nav {
  position: absolute;
  left: 20px;
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

body > .section-nav.computer > a,
body > .section-nav.computer .more_button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin: 0;
  padding: 2px 0 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--iv-neutral);
  font-family: var(--iv-font-mono);
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: none;
}

body > .section-nav .base_sn.state-badge {
  position: relative;
  padding-left: 10px !important;
  border-left: 3px solid transparent !important;
  color: var(--iv-ink) !important;
  font-weight: 700 !important;
}

body > .section-nav .base_sn.state-badge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  width: 3px;
  height: 1em;
  background: var(--iv-orange);
  transform: translateY(-50%);
  pointer-events: none;
}

body > .section-nav.computer > a[aria-current="page"] {
  border-bottom-color: var(--iv-orange);
  color: var(--iv-ink);
  font-weight: 750;
}

body.iv-state-home
  > .section-nav.computer
  > .district_summary_link:not(:hover) {
  border-bottom-color: transparent;
  color: var(--iv-neutral);
  font-weight: 400;
}

body > .section-nav.computer :is(a, .more_button):hover {
  border-bottom-color: var(--iv-orange);
  color: var(--iv-ink);
}

body > .section-nav .more_wrapper {
  position: relative;
  display: inline-flex;
  align-self: stretch;
}

body > .section-nav .more_button {
  cursor: pointer;
}

body > .section-nav .more_div {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  z-index: 810;
  display: grid;
  min-width: 210px;
  border: 2px solid var(--iv-ink);
  background: var(--iv-paper);
  box-shadow: 7px 7px 0 var(--iv-ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body > .section-nav .more_wrapper:is(:hover, :focus-within) .more_div,
body > .section-nav .more_div.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body > .section-nav .more_div a {
  padding: 13px 16px;
  border-bottom: 1px solid var(--iv-rule);
  color: var(--iv-ink);
  font-family: var(--iv-font-mono);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

body > .section-nav .more_div a:hover {
  background: var(--iv-ink);
  color: var(--iv-paper);
}

@keyframes iv-banner-atlas-dot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (max-width: 1100px) {
  body .iv-global-banner.iv-site-header .iv-header-nav .events {
    display: none;
  }

  body .iv-global-banner.iv-site-header .state-dropdown {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  body > .section-nav.computer {
    padding-inline: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body > .section-nav.computer::-webkit-scrollbar {
    display: none;
  }

  body .iv-global-banner.iv-site-header > .iv-banner-shell.iv-header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 18px;
  }

  body .iv-global-banner.iv-site-header .iv-header-nav {
    justify-content: flex-start;
  }

  body .iv-global-banner.iv-site-header .iv-header-nav > a,
  body .iv-global-banner.iv-site-header .iv-header-nav > .dropdown_wrapper > a,
  body .iv-global-banner.iv-site-header .state-selector {
    padding-inline: 6px;
    font-size: 11px !important;
  }
}

@media (min-width: 801px) {
  body
    .iv-global-banner.iv-site-header
    .iv-header-actions
    > #theme-toggle:not(:hover):not(:focus-visible) {
    border-radius: 0 !important;
  }
}

@media (max-width: 800px) {
  body > .section-nav.computer {
    display: none !important;
  }

  body > .section-nav.phone {
    display: flex !important;
    justify-content: flex-start;
    gap: 0;
    min-height: 43px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--iv-rule);
    background: var(--iv-paper);
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body > .section-nav.phone::-webkit-scrollbar {
    display: none;
  }

  body > .section-nav.phone > .state-badge {
    position: sticky;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 43px;
    min-height: 43px;
    margin: 0px;
    padding: 0 14px 0 10px !important;
    background: var(--iv-paper);
    text-decoration: none !important;
    font-size: 12px !important;
    line-height: 1;
  }

  body > .section-nav.phone > .state-badge::before {
    left: 0;
  }

  body > .section-nav.phone .page-selector-wrapper {
    display: contents;
  }

  body > .section-nav.phone .page-selector {
    display: none !important;
  }

  body > .section-nav.phone .page-dropdown,
  body > .section-nav.phone .page-dropdown.open {
    position: static;
    z-index: 1;
    display: flex !important;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body > .section-nav.phone .page-option {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 43px;
    min-height: 43px;
    margin: 0px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--iv-neutral);
    font-family: var(--iv-font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
  }

  body
    > .section-nav.phone
    .page-option:is(:hover, :focus-visible, [aria-current="page"]) {
    border-bottom-color: var(--iv-orange);
    color: var(--iv-ink);
    font-weight: 750;
  }

  body .iv-global-banner.iv-site-header > .iv-banner-shell.iv-header-inner {
    grid-template-columns: 1fr auto;
    gap: 16px;
    width: min(calc(100% - 40px), 1360px);
    min-height: 72px;
  }

  body .iv-global-banner.iv-site-header .iv-header-logo img {
    width: 182px;
  }

  body .iv-global-banner.iv-site-header .iv-header-nav,
  body .iv-global-banner.iv-site-header .iv-header-actions > .iv-account-link {
    display: none;
  }

  body .iv-global-banner.iv-site-header .iv-header-actions > #theme-toggle {
    display: none !important;
  }

  body .iv-global-banner.iv-site-header .iv-header-actions {
    gap: 9px;
  }

  body .iv-global-banner.iv-site-header .iv-menu-toggle {
    display: inline-grid;
  }

  body .iv-global-banner.iv-site-header .iv-banner-menu {
    display: block;
  }

  body .iv-global-banner.iv-site-header .iv-banner-menu-theme {
    display: flex;
  }

  body .iv-global-banner.iv-site-header .state-dropdown {
    display: none;
  }
}

@media (max-width: 980px) {
  body .iv-global-banner.iv-site-header .iv-header-nav .get_connect {
    display: none;
  }
}

@media (max-width: 900px) {
  body .iv-global-banner.iv-site-header .iv-header-nav .about_us {
    display: none;
  }
}

@media (max-width: 640px) {
  body
    .iv-global-banner.iv-site-header
    :is(.atlas-home-input, .atlas-home-select) {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  body .iv-global-banner.iv-site-header > .iv-banner-shell.iv-header-inner {
    width: min(calc(100% - 20px), 1360px);
    min-height: 64px;
  }

  body .iv-global-banner.iv-site-header .iv-header-logo img {
    width: 144px;
  }

  body .iv-global-banner.iv-site-header .iv-donate-link {
    gap: 0;
    padding: 8px 10px;
  }

  body .iv-global-banner.iv-site-header .iv-donate-link span {
    display: none;
  }

  body .iv-global-banner.iv-site-header .iv-banner-menu-panel {
    width: min(360px, calc(100vw - 10px));
  }

  body .iv-global-banner.iv-site-header .iv-banner-menu-nav {
    grid-template-columns: 1fr;
  }

  body .iv-global-banner.iv-site-header .iv-banner-menu-nav a {
    min-height: 54px;
  }

  body .iv-global-banner.iv-site-header .atlas-home-panel {
    right: -8px;
    width: min(330px, calc(100vw - 24px));
  }

  body .iv-global-banner.iv-site-header :is(.state-dropdown, .dropdown_menu) {
    box-shadow: 6px 6px 0 var(--iv-ink);
  }

  body .iv-global-banner.iv-site-header .iv-header-nav > a,
  body .iv-global-banner.iv-site-header .iv-header-nav > .dropdown_wrapper > a,
  body .iv-global-banner.iv-site-header .iv-header-actions > a,
  body .iv-global-banner.iv-site-header .iv-theme-toggle,
  body .iv-global-banner.iv-site-header .state-selector,
  body .iv-global-banner.iv-site-header .atlas-home-toggle,
  body .iv-global-banner.iv-site-header .iv-menu-toggle {
    min-height: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .iv-global-banner.iv-site-header *,
  body .iv-global-banner.iv-site-header *::before,
  body .iv-global-banner.iv-site-header *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  body .iv-global-banner.iv-site-header .atlas-home-dots span {
    animation: none;
    opacity: 1;
  }
}

/* ========================================================================== */
/* CANONICAL: integrated typography and spacing */
/* ========================================================================== */

@layer iv-system {
:root {
  --iv-space-1: 4px;
  --iv-space-2: 8px;
  --iv-space-3: 12px;
  --iv-space-4: 16px;
  --iv-space-5: 24px;
  --iv-space-6: 32px;
  --iv-space-7: 48px;
  --iv-space-8: 64px;
  --iv-copy-size: 16px;
  --iv-copy-leading: 1.6;
}

.iv-page {
  background: var(--iv-page-bg);
  color: var(--iv-page-text);
  font-family: var(--iv-font-sans);
  font-size: var(--iv-copy-size);
  line-height: var(--iv-copy-leading);
  overflow-x: clip;
}

.iv-page :where(h1, h2, h3, h4, h5, h6) {
  margin: 0 !important;
  color: inherit;
  text-transform: none !important;
}

.iv-page :is(.iv-h1, .iv-h2, .iv-h3, .iv-h4, .iv-h5, .iv-h6) {
  font-family: var(--iv-font-sans) !important;
}

.iv-page .iv-h1 {
  font-size: clamp(2.5rem, 6vw, 70px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.95 !important;
}

.iv-page .iv-h2 {
  font-size: clamp(1.75rem, 3.4vw, 3rem) !important;
  font-weight: 650 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
}

/* Footer navigation labels are compact section headers, not page headings. */
.iv-page .iv-civic-footer-links h2.iv-h2 {
  margin: 0 0 8px !important;
  color: var(--iv-light-muted) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

.iv-page .iv-h3 {
  font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
}

.iv-page .iv-h4 {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
}

.iv-page .iv-h5,
.iv-page .iv-h6 {
  font-size: 1rem !important;
  font-weight: 550 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

.iv-label,
.iv-meta,
.iv-kicker,
.iv-control-label,
.iv-section-status {
  font-family: var(--iv-font-mono) !important;
}

.iv-stack {
  display: flex;
  flex-direction: column;
  gap: var(--iv-stack-space, var(--iv-space-4));
}

.iv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iv-cluster-space, var(--iv-space-3));
}

.iv-grid {
  display: grid;
  gap: var(--iv-grid-space, var(--iv-space-5));
}

.iv-section {
  padding-block: var(--iv-section-block, var(--iv-space-8));
}

.iv-panel {
  padding: var(--iv-panel-space, var(--iv-space-5));
  border: 1px solid var(--iv-rule);
  background: var(--iv-panel-bg);
}

.iv-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--iv-control-space, var(--iv-space-3));
}

.iv-page label > :where(input, select, textarea) {
  max-width: 100%;
  margin-inline: 0 !important;
}

@media (max-width: 640px) {
  :root {
    --iv-space-7: 40px;
    --iv-space-8: 48px;
  }
}
}