/* main.css — flatly-inspired styling for the static 2024 election forecast archive */

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #212529;
  background: #fff;
  line-height: 1.45;
}
a { color: #2c3e50; }
h1, h2, h3, h4 { color: #2c3e50; font-weight: 400; }
.center { text-align: center; }
.spacer { height: 56px; }
.grow { flex: 1; }
.block { display: block; }

/* ---- nav ---- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: #2c3e50; color: #fff;
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 6px 16px; gap: 2px 14px;
}
.site-nav { padding: 9px 18px; gap: 2px 8px; }
.site-nav .brand { font-weight: 500; font-size: 17px; margin-right: 14px; color: #fff; text-decoration: none; }
.site-nav a.nav-link {
  color: #dfe6ec; text-decoration: none; padding: 10px 12px; border-radius: 0; font-size: 15px;
}
.site-nav a.nav-link:hover { color: #18bc9c; background: transparent; }
.site-nav a.nav-link.active { color: #fff; background: #1a252f; }
.site-nav a.nav-link.active:hover { color: #fff; }

/* ---- notices ---- */
noscript .noscript-banner {
  display: block; background: #f8d7da; color: #721c24; padding: 12px 16px; text-align: center;
}
.load-error, #boot-error {
  background: #f8d7da; color: #721c24; padding: 12px 16px; border-radius: 6px; margin: 16px auto; max-width: 900px;
}

/* ---- home landing ---- */
.authors-note { padding: 10px; background: #f9f9f9; border: 1px solid #ddd; font-size: 15px; margin-top: 12px; }
.hero {
  margin-top: 15px; text-align: center; padding: 62px 24px;
  background-image: url("../img/election_banner_3o.png");
  background-size: cover; background-position: center;
}
.hero h1 { margin: 0 0 12px; font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.hero p { margin: 0; font-size: 1.06rem; }

.home-cards { display: grid; gap: 30px; margin: 30px 6px 0; }
.home-cards.three { grid-template-columns: repeat(3, 1fr); }
.home-cards.two { grid-template-columns: repeat(2, 1fr); }
.home-card {
  padding: 26px 22px 30px; text-align: center; background: #e9ecef; border-radius: 8px;
}
.home-card h3 { margin: 0 0 12px; font-size: 1.55rem; }
.home-card p { margin: 0 0 18px; }

.scoreboard {
  display: flex; justify-content: center; align-items: center; gap: 0.8vw;
  margin: 4px 0 10px;
}
.scoreboard .chance { text-align: center; width: 9em; font-size: clamp(13px, 1.25vw, 19px); }
.scoreboard .chance.rep { color: #A03232; }
.scoreboard .chance.dem { color: #244999; }
.scoreboard .chance p { margin: 2px 0 0; font-size: 1.35em; font-weight: 400; }
.scoreboard .portrait {
  width: clamp(60px, 7vw, 124px); height: clamp(60px, 7vw, 124px);
  border: 2px solid black; border-radius: 50%; object-fit: cover; z-index: 2;
}
.scoreboard .ec-bar { width: min(71vw, 1240px); margin: 0 -1.8vw; }

.about-box {
  max-width: 1180px; margin: 30px auto 18px; padding: 20px 24px; background: #f8f9fa;
  border-radius: 8px; text-align: center;
}
.about-box h4 { margin-top: 0; font-size: 1.25rem; }

/* ---- sections ---- */
main { max-width: 1540px; margin: 0 auto; padding: 8px 24px 40px; }
h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.map-title { margin-bottom: 6px; }
section { padding-top: 10px; }
section > h2, .section-title { text-align: center; }
.select-row { display: flex; align-items: flex-end; gap: 16px; margin: 8px 0 4px; flex-wrap: wrap; }
.select-row label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.form-select {
  font-size: 14.5px; padding: 6px 8px; border: 1px solid #ced4da; border-radius: 4px; background: #fff;
  min-width: 200px;
}

.chart-box { max-width: 1150px; margin: 0 auto; }
.chart-box.wide { max-width: 1300px; }
h4 { font-size: 1.17rem; }
.chart { width: 100%; height: auto; display: block; }
h4.sub { font-weight: 400; }

/* svg text */
.chart text { font-family: inherit; }
.axis-text { font-size: 12px; fill: #000; }
.axis-text-y { font-size: 14.5px; fill: #000; }
.axis-title { font-size: 13.5px; fill: #2c3e50; }
.chart-title { font-size: 15px; fill: #212529; }
.chart-subtitle { font-size: 12.5px; fill: #212529; }
.marker-text { font-size: 14px; fill: #000; }
.event-text { font-size: 12px; fill: darkgray; }
.gridline { stroke: #dcdcdc; stroke-width: 1; }
.scrub-label { font-size: 14.5px; font-weight: 500; }
.scrub-label-sm { font-size: 12.5px; font-weight: 500; }
.avg-label { font-size: 13.5px; font-weight: 400; }
.annotation-bold { font-size: 14.5px; font-weight: 700; }
.bar-label { font-size: 7.5px; fill: #000; }
.legend-title { font-size: 12.5px; font-weight: 700; fill: #212529; }
.legend-text { font-size: 12px; fill: #212529; }
.shadowtext { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.scrub-capture { cursor: crosshair; touch-action: none; }

/* ---- map ---- */
.map-wrap { position: relative; max-width: 1480px; margin: 0 auto; }
.us-map { width: 100%; height: auto; display: block; }
.state-shape:hover { stroke-width: 2; }
.cd-circle:hover { stroke-width: 2.5; }
.state-label {
  font-size: 10px; pointer-events: none; fill: #000;
  paint-order: stroke; stroke: #fff; stroke-width: 2.2px; stroke-linejoin: round;
}
.state-label-abbr { font-weight: 700; }
.cd-label {
  font-size: 8.5px; font-weight: 700; fill: #000;
  paint-order: stroke; stroke: #fff; stroke-width: 1.8px; stroke-linejoin: round;
}
.map-tooltip {
  position: absolute; pointer-events: none; z-index: 50;
  background: #fff; border: 2px solid black; border-radius: 0;
  box-shadow: 3px 3px rgba(0, 0, 0, 0.25);
  padding: 3px 8px; font-size: 14px; line-height: 1.35; white-space: nowrap;
}
.map-legend {
  /* top-left: the Albers projection leaves that corner empty (Maine occupies the top-right) */
  position: absolute; top: 4px; left: 4px; z-index: 10;
  background: rgba(255, 255, 255, 0.82); border-radius: 5px; padding: 6px 9px; font-size: 11.5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.map-legend-title { font-weight: 700; margin-bottom: 3px; }
.legend-item { display: flex; align-items: center; gap: 6px; margin: 1px 0; }
.swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.25); flex: none; }
@media (max-width: 640px) {
  .map-legend { position: static; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; margin-top: 8px; box-shadow: none; }
  .map-legend-title { width: 100%; text-align: center; }
}

/* ---- tables ---- */
.dt-wrap { margin: 10px auto 22px; max-width: 1200px; }
.dt-scroll { overflow-x: auto; }
table.dt { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.dt th, table.dt td { padding: 7px 10px; border-bottom: 1px solid #e3e6e8; text-align: left; white-space: nowrap; }
table.dt thead th { background: #f8f8f8; color: #333; cursor: pointer; user-select: none; position: relative; padding-right: 20px; }
table.dt thead th.sort-asc::after { content: "▲"; font-size: 9px; position: absolute; right: 6px; }
table.dt thead th.sort-desc::after { content: "▼"; font-size: 9px; position: absolute; right: 6px; }
table.dt tbody tr:hover { background: #f4f7f9; }
.c-dem { color: blue; }
.c-rep { color: red; }
.dt-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 13px; color: #555; }
.dt-pager button {
  border: 1px solid #ced4da; background: #fff; padding: 4px 10px; margin-left: 3px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.dt-pager button.current { background: #2c3e50; color: #fff; border-color: #2c3e50; }
.dt-pager button:disabled { opacity: 0.45; cursor: default; }

.static-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.static-table th, .static-table td { padding: 6px 10px; border-bottom: 1px solid #e3e6e8; text-align: left; }
.static-table thead th { background: #f8f8f8; }

/* ---- tabs: full-width segmented bar, underline marks the active tab ---- */
.tab-bar { display: flex; gap: 0; width: 100%; border-bottom: 2px solid #dee2e6; margin-bottom: 10px; }
.tab-btn {
  flex: 1; border: none; background: none; padding: 10px 14px; text-align: center;
  font-size: 15px; cursor: pointer; color: #95a5a6; margin-bottom: -2px; border-bottom: 2px solid transparent;
}
.tab-btn:hover { color: #2c3e50; }
.tab-btn.active { color: #2c3e50; border-bottom-color: #2c3e50; }

/* ---- buttons / downloads ---- */
.btn {
  display: inline-block; background: #2c3e50; color: #fff; text-decoration: none;
  padding: 7px 13px; border-radius: 4px; font-size: 14px; margin: 3px 6px 3px 0; border: none; cursor: pointer;
}
.btn:hover { background: #1a252f; }
.btn.btn-info { background: #3498db; }
.btn.btn-info:hover { background: #217dbb; }
.btn.btn-success { background: #18bc9c; }
.btn.btn-success:hover { background: #128f76; }
.btn .size-note { opacity: 0.75; font-size: 12px; }

/* ---- radios ---- */
.radio-row { display: inline-flex; gap: 14px; }
.radio-lab { font-size: 14px; }
.radio-title { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.radio-block { max-width: 1300px; margin: 2px auto 0; }

/* ---- sandbox ---- */
.sandbox-pickers { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.multiselect { flex: 1 1 280px; max-width: 420px; text-align: center; }
.multiselect label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.chips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; background: #e9ecef; border-radius: 12px;
  padding: 3px 9px; font-size: 13.5px;
}
.chip-x { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; color: #555; }
.chip-x:hover { color: #c0392b; }
.sandbox-sentence h4 { font-weight: 500; }
.range-wrap { max-width: 560px; margin: 18px auto 6px; text-align: center; }
.range-wrap label { font-weight: 600; font-size: 14px; }
.range-label { font-weight: 700; }
.range-track { position: relative; height: 34px; margin-top: 6px; }
.range-track::before {
  content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 5px;
  background: #d5dbe1; border-radius: 3px;
}
.range-track input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 34px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 19px; height: 19px; border-radius: 50%; background: #18bc9c; border: 2px solid #fff;
  box-shadow: 0 0 3px rgba(0,0,0,.4); cursor: grab; margin-top: 8px;
}
.range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 17px; height: 17px; border-radius: 50%;
  background: #18bc9c; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.4); cursor: grab;
}
.sandbox-progress { max-width: 560px; margin: 26px auto; text-align: center; }
.sandbox-progress .track { background: #e9ecef; border-radius: 6px; height: 12px; overflow: hidden; }
.sandbox-progress .bar { background: #18bc9c; height: 100%; width: 0; transition: width .15s; }
.sandbox-progress .label { font-size: 13.5px; color: #555; margin-top: 6px; }

/* ---- scatter ---- */
.scatter-wrap { position: relative; }
.scatter-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scatter-svg { position: relative; z-index: 2; }

/* ---- footer ---- */
.site-footer {
  margin-top: 30px; text-align: center; padding: 22px 16px; background: #343a40; color: #fff; font-size: 14px;
}
.site-footer a { color: #9fd3c7; }
.site-footer p { margin: 4px 0; }

/* ---- no-JS fallback ---- */
.no-js #section-home, .no-js #section-data, .no-js #section-info { display: block !important; }
.no-js .js-only { display: none; }

@media (max-width: 900px) {
  .home-cards.three, .home-cards.two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .scoreboard { flex-wrap: wrap; }
  .scoreboard .ec-bar { width: 96vw; order: 5; margin: 8px 0 0; }
  .select-row { align-items: stretch; }
  .site-nav { font-size: 13px; }
}