/* ========================================================================== */
/* INTEGRATED: forecast compatibility */
/* ========================================================================== */

/* =========================================================
   STYLE GROUP INDEX
   01) Design Tokens and Theme
   02) Global Base and Typography
   03) Forecast Page Shell and Banners
   04) Party Controls and Primary Toggle States
   05) Candidate and District Panels
   06) Majority Tags and Scenario Badges
   07) Time and View Controls
   08) Forecast Navigation and Metadata
   09) Forecast Links and Action Buttons
========================================================= */

/* =========================================================
   03) Forecast Page Shell and Banners
========================================================= */
#forecast-headline {
  font-weight: 400;
  text-align: center;
  min-width: min(400px, 100%);
  max-width: 80%;
  margin: 0 auto;
}

#forecast-headline h2 {
  text-align: center;
  padding: 5px;
}
html {
  background-color: var(--brand_white);
}

/* =========================================================
   01) Design Tokens and Theme
========================================================= */
:root {
  --super_rep: #b2130f;
  --super_dem: #0f478d;
  --maj_rep: #ed5c59;
  --maj_dem: #4896f8;
  --tie: #b8b8b8;
}

[data-theme="dark"] {
  --super_rep: #bf3236;
  --super_dem: #2d5db5;
  --maj_rep: #f18285;
  --maj_dem: #86a8e8;
  --tie: #b8b8b8;
}
body {
  background: var(--brand_white) !important;
}

/* =========================================================
   03) Forecast Page Shell and Banners
========================================================= */

#chamber-name {
  font-weight: 400;
  color: var(--brand_black);
  padding: 0px;
  border-radius: 3px;
  white-space: nowrap;
  font-family: var(--iv-font-sans);
  font-size: 26px;
}

.race_name {
  font-weight: 700;
  white-space: nowrap;
}

#forecast-banner,
.forecast-banner {
  top: 0px;
  width: 100%;
  color: var(--brand_black);
  background-color: var(--brand_white);
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--brand_black);
  position: fixed;
  z-index: 1000;
  padding: 10px;
  height: 60px;
}

#data-banner {
  top: 61px;
  width: 100%;
  color: var(--brand_black);
  background-color: var(--brand_white);
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--brand_black);
  position: sticky;
  z-index: 1000;
  padding: 5px;
  height: 40px;
}

#forecast-banner img,
.forecast-banner img {
  height: 40px;
  width: unset;
}

.sn-logo {
  margin-left: 10px;
}

/* =========================================================
   02) Global Base and Typography
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
text,
a {
  font-family: var(--iv-font-sans);
  color: var(--brand_black);
}

h3 {
  margin-top: 15px;
}

.number {
  font-family: var(--iv-font-mono);
}

/* =========================================================
   04) Party Controls and Primary Toggle States
========================================================= */
.party_button {
  margin: 0;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 24px;
}
#headline {
  padding: 4px 10px;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  margin: 0px;
}

/*.css('border-radius', '5px 0px 0px 5px')*/
.dem_primary {
  border-radius: 10px 0px 0px 10px;
}

.rep_primary {
  border-radius: 0px 10px 10px 0px;
}

/*.css('border-radius', '5px 0px 0px 5px')*/
.ag_primary {
  border-radius: 10px 0px 0px 10px;
}

#primary_breakdown {
  min-height: 300px;
}

/* =========================================================
   07) Time and View Controls
========================================================= */
.lg_primary {
  border-radius: 0px 10px 10px 0px;
}

.mapdisplay {
  background-color: var(--brand_white);
  color: var(--brand_black);
  border: 2px solid var(--brand_black);
  border-radius: 5px;
  font-family: var(--iv-font-mono);
  font-size: 15px;
}
.mapdisplay.active {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 800;
}
.phone.party_button {
  display: inline-block;
  margin-top: 10px;
  border-radius: 5px !important;
  padding: 5px 10px;
}
.phone#headline {
  border-radius: 10px;
  width: 100%;
}

