/* Layout: one narrow column at every width, sized for a phone or a CCNow embed. Picker bar on top; below it a
   sticky bar of section links that wrap rather than scroll sideways, then the area name, household costs, what
   residents think, the climate trends behind the costs, and air. Each topic is one band: the statement and
   sources, then its then-and-now comparisons underneath. */
:root {
  --bg: #f7f7f7;
  --surface: #ffffff;
  --ink: #121212;
  --ink-2: #495057;
  --muted: #6c757d;
  --grid: #e6e6e6;
  --axis: #c4c4c4;
  --ring: rgba(18, 18, 18, 0.08);
  --shadow: 0 14px 14px rgba(18, 18, 18, 0.05);
  --accent: #d3194a;          /* crimson: kickers, the selected area, the latest value */
  --warm: #f7951d;            /* orange rule on cards */
  --link: #0d54ad;
  --series-1: #0d54ad;        /* the yearly series */
  --series-2: #e8532b;        /* recent average / second series */
  --hi: #d3194a;              /* record highs (diverging warm pole) */
  --lo: #0d54ad;              /* record lows (diverging cool pole) */
  --map-land: #e8e8e8;
  --map-line: #ffffff;
  --map-area: #d3194a;
  --chip: #efefef;
  --cat-1: #0d54ad; --cat-2: #e8532b; --cat-3: #1a9a6c; --cat-4: #f7951d; --cat-5: #d3194a;
  --dem: #1f5fbf; --rep: #c8252c;    /* party colors in Climate Voting Records */
  --font-title: "Lyon Display Web", Georgia, serif;   /* the tool's name only */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121212; --surface: #1c1c1c; --ink: #f2f2f2; --ink-2: #c4c8cc; --muted: #8f969c;
    --grid: #2b2b2b; --axis: #444444; --ring: rgba(255, 255, 255, 0.10); --shadow: none;
    --accent: #f0587e; --warm: #f7a440; --link: #6fa8f0; --series-1: #5b9be6; --series-2: #f07a52; --hi: #f0587e; --lo: #5b9be6;
    --map-land: #2a2a2a; --map-line: #1c1c1c; --map-area: #f0587e; --chip: #262626;
    --cat-1: #5b9be6; --cat-2: #f07a52; --cat-3: #2bb383; --cat-4: #f7a440; --cat-5: #f0587e;
    --dem: #6fa0f0; --rep: #f0645a;
  color-scheme: dark;
}

@font-face {
  font-family: "Lyon Display Web"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/lyon-display-medium.woff2") format("woff2");
}

* { box-sizing: border-box; }
body {
  margin: 0; font-variant-numeric: tabular-nums; background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--font-body);
}
a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }

.wrap { max-width: 760px; margin: 0 auto; padding-inline: 20px; }

/* top bar */
.bar { background: var(--surface); border-bottom: 0; box-shadow: var(--shadow); }
.bar::after { content: ""; display: block; height: 6px; background: linear-gradient(90deg, var(--accent), var(--warm)); }
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 12px; }
.brand { display: flex; flex-direction: column; gap: 6px; }
.brand .logo { display: block; height: 22px; width: auto; }
.brand .tool { font: 500 20px/1.1 var(--font-title); }
/* The landing page's title is the tool name, so the header shows the logo alone there. */
.is-landing .brand .tool { display: none; }
:root[data-theme="dark"] .brand .logo { filter: invert(1) hue-rotate(180deg); }
/* On the landing page the search box sits in the page, above the map. */
.landing .picker { margin: 16px 0 0; max-width: 640px; }
.landing .picker #q { font-size: 16px; padding: 11px 14px; }

.picker { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
#q {
  width: 100%; font: 15px var(--font-body); padding: 9px 12px; border-radius: 4.8px;
  border: 1px solid var(--axis); background: var(--surface); color: var(--ink);
}
#results {
  position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--ring); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 360px; overflow-y: auto;
}
#results li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 5px; cursor: pointer; }
#results li[aria-selected="true"], #results li:hover { background: var(--chip); }
#results .t { font: 12px var(--font-data); color: var(--muted); white-space: nowrap; }

