/* House ratings chart. Bar markup and segment colors are the News Election Watch
   forecast chart (www/news/css/news.css .nw-fc, www/news/css/news-theme.css).
   The chart is static. It does not read the Decision Desk.
   News Election Watch reuses this card for #nw-house-ratings, #nw-senate-ratings,
   and #nw-governor-ratings. Those ids are extra selectors only.
   #house-ratings keeps the same declarations. */

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) {
  --hc-ink: #1d261d;
  --hc-muted: #55615a;
  --hc-link: #0e5c14;
  --hc-bg: #ffffff;
  --hc-line: #c5d6c6;
  --hc-track: #d5ddd4;
  --hc-mark-bg: #fff4d6;
  --hc-mark-ink: #6a4a00;
  --nw-ink: var(--hc-ink);
  --nw-muted: var(--hc-muted);
  --nw-line: var(--hc-line);
  --nw-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  box-sizing: border-box;
  width: min(1180px, calc(100% - 1.5rem));
  max-width: 100%;
  margin: 1rem auto;
  padding: 0.95rem 1rem 1rem;
  background: var(--hc-bg);
  color: var(--hc-ink);
  border: 1px solid var(--hc-line);
  border-radius: 14px;
  color-scheme: light;
  scroll-margin-top: calc(var(--header-height, 64px) + 0.5rem);
}

@media (prefers-color-scheme: dark) {
  :is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) {
    --hc-ink: #e4e7e4;
    --hc-muted: #a3aea6;
    --hc-link: #9be39a;
    --hc-bg: #121412;
    --hc-line: #24402a;
    --hc-track: #141814;
    --hc-mark-bg: #3d3410;
    --hc-mark-ink: #f3d27a;
    color-scheme: dark;
  }
}

html[data-theme="light"] :is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) {
  --hc-ink: #1d261d;
  --hc-muted: #55615a;
  --hc-link: #0e5c14;
  --hc-bg: #ffffff;
  --hc-line: #c5d6c6;
  --hc-track: #d5ddd4;
  --hc-mark-bg: #fff4d6;
  --hc-mark-ink: #6a4a00;
  color-scheme: light;
}

html[data-theme="dark"] :is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings),
.dd--dark :is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) {
  --hc-ink: #e4e7e4;
  --hc-muted: #a3aea6;
  --hc-link: #9be39a;
  --hc-bg: #121412;
  --hc-line: #24402a;
  --hc-track: #141814;
  --hc-mark-bg: #3d3410;
  --hc-mark-ink: #f3d27a;
  color-scheme: dark;
}

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) :is(h2, h3, p, li) {
  color: var(--hc-ink);
}

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) a {
  color: var(--hc-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) a:hover,
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) a:focus {
  color: var(--hc-link);
}

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) a:focus-visible {
  outline: 3px solid #39ff14;
  outline-offset: 2px;
}

body.dd-page #dd-root > #house-ratings {
  margin-top: calc(var(--header-height, 64px) + 1rem);
}

body.dd-has-banner.dd-page #dd-root > #house-ratings {
  margin-top: 1rem;
}

body.dd-page #dd-root > #house-ratings + [data-dd-fallback] {
  padding-top: 0.5rem;
}

/* The live desk is appended after the chart. Its mast offset clears a fixed
   header that the chart already clears, so drop that extra gap. */
body.dd-page #dd-root > #house-ratings ~ .dd > .dd-mast {
  padding-top: 0.35rem;
}

@media (min-width: 1400px) {
  body.dd-page #dd-root > #house-ratings {
    width: min(1360px, calc(100% - 1.5rem));
  }
}

body[data-dd-preview-page] #house-ratings {
  width: 100%;
  margin-top: 0;
}

/* Forecast bar, from news.css .nw-fc. */
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc { margin: 0.35rem 0 0.15rem; max-width: 100%; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__chamber { margin: 0 0 0.35rem; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0 0 0.3rem; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__name { margin: 0; font: 700 1.35rem/1.3 var(--font-heading, "Onest", "Inter", sans-serif); color: var(--nw-ink); }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__src { margin: 0; font: 400 13px/1.4 var(--font-body, "Inter", sans-serif); color: var(--nw-muted); overflow-wrap: anywhere; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__scale { position: relative; padding-top: 1.25rem; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__majnum { position: absolute; top: 0; transform: translateX(-50%); font: 700 13px/1 var(--nw-mono); color: var(--nw-ink); white-space: nowrap; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__track { position: relative; height: 36px; border-radius: 6px; overflow: hidden; background: var(--hc-track); }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__svg { display: block; width: 100%; height: 36px; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__seg--solid-d { fill: #1a4e86; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__seg--likely-d { fill: #3d6fa3; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__seg--lean-d { fill: #8eb4d6; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__seg--toss { fill: #9aa09a; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__seg--lean-r { fill: #e0aaa4; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__seg--likely-r { fill: #a85a54; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__seg--solid-r { fill: #8a3834; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__maj { fill: none; stroke: #102018; stroke-width: 4px; vector-effect: non-scaling-stroke; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__maj--core { stroke: #f7faf7; stroke-width: 2px; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__counts { position: absolute; inset: 0; display: flex; pointer-events: none; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__n { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; font: 700 13px/1 var(--nw-mono); color: transparent; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__n--solid { color: #f7faf7; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.1rem; margin: 0.45rem 0 0; font: 400 13px/1.45 var(--font-body, "Inter", sans-serif); color: var(--nw-ink); }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__key { white-space: nowrap; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__sep { color: var(--nw-muted); }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__key::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.35em; border-radius: 2px; vertical-align: -0.05em; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__key--solid-d::before { background: #1a4e86; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__key--likely-d::before { background: #3d6fa3; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__key--lean-d::before { background: #8eb4d6; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__key--toss::before { background: #9aa09a; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__key--lean-r::before { background: #e0aaa4; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__key--likely-r::before { background: #a85a54; }
:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__key--solid-r::before { background: #8a3834; }

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .hc-house__totals {
  margin: 0.35rem 0 0;
  font: 700 15px/1.4 var(--font-heading, "Onest", "Inter", sans-serif);
}

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .hc-toss-title {
  margin: 0.85rem 0 0.4rem;
  font: 700 15px/1.3 var(--font-heading, "Onest", "Inter", sans-serif);
}

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .hc-toss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .hc-toss li {
  margin: 0;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #9aa09a;
  color: #102018;
  font: 700 13px/1.3 var(--nw-mono);
}

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .hc-house__sources {
  margin: 0.75rem 0 0;
  font: 400 13px/1.45 var(--font-body, "Inter", sans-serif);
  color: var(--hc-muted);
  overflow-wrap: anywhere;
}

:is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .hc-house__label {
  margin: 0.75rem 0 0;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  background: var(--hc-mark-bg);
  color: var(--hc-mark-ink);
  font: 700 15px/1.4 var(--font-body, "Inter", sans-serif);
}

@media (max-width: 600px) {
  :is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) {
    padding: 0.85rem 0.75rem 0.9rem;
  }

  :is(#house-ratings, #nw-house-ratings, #nw-senate-ratings, #nw-governor-ratings) .nw-fc__name {
    font-size: 1.2rem;
  }
}

/* News cards sit inside the Election Watch box, so they fill that box.
   The election page card keeps the column width from the rule above. */
#nw-house-ratings,
#nw-senate-ratings,
#nw-governor-ratings {
  width: 100%;
  margin: 0.9rem 0 0;
  scroll-margin-top: calc(var(--header-height) + 50px);
}

#nw-senate-ratings,
#nw-governor-ratings {
  margin-top: 0.75rem;
}