/* =========================================================
   02) Global Base and Typography
========================================================= */
.number-span {
  color: white;
}
hr {
  border: 1px solid var(--lt_gray, #d9d9d9) !important;
  opacity: 1 !important;
  border-bottom: none !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

[data-theme="dark"] hr {
  border: 1px solid var(--lt_gray, #d9d9d9) !important;
  opacity: 1 !important;
  border-bottom: none !important;
}

.number-span {
  font-family: var(--iv-font-mono);
}

/* =========================================================
   05) Candidate and District Panels
========================================================= */

#cand_div .cand-columns {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 100%;
}

#cand_div .district-column,
#cand_div .candidate-column {
  min-width: 250px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.candidate-column {
  min-width: 300px !important;
}

#cand_div .cand-columns h4 {
  margin: 0;
  margin-bottom: 8px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#cand_div .column-body {
  flex: 1;
  max-height: 430px;
  overflow-y: auto;
  padding-right: 10px;
}

#cand_div .column-body::-webkit-scrollbar {
  width: 3px;
  background-color: var(--lt_gray);
}
#cand_div .column-body::-webkit-scrollbar-thumb {
  background-color: var(--brand_black);
  border-radius: 3px;
}

.phone-district-scroll::-webkit-scrollbar {
  height: 3px;
  background-color: var(--lt_gray);
}
.phone-district-scroll::-webkit-scrollbar-thumb {
  background-color: var(--brand_black);
  border-radius: 3px;
}

#cand_div .column-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

#cand_div .district-column ul,
#cand_div .candidate-column ul {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

#cand_div .district-column ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--lt_gray);
  cursor: pointer;
}

#cand_div .district-column ul li:last-child {
  border-bottom: none;
}

#cand_div .district-column ul li.active {
  background: var(--brand_black);
}

#cand_div .district-column ul li:hover {
  background: var(--lt_gray);
}
.district-label{
  margin-bottom: 0px !important;
}

#cand_div .district-column ul li .district-count {
  font-size: 0.75rem;
  color: var(--brand_black);
  opacity: 0.8;
}

#cand_div .candidate-column ul li {
  padding: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

#cand_div .candidate-column ul li:last-child {
  border-bottom: none;
}

#cand_div .candidate-column ul li .candidate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#cand_div .candidate-column ul li .candidate-name {
  font-weight: 600;
  font-size: 0.95rem;
}

#cand_div .candidate-column ul li .party-pill,
#cand_div .candidate-column ul li .stage-pill {
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

#cand_div .candidate-column ul li .party-pill {
  color: var(--brand_white);
}

#cand_div .candidate-column ul li .stage-pill {
  background: var(--brand_black);
  color: var(--brand_white);
}

#cand_div .candidate-column ul li .cycle-label {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--brand_black);
  opacity: 0.8;
}

#cand_div .candidate-column ul li .candidate-link {
  display: inline-flex;
  font-size: 0.75rem;
  text-decoration: underline;
  color: var(--brand_black);
  margin-top: 4px;
}

#cand_div .candidate-meta {
  margin-bottom: 8px;
}

#cand_div .candidate-meta p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand_black);
}

#cand_div .phone-cand-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#cand_div .phone-district-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--lt_gray);
  padding-bottom: 6px;
}

#cand_div .phone-district-scroll ul {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 4px 8px;
  list-style: none;
}

#cand_div .phone-district-scroll li {
  flex: 0 0 auto;
  max-width: 220px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--lt_gray);
  background: var(--brand_white);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}
.district-label {
  margin: 0px;
}

#cand_div .phone-district-scroll .district-label {
  font-weight: 600;
  font-size: 0.95rem;
}

#cand_div .phone-district-scroll .district-count {
  font-size: 0.75rem;
  opacity: 0.75;
  color: var(--brand_black);
}

#cand_div .phone-district-scroll li.active {
  border-color: var(--brand_black);
  background: var(--brand_black);
  color: var(--brand_white);
}

#cand_div .phone-district-scroll li.active .district-count {
  opacity: 1;
  color: var(--brand_white);
}

#cand_div .phone-candidate-column {
  padding: 0 8px;
}

#cand_div .phone-candidate-column .column-body {
  padding-right: 0;
  max-height: none;
  overflow-y: visible;
}

/* =========================================================
   06) Majority Tags and Scenario Badges
========================================================= */
.forecast-line {
  font-weight: 350;
  line-height: 1.5;
  font-size: 26px;
  margin: 2px;
}
.forecast-line span {
  font-size: 26px;
  font-family: var(--iv-font-sans);
}

#state-title {
  font-size: 36px;
  margin-top: 0px;
  margin-bottom: 10px;
  font-weight: 350;
  padding: 5px;
  color: var(--brand_black);
  display: inline-block;
}
.state-title-span {
  font-size: 36px;
  margin: 0px;
  font-weight: 350;
  padding: 5px 0px;
  color: var(--brand_black);
  display: inline-block;
  font-family: var(--iv-font-sans);
}

h3 {
  font-size: 30px;
  margin: 2px;
}

