:root {
  --bg: #ffffff;
  --ink: #1a1a1a;
  --ink-soft: #5a5a5a;
  --ink-muted: #9a9a9a;
  --rule: #e5e5e5;
  --accent: #ec7700;        /* Mango Tango */
  --accent-dark: #8c3f00;
  --accent-light: #fdf3e6;
  --agg: #c9b8a8;           /* aggregate rows — deliberately not the series hue */
  /* Shared base-map greys across the Q4 map charts: land in the climate map's
     equal-chances grey, with white gutters between states. */
  --land: #e5e5e5;
  --state-line: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
.container { max-width: 1080px; margin: 0 auto; padding: 28px 22px 40px; }

.header { border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 16px; }
.header h1 { font-size: 24px; letter-spacing: -0.01em; }
.subtitle { color: var(--ink-soft); font-size: 13px; margin-top: 6px; max-width: 680px; }
.subtitle strong {
  color: var(--ink); font-weight: 600;
  /* Proportional figures: tabular digits read loose inside running text. */
  font-variant-numeric: proportional-nums;
}

.controls {
  margin: 10px 0 8px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ctrl-label {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.view-btn {
  flex: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: #fff;
  border: 1px solid var(--rule); border-radius: 8px; padding: 7px 15px;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
/* Inverts to the same black the tooltip uses, so emphasis reads consistently. */
.view-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.map-wrap { position: relative; }
#map { width: 100%; height: auto; display: block; }
.is-hidden { display: none !important; }

.land { fill: var(--land); stroke: none; }
.state-line { fill: none; stroke: var(--state-line); stroke-width: 0.8; pointer-events: none; }
.flock { pointer-events: none; }
/* Match the SVG transform attribute's own frame, so restating the transform in
   CSS below renders identically. */
.turkey { transform-box: view-box; transform-origin: 0 0; }

/* Entrance: the flock pops in west to east (--i is the longitude rank), each
   bird scaling up from its feet — the same anchor the hover lift uses. The
   easing overshoots slightly so they land rather than just appear. */
@keyframes turkey-pop {
  from { transform: translate(var(--x), var(--y)) scale(0); }
  to   { transform: translate(var(--x), var(--y)) scale(var(--s)); }
}
.flock.is-entering .turkey {
  /* `backwards`, never `both`: a forwards fill would pin the transform after the
     animation ended and the hover lift could no longer override it. */
  animation: turkey-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--i) * 38ms);
}
@media (prefers-reduced-motion: reduce) {
  .flock.is-entering .turkey { animation: none; }
}

/* Hover lift — pointer devices on a map big enough to see it. Touch and narrow
   screens keep the plain transform attribute and never animate. */
@media (hover: hover) and (min-width: 621px) {
  .turkey {
    transform: translate(var(--x), var(--y)) scale(var(--s));
    transition: transform 150ms ease;
  }
  /* --grow is published by app.js from HOVER_GROW, which also sizes the hit
     targets — one source of truth, so the two cannot drift apart. */
  .turkey.is-hover {
    transform: translate(var(--x), var(--y)) scale(calc(var(--s) * var(--grow, 1.14)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .turkey { transition: none; }
}
.hit:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* The legend sits in the flow beneath the map. Its glyphs and labels are fixed
   pixel sizes while the map is fluid, so overlaying it on the projection means
   it fits at some widths and not others. */
.legend {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  margin-top: 10px;
}
.legend .lg-title {
  font-size: 10.5px; font-weight: 600; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.tooltip {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--ink); color: #fff; padding: 9px 11px; border-radius: 6px;
  font-size: 12px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  max-width: 230px;
}
.tooltip .tt-name { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12.5px; margin-bottom: 2px; }
.tooltip .tt-val { font-size: 18px; font-weight: 700; color: #f9a63a; font-family: 'Montserrat', sans-serif; }
.tooltip .tt-sub { font-size: 10.5px; color: #b8bcc0; margin-top: 3px; }

/* ── Ranked bar view (shown in the map's place) ── */
.bars { padding: 4px 0 2px; }
.bar-list { list-style: none; display: grid; gap: 8px; }
.bar-row {
  display: grid; grid-template-columns: minmax(96px, 152px) 1fr 52px 46px;
  align-items: center; gap: 10px;
}
.bar-name { font-size: 13px; color: var(--ink); }
.bar-name .note { color: var(--ink-muted); font-size: 11px; }
/* Rounded at the data end only; the baseline end stays square. */
.bar-fill {
  display: block; height: 17px; background: var(--accent);
  border-radius: 0 4px 4px 0; min-width: 2px;
  transform-origin: left center;
}

/* Entrance: rows settle in while the bars wipe out from the baseline, staggered
   down the ranking. `both` holds the from-state through the delay, so a row
   never flashes at full length before its turn. */
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes row-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.bars.is-entering .bar-row {
  animation: row-in 300ms ease both;
  animation-delay: calc(var(--i) * 26ms);
}
.bars.is-entering .bar-fill {
  animation: bar-grow 460ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i) * 26ms);
}
@media (prefers-reduced-motion: reduce) {
  .bars.is-entering .bar-row,
  .bars.is-entering .bar-fill { animation: none; }
}
.bar-val { text-align: right; font-size: 13px; font-weight: 600; }
.bar-share { text-align: right; font-size: 12px; color: var(--ink-muted); }
/* "Other States" is a pool, not a place — it gets a neutral, never the series hue. */
.bar-row.agg .bar-fill { background: var(--agg); }
.bar-row.agg .bar-name { color: var(--ink-soft); }
.bars-note {
  margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-size: 11.5px; color: var(--ink-muted); max-width: 640px;
}

.attribution { margin-top: 16px; font-size: 11px; color: var(--ink-muted); max-width: 720px; }

@media (max-width: 620px) {
  .container { padding: 20px 14px 32px; }
  /* At this width the reference glyphs are too small to compare against, and
     they push the map up the page. The chart view carries the exact figures. */
  .legend { display: none; }
  .bar-row { grid-template-columns: minmax(70px, 96px) 1fr 46px 42px; gap: 7px; }
  .bar-name { font-size: 12px; }
  .bar-val { font-size: 12px; }
  .bar-share { font-size: 11px; }
}