/* ==========================================================================
   ratings.css - the site's race-rating colors as CSS variables + classes, so
   our tables, legends and maps match the forecast tools on
   projects.gelliottmorris.com (DECISIONS_v0.3 D11).

   Values: projects/congress-2026-what-if/src/app.css (--rate-*, --tossup-hatch)
   and src/lib/ratings.js INK, verbatim; legend and swatch rules from
   src/components/Legend.svelte. One theme only (D15). JS twin: ratings.js
   (ratingKey(p) buckets: <=2 Safe R | 3-25 Likely R | 26-40 Lean R |
   41-59 Toss-up | 60-74 Lean D | 75-97 Likely D | >=98 Safe D).

   Keys: dwin safe-d likely-d lean-d tossup lean-r likely-r safe-r rwin
         none (no race) hold-d hold-r (seats not up / holdovers)
   ========================================================================== */

:root {
  /* Rating ramp: SIN palette (Dem #2563eb / Rep #c92a2a) with darker "called" fills. */
  --rate-dwin: #1e3a8a;
  --rate-safe-d: #2563eb;
  --rate-likely-d: #5c8ae8;
  --rate-lean-d: #9ab5ee;
  --rate-tossup: #d8d4cc;
  --rate-lean-r: #eba79f;
  --rate-likely-r: #da645a;
  --rate-safe-r: #c92a2a;
  --rate-rwin: #7f1d1d;
  --rate-none: #f0eee9;
  --rate-hold-d: #c8d6f3;
  --rate-hold-r: #f1cdc8;

  /* Toss-up hatch: alternating light Dem / light Rep stripes (maputil.js HATCH). */
  --rate-hatch-a: #b9cbf2;
  --rate-hatch-b: #f0c3bd;
  --tossup-hatch: repeating-linear-gradient(135deg, var(--rate-hatch-a) 0 4px, var(--rate-hatch-b) 4px 8px);

  /* Outline for states with no race (maputil.js NONE_STROKE = --color-gray-300). */
  --rate-none-stroke: #d3d0c9;

  /* Text that stays legible on each fill (ratings.js INK). */
  --rate-ink-dwin: #ffffff;
  --rate-ink-safe-d: #ffffff;
  --rate-ink-likely-d: #ffffff;
  --rate-ink-lean-d: #1a1918;
  --rate-ink-tossup: #1a1918;
  --rate-ink-lean-r: #1a1918;
  --rate-ink-likely-r: #ffffff;
  --rate-ink-safe-r: #ffffff;
  --rate-ink-rwin: #ffffff;
  --rate-ink-none: #706c63;
  --rate-ink-hold-d: #1a1918;
  --rate-ink-hold-r: #1a1918;

  /* Map scales (ratings.js): no-data gray and diverging midpoint, as in mapColors.js. */
  --map-null: #d8d4cc;
  --map-neutral: #f7f7f7;
}

/* --------------------------------------------------------------------------
   Legend (Legend.svelte). <ul class="rate-legend">
     <li class="rate-legend-item"><span class="rate-swatch rate-safe-d"></span>Safe D</li> ...
   -------------------------------------------------------------------------- */
.rate-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-text-secondary);
}

.rate-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.rate-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-xs);
}

.rate-swatch svg {
  display: block;
}

.rate-swatch.rate-dwin { background: var(--rate-dwin); }
.rate-swatch.rate-safe-d { background: var(--rate-safe-d); }
.rate-swatch.rate-likely-d { background: var(--rate-likely-d); }
.rate-swatch.rate-lean-d { background: var(--rate-lean-d); }
.rate-swatch.rate-tossup { background: var(--tossup-hatch); }
.rate-swatch.rate-lean-r { background: var(--rate-lean-r); }
.rate-swatch.rate-likely-r { background: var(--rate-likely-r); }
.rate-swatch.rate-safe-r { background: var(--rate-safe-r); }
.rate-swatch.rate-rwin { background: var(--rate-rwin); }
.rate-swatch.rate-hold-d { background: var(--rate-hold-d); }
.rate-swatch.rate-hold-r { background: var(--rate-hold-r); }
.rate-swatch.rate-none {
  background: var(--rate-none);
  box-shadow: inset 0 0 0 1px var(--color-gray-300);
}

@media (max-width: 480px) {
  .rate-legend {
    gap: 2px var(--space-2);
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Rating chip: a filled label for tables ("Lean D"). Toss-up uses the solid
   gray here so the label stays readable; maps and swatches use the hatch.
   <span class="rate-chip rate-lean-d">Lean D</span>
   -------------------------------------------------------------------------- */
.rate-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rate-chip.rate-dwin { background: var(--rate-dwin); color: var(--rate-ink-dwin); }
.rate-chip.rate-safe-d { background: var(--rate-safe-d); color: var(--rate-ink-safe-d); }
.rate-chip.rate-likely-d { background: var(--rate-likely-d); color: var(--rate-ink-likely-d); }
.rate-chip.rate-lean-d { background: var(--rate-lean-d); color: var(--rate-ink-lean-d); }
.rate-chip.rate-tossup { background: var(--rate-tossup); color: var(--rate-ink-tossup); }
.rate-chip.rate-lean-r { background: var(--rate-lean-r); color: var(--rate-ink-lean-r); }
.rate-chip.rate-likely-r { background: var(--rate-likely-r); color: var(--rate-ink-likely-r); }
.rate-chip.rate-safe-r { background: var(--rate-safe-r); color: var(--rate-ink-safe-r); }
.rate-chip.rate-rwin { background: var(--rate-rwin); color: var(--rate-ink-rwin); }
.rate-chip.rate-none { background: var(--rate-none); color: var(--rate-ink-none); }
.rate-chip.rate-hold-d { background: var(--rate-hold-d); color: var(--rate-ink-hold-d); }
.rate-chip.rate-hold-r { background: var(--rate-hold-r); color: var(--rate-ink-hold-r); }

/* --------------------------------------------------------------------------
   SVG fills for maps (class-based, no JS colors needed). Toss-ups: fill with an
   SVG pattern from ratings.js hatchPattern() - CSS gradients can't fill SVG shapes.
   -------------------------------------------------------------------------- */
.rate-fill-dwin { fill: var(--rate-dwin); }
.rate-fill-safe-d { fill: var(--rate-safe-d); }
.rate-fill-likely-d { fill: var(--rate-likely-d); }
.rate-fill-lean-d { fill: var(--rate-lean-d); }
.rate-fill-tossup { fill: var(--rate-tossup); }
.rate-fill-lean-r { fill: var(--rate-lean-r); }
.rate-fill-likely-r { fill: var(--rate-likely-r); }
.rate-fill-safe-r { fill: var(--rate-safe-r); }
.rate-fill-rwin { fill: var(--rate-rwin); }
.rate-fill-none { fill: var(--rate-none); stroke: var(--rate-none-stroke); }
.rate-fill-hold-d { fill: var(--rate-hold-d); }
.rate-fill-hold-r { fill: var(--rate-hold-r); }

/* Party-colored text (what-if RaceCell .chance.d / .chance.r). */
.rate-text-d { color: var(--color-dem); }
.rate-text-r { color: var(--color-rep); }