.maj-democrats {
  border: var(--brand_blue) 1px solid;
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--brand_blue);
  background-color: var(--brand_white);
  padding: 0px 3px;
  margin: 1px;
  border-radius: 2px;
}

.maj-democrats.active {
  background-color: var(--brand_blue);
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--brand_white);
  padding: 0px 3px;
  margin: 1px;
  border: none;
}

.super-democrats {
  border: var(--brand_blue) 1px solid;
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--brand_blue);
  background-color: var(--brand_white);
  padding: 0px 3px;
  margin: 1px;
  border-radius: 2px;
}

.super-democrats.active {
  background-color: var(--brand_blue);
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--WHITE);
  padding: 0px 3px;
  margin: 1px;
  border: none;
  border-radius: 2px;
}

.maj-republicans {
  border: var(--brand_red) 1px solid;
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--brand_red);
  background-color: var(--brand_white);
  padding: 0px 3px;
  margin: 1px;
  border-radius: 2px;
}

.maj-republicans.active {
  background-color: var(--brand_red);
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--brand_white);
  padding: 0px 3px;
  margin: 1px;
  border: none;
}

.super-republicans {
  border: var(--brand_red) 1px solid;
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--brand_red);
  background-color: var(--brand_white);
  padding: 0px 3px;
  margin: 1px;
  border-radius: 2px;
}
.super-republicans.active {
  background-color: var(--brand_red);
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--brand_white);
  padding: 0px 3px;
  margin: 1px;
  border: none;
}

.majority {
  border: var(--brand_black) 1px solid;
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--brand_black);
  background-color: var(--brand_white);
  padding: 0px 3px;
  margin: 1px;
}

.majority.active {
  font-family: var(--iv-font-mono);
  font-weight: 500;
  color: var(--brand_white);
  margin: 1px;
  border: none;
  background-color: var(--brand_black);
  padding: 4px 7px;
}

.tipbuts {
  padding: 4px 7px;
  display: none;
  border-radius: 2px;
  color: var(--brand_black);
}

.tipbuts.active {
  padding: 4px 7px;
  display: none;
}

/* =========================================================
   08) Forecast Navigation and Metadata
========================================================= */
.chamber-name {
  font-weight: 500;
  color: var(--brand_black);
  border-radius: 5px;
  white-space: nowrap;
  font-size: 26px;
  font-family: var(--iv-font-sans);
}

.rtw-button {
  font-family: var(--iv-font-mono);
  font-size: 14px;
  background-color: var(--brand_white);
  color: var(--brand_black);
  border: 1px solid var(--brand_black);
  font-weight: 350;
  margin: 10px 2px;
  border-radius: 3px;
}

.rtw-button:hover {
  background-color: var(--lt_gray);
  color: var(--brand_black);
  font-weight: 400;
}

.rtw-button.selected {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 500;
}

.time-button {
  font-family: var(--iv-font-mono);
  font-size: 14px;
  background-color: var(--brand_white);
  color: var(--brand_black);
  border: 1px solid var(--brand_black);
  font-weight: 350;
  margin: 10px 2px;
  border-radius: 3px;
}

.time-button:hover {
  background-color: var(--lt_gray);
  color: var(--brand_black);
  font-weight: 400;
}

.time-button.active {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-weight: 500;
}

/* =========================================================
   07) Time and View Controls
========================================================= */
#search_button {
  padding: 6px;
  background: var(--lt_gray);
  stroke: var(--brand_black);
  margin: 10px 3px;
  border-radius: 3px;
}

#nav_menu_forecast {
  background-color: var(--brand_white);
  position: fixed;
  top: 190px;
  left: 10px;
  z-index: 900;
  width: 120px;
  border-radius: 3px;
  opacity: 0.9;
}
#nav_menu_forecast p {
  margin: 2px 1px;
  padding: 1px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 350;
  font-family: var(--iv-font-mono);
  color: var(--gray);
}

#nav_menu_forecast p:hover {
  color: var(--brand_black);
  font-weight: 600;
}

#nav_menu_forecast p.active {
  color: var(--brand_black);
  font-weight: 900;
  font-size: 14px;
}

.descrips {
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin-bottom: 10px;
  display: inline-block;
}

#updated_time {
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 5px;
  display: inline-block;
  color: var(--brand_black);
  border-bottom: 1px solid var(--brand_black);
  padding: 1px 5px;
  font-family: var(--iv-font-mono);
  font-weight: 600;
}

#make_your_own_forecast {
  background-color: var(--lt_gray);
  color: var(--brand_black);
  padding: 6px 10px;
  border-radius: 5px;
  font-family: var(--iv-font-mono);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--brand_black);
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