/* area header */
.area { padding-block: 24px 4px; }
.eyebrow { font: 750 13px/1 var(--font-body); letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); }
h1 { font: 650 clamp(30px, 5vw, 46px)/1.08 var(--font-display); letter-spacing: -0.02em; margin: 10px 0 12px; text-wrap: balance; }
.facts-line { color: var(--ink-2); margin: 0 0 6px; }



/* climate connection inside a cost section */
.connect .k { font: 600 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.connect { border-left: 4px solid var(--accent); background: var(--surface); box-shadow: var(--shadow); border-radius: 0; padding: 10px 14px; margin: 0 0 14px; max-width: 62ch; }
.connect p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.connect a { font-size: 13px; font-weight: 600; color: var(--link); text-decoration: none; }
.connect .cite { font-size: 12.5px; color: var(--muted); }
.connect .here .k2 { font-weight: 600; }
.connect .cite a { font-size: inherit; font-weight: 400; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--axis); }

/* page parts: costs, then climate, then context */
.part { padding-block: 40px 4px; border-bottom: 2px solid var(--ink); }
.part h2 { font: 650 clamp(26px, 4vw, 34px)/1.1 var(--font-display); letter-spacing: -0.015em; margin: 0 0 6px; }
.part p { margin: 0 0 12px; font-size: 16px; color: var(--ink-2); max-width: 70ch; }

/* page with sticky section nav: a column on the left on wide screens, a bar across the top on narrow ones */
.content { min-width: 0; }
.has-nav .wrap { max-width: 1004px; }
.layout { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 36px; align-items: start; }
nav.side { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 28px 0 24px; display: flex; flex-direction: column; gap: 1px; }
nav.side .k { font: 600 11px/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 16px 0 4px 10px; }
nav.side a { font: 500 14px/1.25 var(--font-body); padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--ink-2); }
nav.side a:hover { background: var(--chip); color: var(--ink); }
nav.side a[aria-current] { background: var(--chip); color: var(--ink); font-weight: 600; }
nav.side a.geo { font: 600 18px/1.2 var(--font-display); color: var(--ink); padding: 0 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ring); border-radius: 0; }
nav.side a.geo:hover { background: none; }
nav.side a.about { margin-top: 16px; }
.area, section.topic, .part, .methods { scroll-margin-top: 16px; }
@media (max-width: 960px) {
  .has-nav .wrap { max-width: 760px; }
  .layout { display: block; }
  nav.side {
    z-index: 5; flex-direction: row; flex-wrap: wrap; gap: 4px; max-height: none; overflow: visible;
    margin-inline: -20px; padding: 6px 20px; background: var(--bg); border-bottom: 1px solid var(--ring);
  }
  nav.side .k, nav.side a.geo { display: none; }
  nav.side a.about { margin-top: 0; }
  nav.side a { font-size: 12px; line-height: 1.2; padding: 4px 8px; border-radius: 999px; white-space: nowrap; background: var(--chip); }
  nav.side a:hover { background: color-mix(in srgb, var(--chip) 80%, var(--ink)); }
  nav.side a[aria-current] { background: var(--ink); color: var(--surface); font-weight: 500; }
  /* Section links land just below the sticky bar, whose height depends on how many rows its links wrap to. */
  .area, section.topic, .part, .methods { scroll-margin-top: calc(var(--nav-h, 44px) + 8px); }
}

