/* Scoped to .cgdoc: the host styles headings and images but not tables,
   code or rules, and it owns the bare element selectors. */
.cgdoc { --cgd-rule: #e2e6ea; --cgd-muted: #5b636f; --cgd-panel: #f6f7f8; }
@media (prefers-color-scheme: dark) {
  .cgdoc { --cgd-rule: #2a3038; --cgd-muted: #99a3b0; --cgd-panel: #1b1f26; }
}
:root[data-theme="dark"] .cgdoc { --cgd-rule: #2a3038; --cgd-muted: #99a3b0; --cgd-panel: #1b1f26; }
:root[data-theme="light"] .cgdoc { --cgd-rule: #e2e6ea; --cgd-muted: #5b636f; --cgd-panel: #f6f7f8; }

.cgdoc { margin-top: 2.5rem; }
.cgdoc img { display: block; margin: 1.5rem 0; border: 1px solid var(--cgd-rule); border-radius: 4px; }
.cgdoc table { border-collapse: collapse; width: 100%; max-width: 100%;
  font-size: .93rem; margin: 1.25rem 0; }
.cgdoc th, .cgdoc td {
  text-align: left; padding: .5rem .85rem .5rem 0;
  border-bottom: 1px solid var(--cgd-rule); vertical-align: top;
}
.cgdoc th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cgd-muted); font-weight: 600; }
.cgdoc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--cgd-panel); border: 1px solid var(--cgd-rule);
  border-radius: 3px; padding: .1em .35em;
}
.cgdoc pre {
  background: var(--cgd-panel); border: 1px solid var(--cgd-rule);
  border-radius: 4px; padding: .8rem 1rem; overflow-x: auto; font-size: .88rem;
}
.cgdoc pre code { background: none; border: 0; padding: 0; font-size: 1em; }
.cgdoc hr { border: 0; border-top: 1px solid var(--cgd-rule); margin: 2.25rem 0; }
.cgdoc blockquote { margin: 1.25rem 0; padding-left: 1rem;
  border-left: 3px solid var(--cgd-rule); color: var(--cgd-muted); }

/* The map sits under the page's own <h1>, so its heading is a figure heading.
   cartogram.css styles .cg-head h1; this page uses h2 for it instead, both so
   the page has a single h1 and so the map does not shout over the title. */
.cg-head h2 {
  margin: 0 0 4px;
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ---------------------------------------------------- seat-change figure --
 * Colours are set per mark in the SVG, because they carry direction and have to
 * match the map above; everything else is text, and wears the page's ink. */
.sc-wrap { margin: 1.75rem 0; overflow-x: auto; }
.sc { width: 100%; max-width: 660px; height: auto; display: block; }
.sc text { fill: currentColor; font-family: inherit; }
.sc-head { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.sc-side { font-size: 11px; opacity: .45; font-style: italic; }
.sc-name { font-size: 13.5px; font-weight: 600; }
.sc-seats { font-size: 13px; opacity: .55; font-variant-numeric: tabular-nums; }
.sc-range { font-size: 12.5px; font-weight: 700; }
.sc-key { font-size: 11.5px; opacity: .6; }
.sc-rule { stroke: currentColor; opacity: .15; stroke-width: 1; }
/* A pale block is the same hue at a fraction of its weight, outlined so it keeps
 * its edge against either surface. */
.sc-blk.sc-maybe { fill-opacity: .18; stroke-width: 1.25; stroke-opacity: .55; }
.sc-row:hover .sc-name { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------- state silhouettes -- */
/* The source outlines each come in a square viewBox, already padded so every
 * state reads at a comparable size. So the mark has to be square too -- in a
 * wider box the square content fits the short side and every state shrinks. */
.state-mark {
  width: 1.5em; height: 1.5em; vertical-align: -0.35em; margin-right: .4em;
  fill: currentColor; opacity: .32;
}
.cgdoc h3 .state-mark { opacity: .38; }
.sc-zero { stroke: currentColor; opacity: .3; stroke-width: 1; }
.sc-trend { font-size: 12.5px; opacity: .6; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- the exclusion surface --
 * An interpolated field, not a choropleth: tract values blended by distance and
 * contoured. Outlines and type follow the page, so the figure sits in either
 * theme; the bands are set here rather than in the file because a dark page
 * needs its own ramp. Inverting the light one would put a near-white lowest
 * band on a dark ground, which reads as a white landmass rather than as "almost
 * nobody here". Both ramps step away from their own background. */
.xs-wrap { margin: 1.75rem 0; }
.xs { width: 100%; height: auto; display: block; }
.xs-state { stroke: currentColor; stroke-width: .6; opacity: .3; }
.xs-nation { stroke: currentColor; stroke-width: .9; opacity: .5; }
.xs-rule { stroke: currentColor; opacity: .18; }
.xs-cap { fill: currentColor; opacity: .72; font-size: 12px; }
.xs-tick { fill: currentColor; opacity: .58; font-size: 11px; font-variant-numeric: tabular-nums; }
/* the hatch marks country whose value is a state average, not a DHS count */
.xs-hatchline { stroke: currentColor; stroke-width: .8; opacity: .16; }

.xs-b0 { fill: #f4f1f7; } .xs-b1 { fill: #ded4e9; } .xs-b2 { fill: #bda6d3; }
.xs-b3 { fill: #9678b9; } .xs-b4 { fill: #6d4a9c; } .xs-b5 { fill: #472a78; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xs-b0 { fill: #23212a; }
  :root:not([data-theme="light"]) .xs-b1 { fill: #332c44; }
  :root:not([data-theme="light"]) .xs-b2 { fill: #493b64; }
  :root:not([data-theme="light"]) .xs-b3 { fill: #654e8b; }
  :root:not([data-theme="light"]) .xs-b4 { fill: #8a6cb4; }
  :root:not([data-theme="light"]) .xs-b5 { fill: #b195d8; }
}
:root[data-theme="dark"] .xs-b0 { fill: #23212a; }
:root[data-theme="dark"] .xs-b1 { fill: #332c44; }
:root[data-theme="dark"] .xs-b2 { fill: #493b64; }
:root[data-theme="dark"] .xs-b3 { fill: #654e8b; }
:root[data-theme="dark"] .xs-b4 { fill: #8a6cb4; }
:root[data-theme="dark"] .xs-b5 { fill: #b195d8; }