#fav_party {
  font-weight: 600;
  background-color: var(--brand_white);
  padding: 2px 4px;
}

.sw-header {
  font-weight: 350;
  font-size: 22px;
  width: 100%;
  line-height: 1.5;
}

.sw-header-name {
  color: var(--brand_black);
  font-family: var(--iv-font-sans);
  font-weight: 500;
}

.sw-vote-header {
  font-family: var(--iv-font-sans);
  color: var(--brand_black);
  font-weight: 500;
  border-bottom: none !important;
}

.sw-odds-header {
  font-family: var(--iv-font-sans);
  font-weight: 500;
  background: none !important;
}

#cast-link {
  background-color: var(--lt_gray);
  font-family: var(--iv-font-mono);
  font-size: 13px;
  color: var(--brand_black);
  padding: 6px 10px;
  border-radius: 3px;
}

/* =========================================================
   09) Forecast Links and Action Buttons
========================================================= */
.forecast_button {
  background-color: var(--brand_white);
  font-family: var(--iv-font-mono);
  font-size: 15px;
  color: var(--brand_black);
  padding: 5px 9px;
  margin: 0px 5px !important;
  border-radius: 5px;
  display: inline-block;
  text-decoration: none;
  font-weight: 400;
  vertical-align: bottom;
  border: 2px solid var(--brand_black);
}

.forecast_button.active {
  background-color: var(--brand_black);
  color: var(--brand_white);
  font-size: 17px;
  font-weight: 800;
  padding: 10px;
  pointer-events: none;
}
#conf_interval {
  font-family: var(--iv-font-mono);
  font-size: 13px;
  color: var(--brand_black);
  padding: 4px 8px;
  border-radius: 5px;
  background-color: var(--lt_gray);
  display: inline-block;
  margin-bottom: 0px;
}

#zoom-out-button {
  font-family: var(--iv-font-mono);
  border-radius: 5px;
  border: 2px solid var(--brand_black);
  padding: 6px 10px;
  background-color: var(--lt_gray);
  color: var(--brand_black);
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 600px) {
  #state-title {
    font-size: 24px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .state-title-span {
    font-size: 24px;
  }
  .forecast-line,
  .forecast-line span,
  #chamber-name,
  .chamber-name {
    font-size: 20px;
    max-width: 90%;
    margin: 0 auto;
  }

  h3{
    font-size: 22px;
    font-weight: 400;
    max-width: 90%;
    margin: 0 auto;
  }


  #seat_breakdown p,
  .sw-header {
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 350;
  }
  .sw-header {
    max-width: 90%;
    margin-left: 2%;
  }
  #seat_breakdown span {
    font-size: 16px !important;
  }
  hr {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  #cand_div{
    max-width: 95%;
    margin: 0 auto;
  }

  .descrips {
    line-height: 1.5;
    max-width: 90%;
    margin: 0 auto 10px auto;
    font-size: 14px;
  }
  .forecast_button {
    font-size: 14px;
    padding: 6px 8px;
  }
  .forecast_button.active {
    font-size: 16px;
    padding: 8px;
  }
  #tipping_div {
    max-width: 95%;
    margin: 0 auto;
  }
}

/* IV forecast pages receive their colors from iv.css. The data attribute is
   unique to the IV forecast templates, so legacy forecast routes retain the
   historical palette declared at the top of this file. */
html[data-forecast-template] {
  --brand_white: var(--iv-paper);
  --brand_black: var(--iv-ink);
  --brand_red: var(--iv-red);
  --brand_blue: var(--iv-blue);
  --lt_gray: var(--iv-panel);
  --gray: var(--iv-neutral);
  --WHITE: var(--iv-on-party);
  --super_rep: var(--iv-forecast-r-solid);
  --super_dem: var(--iv-forecast-d-solid);
  --maj_rep: var(--iv-forecast-r-very-likely);
  --maj_dem: var(--iv-forecast-d-very-likely);
  --tie: var(--iv-purple);
  background-color: var(--iv-paper);
}

body.iv-page .number-span {
  color: var(--iv-on-party) !important;
}

body.iv-page hr,
[data-theme="dark"] body.iv-page hr {
  border-color: var(--iv-rule-soft) !important;
}

body.iv-page #cand_div .candidate-column ul li {
  border-bottom-color: var(--iv-rule-soft);
}

body.iv-page #make_your_own_forecast {
  box-shadow: 0 4px 6px var(--iv-shadow);
}