/* sections */
section.topic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 32px; border-bottom: 1px solid var(--ring); }
.topic h2 { font: 600 26px/1.15 var(--font-display); letter-spacing: -0.01em; margin: 8px 0 14px; }
.statement { font-size: 17px; line-height: 1.6; max-width: 62ch; margin: 0 0 14px; }
.statement strong { font-weight: 700; }
.statement .up { color: var(--accent); }
.research { border-top: 1px solid var(--ring); margin: 4px 0 14px; padding-top: 10px; max-width: 62ch; }
.research .k { font: 600 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.research ul { margin: 0; padding-left: 18px; }
.research li { font-size: 14px; line-height: 1.5; margin-bottom: 6px; }
.research a { color: var(--ink-2); font-size: 13px; }
.note { font-size: 13px; color: var(--muted); max-width: 62ch; margin: 0 0 12px; }
.sources-k { font: 600 12px/1.5 var(--font-body); color: var(--ink-2); margin: 0 0 2px; }
.about-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--muted); }
/* About the data: footnotes at the bottom of the page */
.methods { padding-block: 40px 48px; font-size: 13px; color: var(--ink-2); scroll-margin-top: 16px; }
.methods h2 { font: 650 22px/1.2 var(--font-display); color: var(--ink); margin: 0 0 10px; }
.methods > p { margin: 0 0 10px; max-width: 70ch; }
.methods ol { margin: 18px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 16px; }
.methods li { scroll-margin-top: 16px; }
.methods li::marker { font-weight: 600; color: var(--muted); }
.methods h3 { font: 600 14px/1.3 var(--font-body); color: var(--ink); margin: 0 0 4px; }
.methods li p { margin: 0 0 6px; max-width: 70ch; }
.sources { font: 12px/1.5 var(--font-data); color: var(--muted); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.charts { display: grid; gap: 14px; min-width: 0; }
.chart { background: var(--surface); border: 0; border-top: 4px solid var(--warm); border-radius: 0; box-shadow: var(--shadow); padding: 14px 14px 10px; min-width: 0; }
.chart h3 { font: 600 14px/1.3 var(--font-body); margin: 0; }
.chart .sub { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.chart .plot { color: var(--muted); }
.chart .plot svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); margin: 2px 0 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.legend i.box { height: 10px; width: 10px; }
.legend i.dot { width: 9px; height: 9px; border-radius: 50%; }
/* time comparisons: one column per period, value on top, label underneath */
/* Tops aligned: every value is one line, so the bars share a baseline and a label that wraps hangs below its bar. */
ol.bars { list-style: none; margin: 12px 0 4px; padding: 0; display: flex; align-items: flex-start; gap: 14px; }
ol.bars li { flex: 0 1 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); text-align: center; }
ol.bars .v { order: 1; }
ol.bars .track { order: 2; height: 120px; width: 100%; display: flex; align-items: flex-end; border-bottom: 1px solid var(--axis); }
ol.bars .track i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--axis); }
ol.bars .l { order: 3; line-height: 1.25; }
ol.bars.items { flex-direction: column; align-items: stretch; gap: 8px; }
ol.bars.items li { display: grid; flex: none; text-align: left; align-items: center; gap: 10px; grid-template-columns: minmax(84px, 26%) minmax(0, 1fr) 52px minmax(96px, auto); }
ol.bars.items .track { height: 14px; border: 0; display: block; }
ol.bars.items .track i { height: 100%; border-radius: 3px; }
ol.bars.items li > * { order: 0; }
ol.bars.items .v { text-align: right; }
ol.bars li.now { color: var(--ink); font-weight: 600; }
ol.bars li.now .track i { background: var(--accent); }
ol.bars .v { font: 600 14px/1 var(--font-data); white-space: nowrap; }
ol.bars .x { font: 12px/1 var(--font-data); color: var(--muted); white-space: nowrap; }
.chart .chg { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.chart .chg.up { color: var(--accent); font-weight: 600; }

/* public opinion: three short lists */
.opinion { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 4px 0 16px; }
.og { background: var(--surface); border: 0; border-top: 4px solid var(--warm); border-radius: 0; box-shadow: var(--shadow); padding: 14px 16px; }
.og h3 { font: 600 17px/1.2 var(--font-display); margin: 0 0 10px; }
.og ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.og li { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: baseline; font-size: 15px; line-height: 1.35; }
.og b { font: 600 20px/1 var(--font-display); color: var(--accent); }

details.table { margin-top: 6px; font-size: 12px; }
details.table summary { cursor: pointer; color: var(--muted); }
details.table .scroll { max-height: 260px; overflow: auto; margin-top: 6px; }
details.table table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
details.table th, details.table td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
details.table td.n { text-align: right; }
.empty { font-size: 14px; color: var(--muted); }
table.fac { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
table.fac th { font-weight: 600; text-align: left; color: var(--ink-2); border-bottom: 1px solid var(--axis); padding: 4px 6px; }
table.fac td { padding: 5px 6px; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.fac td.n, table.fac th.n { text-align: right; white-space: nowrap; }
table.fac .kind { color: var(--muted); font-size: 12px; }
.fac-wrap { overflow-x: auto; }
/* LCV score: bar out of 100, with a tick at the chamber average */
.score { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.score .trk { position: relative; flex: 1; height: 10px; border-radius: 2px; background: var(--chip); }
.score i { display: block; height: 100%; border-radius: 2px; background: var(--series-1); }
.score u { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); margin-left: -1px; }
.score b { width: 2ch; text-align: right; font-weight: 600; font-size: 13px; }
.party-D { color: var(--dem); font-weight: 600; } .party-R { color: var(--rep); font-weight: 600; }
.score.party-D i { background: var(--dem); } .score.party-R i { background: var(--rep); }

.loading main { opacity: 0.55; transition: opacity 0.2s; }
.msg { padding-block: 40px; color: var(--ink-2); }

/* Plot tooltip */
.plot [aria-label="tip"] { color: var(--ink); }

/* Phones: one row of section links that scrolls sideways, so the bar takes a single line of the first screen. */
@media (max-width: 600px) {
  nav.side { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  nav.side::-webkit-scrollbar { display: none; }
  nav.side a { flex: none; }
}
@media (max-width: 480px) {
  .wrap { padding-inline: 16px; }
  nav.side { margin-inline: -16px; padding-inline: 16px; }
  ol.bars.items li { grid-template-columns: minmax(70px, 30%) minmax(0, 1fr) 48px; }
  ol.bars.items .x { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Hot days by threshold: paired horizontal bars, then and now, with the change on the right. */
.ladder ol { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 10px; }
.ladder li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: 13px; }
.ladder .k { color: var(--ink-2); font-weight: 600; }
.ladder .pair { display: grid; gap: 3px; }
.ladder .b { display: flex; align-items: center; gap: 6px; }
.ladder .b i { display: block; height: 11px; min-width: 2px; border-radius: 0 2px 2px 0; background: var(--axis); }
.ladder .b.now i { background: var(--accent); }
.ladder .b em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ladder .b.now em { color: var(--ink); font-weight: 600; }
.ladder strong { text-align: right; font-size: 13px; }
.ladder strong.up { color: var(--accent); }
.ladder strong.down { color: var(--muted); }

/* "Source:" footnote under each chart */
.chart-src { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--grid); font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.chart-src a { color: var(--ink-2); }
.connect .chart-src { margin-bottom: 8px; }
.connect .chart-src a { font-size: inherit; font-weight: 400; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--axis); }
.statement + .chart-src { margin: -4px 0 14px; max-width: 62ch; }
/* A chart titled with a sentence: lighter weight, figures in bold */
.chart h3.narrative { font: 500 15px/1.45 var(--font-body); }
.chart h3.narrative strong { font-weight: 700; }

/* landing page: US state map, then each state's largest cities */
a.brand { display: block; color: var(--ink); text-decoration: none; }
.landing .lede { color: var(--ink-2); max-width: 62ch; margin: 0 0 8px; }
.landing .map-hint { color: var(--ink-2); margin: 20px 0 0; }
.map-card { margin: 16px 0 0; background: var(--surface); border-top: 4px solid var(--warm); box-shadow: var(--shadow); padding: 12px 12px 8px; }
.usmap svg { display: block; width: 100%; height: auto; }
.usmap .states path { fill: var(--map-land); stroke: var(--axis); stroke-width: 0.9; cursor: pointer; transition: fill 0.12s; outline: none; }
.usmap .states path:hover, .usmap .states path:focus-visible { fill: var(--accent); }
.map-label { margin: 6px 4px 0; font: 600 14px/1.3 var(--font-body); color: var(--ink); min-height: 1.3em; }
.state-grid { columns: 220px; column-gap: 24px; padding: 18px 0 48px; }
.state-list { break-inside: avoid; margin: 0 0 18px; }
.state-list h3 { font: 600 15px/1.3 var(--font-body); margin: 0 0 4px; }
.state-list h3 a { color: var(--ink); text-decoration: none; }
.state-list h3 a:hover { text-decoration: underline; }
.state-list ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.state-list li::marker { color: var(--muted); }
.state-list .kind { font-size: 13px; color: var(--muted); margin: 0; }

/* "N more" expands a state's city list in place */
.see-all { margin-top: 4px; font: 600 13px/1.4 var(--font-body); color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); }