body {
  font-family: "Rubik", system-ui, sans-serif;
  font-feature-settings: "liga";
  font-variant-ligatures: common-ligatures;
  line-height: 1.2;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0;
}

form {
  font-size: inherit;
  margin: 0;
}

button,
input,
select,
textarea {
  font-size: inherit;
  line-height: inherit;
}

input,
select,
textarea {
  border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: inset 0 1px 3px #eee;
  display: inline-block;
  padding: 0.5em 0.6em;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #73acf3;
  box-shadow: 0 0 4px 0 rgba(18, 159, 234, 0.2);
  outline: 0;
  outline: thin dotted;
  outline: 1px auto #73acf3;
}

.form-select {
  position: relative;
}

select#change-race {
  appearance: none;
  background: #fff;
  border: 1px solid #dbe0e7;
  border-radius: 3px;
  box-shadow: none;
  color: #000000;
  display: block;
  font-family: "Rubik", system-ui, sans-serif;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  outline: none;
  padding: 10px 40px 10px 15px;
  width: 100%;
}

.form-select-arrow {
  border-left: 1px solid #dbe0e7;
  display: block;
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}

.form-select-arrow:before {
  border-color: #000000 transparent transparent transparent;
  border-style: solid;
  border-width: 10px 7px 0 7px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -8px;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  width: 0;
}

/* disclosure
----------------------------------------------------------------- */

/* The panel is hidden with the `hidden` attribute rather than a class, so it
   leaves the accessibility tree and the tab order together with the layout.
   !important guards against any later display rule silently revealing it. */
[hidden] {
  display: none !important;
}

.disclosure {
  align-items: center;
  background: none;
  border: 0;
  color: #000000;
  display: flex;
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  gap: 10px;
  margin: 0 auto 20px auto;
  padding: 10px 0;
  text-align: left;
  width: 100%;
}

/* Caret is decorative and driven entirely by aria-expanded, so the visual state
   and the announced state cannot drift apart. */
.disclosure::before {
  border-color: transparent transparent transparent currentColor;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  content: "";
  flex: 0 0 auto;
  height: 0;
  transition: transform 0.15s ease;
  width: 0;
}

.disclosure[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.disclosure:focus-visible {
  outline: 2px solid #73acf3;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .disclosure::before {
    transition: none;
  }
}

/* buttons
----------------------------------------------------------------- */
button {
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  text-align: center;
  user-select: none;
  vertical-align: baseline;
  white-space: nowrap;
}

button[disabled] {
  box-shadow: none;
  cursor: not-allowed;
  filter: alpha(opacity=40);
  opacity: 0.4;
}

button.map-refresh {
  background: #ffffff;
  border: 1px solid #8f959d;
  border-radius: 4px;
  color: #16171a;
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* Inverts rather than tinting. The previous #f4f5f7 fill was a 4% shift off
   white — the rule fired but read as nothing, which is indistinguishable from
   a broken hover. */
.map-refresh:not([disabled]):hover {
  background: #16171a;
  border-color: #16171a;
  color: #ffffff;
}

/* Pressed state carries the affordance without motion */
.map-refresh:not([disabled]):active {
  background: #000000;
  border-color: #000000;
}

/* Overrides the blanket button[disabled] opacity: 0.4, which on near-black text
   leaves an unreadable grey. Recessed fill reads as not-yet rather than broken. */
.map-refresh[disabled] {
  background: #f7f8f9;
  border-color: #e2e4e7;
  color: #6f757d;
  opacity: 1;
}

.map-refresh:focus-visible {
  outline: 2px solid #16171a;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .map-refresh {
    transition: none;
  }
}


/* colors */
.col0 {
  color: #008300;
}
.col1 {
  color: #4a3aa7;
}
.bar.col0,
.town.col0 {
  background-color: #008300;
  fill: #008300;
}
.bar.col0.shade4,
.town.col0.shade4 {
  fill: rgba(0, 131, 0, 0.87);
}
.bar.col0.shade3,
.town.col0.shade3 {
  fill: rgba(0, 131, 0, 0.74);
}
.bar.col0.shade2,
.town.col0.shade2 {
  fill: rgba(0, 131, 0, 0.62);
}
.bar.col0.shade1,
.town.col0.shade1 {
  fill: rgba(0, 131, 0, 0.5);
}
.bar.col1,
.town.col1 {
  background-color: #4a3aa7;
  fill: #4a3aa7;
}
.bar.col1.shade4,
.town.col1.shade4 {
  fill: rgba(74, 58, 167, 0.87);
}
.bar.col1.shade3,
.town.col1.shade3 {
  fill: rgba(74, 58, 167, 0.74);
}
.bar.col1.shade2,
.town.col1.shade2 {
  fill: rgba(74, 58, 167, 0.62);
}
.bar.col1.shade1,
.town.col1.shade1 {
  fill: rgba(74, 58, 167, 0.5);
}
.senate .col0 {
  color: #3989cb;
}
.senate .col1 {
  color: #BD1C00;
}
.senate .col2 {
  color: #756bb1;
}
.senate .bar.col0,
.senate .town.col0 {
  background-color: #3989cb;
  fill: #3989cb;
}
.senate .bar.col0.shade4,
.senate .town.col0.shade4 {
  fill: rgba(57, 137, 203, 0.8);
}
.senate .bar.col0.shade3,
.senate .town.col0.shade3 {
  fill: rgba(57, 137, 203, 0.6);
}
.senate .bar.col0.shade2,
.senate .town.col0.shade2 {
  fill: rgba(57, 137, 203, 0.4);
}
.senate .bar.col0.shade1,
.senate .town.col0.shade1 {
  fill: rgba(57, 137, 203, 0.3);
}
.senate .bar.col1,
.senate .town.col1 {
  background-color: #BD1C00;
  fill: #BD1C00;
}
.senate .bar.col1.shade4,
.senate .town.col1.shade4 {
  fill: rgba(189, 28, 0, 0.8);
}
.senate .bar.col1.shade3,
.senate .town.col1.shade3 {
  fill: rgba(189, 28, 0, 0.6);
}
.senate .bar.col1.shade2,
.senate .town.col1.shade2 {
  fill: rgba(189, 28, 0, 0.4);
}
.senate .bar.col1.shade1,
.senate .town.col1.shade1 {
  fill: rgba(189, 28, 0, 0.3);
}
.senate .bar.col2,
.senate .town.col2 {
  background-color: #756bb1;
  fill: #756bb1;
}
.ballot-q1 .col0 {
  color: #3ec339;
}
.ballot-q1 .col1 {
  color: #6bc6f3;
}
.ballot-q1 .bar.col0,
.ballot-q1 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q1 .bar.col0.shade4,
.ballot-q1 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q1 .bar.col0.shade3,
.ballot-q1 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q1 .bar.col0.shade2,
.ballot-q1 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q1 .bar.col0.shade1,
.ballot-q1 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q1 .bar.col1,
.ballot-q1 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q1 .bar.col1.shade4,
.ballot-q1 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q1 .bar.col1.shade3,
.ballot-q1 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q1 .bar.col1.shade2,
.ballot-q1 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q1 .bar.col1.shade1,
.ballot-q1 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.ballot-q2 .col0 {
  color: #3ec339;
}
.ballot-q2 .col1 {
  color: #6bc6f3;
}
.ballot-q2 .bar.col0,
.ballot-q2 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q2 .bar.col0.shade4,
.ballot-q2 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q2 .bar.col0.shade3,
.ballot-q2 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q2 .bar.col0.shade2,
.ballot-q2 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q2 .bar.col0.shade1,
.ballot-q2 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q2 .bar.col1,
.ballot-q2 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q2 .bar.col1.shade4,
.ballot-q2 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q2 .bar.col1.shade3,
.ballot-q2 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q2 .bar.col1.shade2,
.ballot-q2 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q2 .bar.col1.shade1,
.ballot-q2 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.ballot-q3 .col0 {
  color: #3ec339;
}
.ballot-q3 .col1 {
  color: #6bc6f3;
}
.ballot-q3 .bar.col0,
.ballot-q3 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q3 .bar.col0.shade4,
.ballot-q3 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q3 .bar.col0.shade3,
.ballot-q3 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q3 .bar.col0.shade2,
.ballot-q3 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q3 .bar.col0.shade1,
.ballot-q3 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q3 .bar.col1,
.ballot-q3 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q3 .bar.col1.shade4,
.ballot-q3 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q3 .bar.col1.shade3,
.ballot-q3 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q3 .bar.col1.shade2,
.ballot-q3 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q3 .bar.col1.shade1,
.ballot-q3 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.ballot-q4 .col0 {
  color: #3ec339;
}
.ballot-q4 .col1 {
  color: #6bc6f3;
}
.ballot-q4 .bar.col0,
.ballot-q4 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q4 .bar.col0.shade4,
.ballot-q4 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q4 .bar.col0.shade3,
.ballot-q4 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q4 .bar.col0.shade2,
.ballot-q4 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q4 .bar.col0.shade1,
.ballot-q4 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q4 .bar.col1,
.ballot-q4 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q4 .bar.col1.shade4,
.ballot-q4 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q4 .bar.col1.shade3,
.ballot-q4 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q4 .bar.col1.shade2,
.ballot-q4 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q4 .bar.col1.shade1,
.ballot-q4 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.ballot-q5 .col0 {
  color: #3ec339;
}
.ballot-q5 .col1 {
  color: #6bc6f3;
}
.ballot-q5 .bar.col0,
.ballot-q5 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q5 .bar.col0.shade4,
.ballot-q5 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q5 .bar.col0.shade3,
.ballot-q5 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q5 .bar.col0.shade2,
.ballot-q5 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q5 .bar.col0.shade1,
.ballot-q5 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q5 .bar.col1,
.ballot-q5 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q5 .bar.col1.shade4,
.ballot-q5 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q5 .bar.col1.shade3,
.ballot-q5 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q5 .bar.col1.shade2,
.ballot-q5 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q5 .bar.col1.shade1,
.ballot-q5 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.ballot-q6 .col0 {
  color: #3ec339;
}
.ballot-q6 .col1 {
  color: #6bc6f3;
}
.ballot-q6 .bar.col0,
.ballot-q6 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q6 .bar.col0.shade4,
.ballot-q6 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q6 .bar.col0.shade3,
.ballot-q6 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q6 .bar.col0.shade2,
.ballot-q6 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q6 .bar.col0.shade1,
.ballot-q6 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q6 .bar.col1,
.ballot-q6 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q6 .bar.col1.shade4,
.ballot-q6 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q6 .bar.col1.shade3,
.ballot-q6 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q6 .bar.col1.shade2,
.ballot-q6 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q6 .bar.col1.shade1,
.ballot-q6 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.ballot-q7 .col0 {
  color: #3ec339;
}
.ballot-q7 .col1 {
  color: #6bc6f3;
}
.ballot-q7 .bar.col0,
.ballot-q7 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q7 .bar.col0.shade4,
.ballot-q7 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q7 .bar.col0.shade3,
.ballot-q7 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q7 .bar.col0.shade2,
.ballot-q7 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q7 .bar.col0.shade1,
.ballot-q7 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q7 .bar.col1,
.ballot-q7 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q7 .bar.col1.shade4,
.ballot-q7 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q7 .bar.col1.shade3,
.ballot-q7 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q7 .bar.col1.shade2,
.ballot-q7 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q7 .bar.col1.shade1,
.ballot-q7 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.ballot-q8 .col0 {
  color: #3ec339;
}
.ballot-q8 .col1 {
  color: #6bc6f3;
}
.ballot-q8 .bar.col0,
.ballot-q8 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q8 .bar.col0.shade4,
.ballot-q8 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q8 .bar.col0.shade3,
.ballot-q8 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q8 .bar.col0.shade2,
.ballot-q8 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q8 .bar.col0.shade1,
.ballot-q8 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q8 .bar.col1,
.ballot-q8 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q8 .bar.col1.shade4,
.ballot-q8 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q8 .bar.col1.shade3,
.ballot-q8 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q8 .bar.col1.shade2,
.ballot-q8 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q8 .bar.col1.shade1,
.ballot-q8 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.ballot-q9 .col0 {
  color: #3ec339;
}
.ballot-q9 .col1 {
  color: #6bc6f3;
}
.ballot-q9 .bar.col0,
.ballot-q9 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q9 .bar.col0.shade4,
.ballot-q9 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q9 .bar.col0.shade3,
.ballot-q9 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q9 .bar.col0.shade2,
.ballot-q9 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q9 .bar.col0.shade1,
.ballot-q9 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q9 .bar.col1,
.ballot-q9 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q9 .bar.col1.shade4,
.ballot-q9 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q9 .bar.col1.shade3,
.ballot-q9 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q9 .bar.col1.shade2,
.ballot-q9 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q9 .bar.col1.shade1,
.ballot-q9 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.ballot-q10 .col0 {
  color: #3ec339;
}
.ballot-q10 .col1 {
  color: #6bc6f3;
}
.ballot-q10 .bar.col0,
.ballot-q10 .town.col0 {
  background-color: #3ec339;
  fill: #3ec339;
}
.ballot-q10 .bar.col0.shade4,
.ballot-q10 .town.col0.shade4 {
  fill: rgba(62, 195, 57, 0.8);
}
.ballot-q10 .bar.col0.shade3,
.ballot-q10 .town.col0.shade3 {
  fill: rgba(62, 195, 57, 0.6);
}
.ballot-q10 .bar.col0.shade2,
.ballot-q10 .town.col0.shade2 {
  fill: rgba(62, 195, 57, 0.4);
}
.ballot-q10 .bar.col0.shade1,
.ballot-q10 .town.col0.shade1 {
  fill: rgba(62, 195, 57, 0.3);
}
.ballot-q10 .bar.col1,
.ballot-q10 .town.col1 {
  background-color: #6bc6f3;
  fill: #6bc6f3;
}
.ballot-q10 .bar.col1.shade4,
.ballot-q10 .town.col1.shade4 {
  fill: rgba(107, 198, 243, 0.9);
}
.ballot-q10 .bar.col1.shade3,
.ballot-q10 .town.col1.shade3 {
  fill: rgba(107, 198, 243, 0.7);
}
.ballot-q10 .bar.col1.shade2,
.ballot-q10 .town.col1.shade2 {
  fill: rgba(107, 198, 243, 0.5);
}
.ballot-q10 .bar.col1.shade1,
.ballot-q10 .town.col1.shade1 {
  fill: rgba(107, 198, 243, 0.35);
}
.keys, .senate .keys {
  font-size: 14px;
  line-height: 1.2;
}
.keys .square, .senate .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.keys .square.sqt5 {
  background-color: #008300;
}
.senate .keys .square.sqt5 {
  background-color: #3989cb;
}
.keys .square.sqt4 {
  background-color: rgba(0, 131, 0, 0.87);
}
.senate .keys .square.sqt4 {
  background-color: rgba(57, 137, 203, 0.8);
}
.keys .square.sqt3 {
  background-color: rgba(0, 131, 0, 0.74);
}
.senate .keys .square.sqt3 {
  background-color: rgba(57, 137, 203, 0.6);
}
.keys .square.sqt2 {
  background-color: rgba(0, 131, 0, 0.62);
}
.senate .keys .square.sqt2 {
  background-color: rgba(57, 137, 203, 0.4);
}
.keys .square.sqt1 {
  background-color: rgba(0, 131, 0, 0.5);
}
.senate .keys .square.sqt1 {
  background-color: rgba(57, 137, 203, 0.3);
}
.keys .square.sqb1 {
  background-color: rgba(74, 58, 167, 0.5);
}
.senate .keys .square.sqb1 {
  background-color: rgba(189, 28, 0, 0.3);
}
.keys .square.sqb2 {
  background-color: rgba(74, 58, 167, 0.62);
}
.senate .keys .square.sqb2 {
  background-color: rgba(189, 28, 0, 0.4);
}
.keys .square.sqb3 {
  background-color: rgba(74, 58, 167, 0.74);
}
.senate .keys .square.sqb3 {
  background-color: rgba(189, 28, 0, 0.6);
}
.keys .square.sqb4 {
  background-color: rgba(74, 58, 167, 0.87);
}
.senate .keys .square.sqb4 {
  background-color: rgba(189, 28, 0, 0.8);
}
.keys .square.sqb5 {
  background-color: #4a3aa7;
}
.senate .keys .square.sqb5 {
  background-color: #BD1C00;
}
.ballot-q1 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q1 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q1 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q1 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q1 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q1 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q1 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q1 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q1 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q1 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q1 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q1 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.ballot-q2 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q2 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q2 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q2 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q2 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q2 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q2 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q2 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q2 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q2 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q2 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q2 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.ballot-q3 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q3 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q3 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q3 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q3 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q3 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q3 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q3 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q3 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q3 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q3 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q3 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.ballot-q4 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q4 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q4 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q4 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q4 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q4 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q4 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q4 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q4 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q4 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q4 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q4 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.ballot-q5 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q5 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q5 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q5 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q5 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q5 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q5 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q5 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q5 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q5 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q5 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q5 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.ballot-q6 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q6 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q6 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q6 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q6 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q6 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q6 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q6 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q6 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q6 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q6 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q6 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.ballot-q7 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q7 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q7 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q7 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q7 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q7 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q7 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q7 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q7 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q7 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q7 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q7 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.ballot-q8 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q8 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q8 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q8 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q8 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q8 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q8 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q8 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q8 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q8 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q8 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q8 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.ballot-q9 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q9 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q9 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q9 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q9 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q9 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q9 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q9 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q9 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q9 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q9 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q9 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.ballot-q10 .keys {
  font-size: 14px;
  line-height: 1.2;
}
.ballot-q10 .keys .square {
  display: inline-block;
  height: 14px;
  width: 14px;
}
.ballot-q10 .keys .square.sqt5 {
  background-color: #3ec339;
}
.ballot-q10 .keys .square.sqt4 {
  background-color: rgba(62, 195, 57, 0.8);
}
.ballot-q10 .keys .square.sqt3 {
  background-color: rgba(62, 195, 57, 0.6);
}
.ballot-q10 .keys .square.sqt2 {
  background-color: rgba(62, 195, 57, 0.4);
}
.ballot-q10 .keys .square.sqt1 {
  background-color: rgba(62, 195, 57, 0.3);
}
.ballot-q10 .keys .square.sqb1 {
  background-color: rgba(107, 198, 243, 0.35);
}
.ballot-q10 .keys .square.sqb2 {
  background-color: rgba(107, 198, 243, 0.5);
}
.ballot-q10 .keys .square.sqb3 {
  background-color: rgba(107, 198, 243, 0.7);
}
.ballot-q10 .keys .square.sqb4 {
  background-color: rgba(107, 198, 243, 0.9);
}
.ballot-q10 .keys .square.sqb5 {
  background-color: #6bc6f3;
}
.graphic {
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}
/* Mirrors .graphic-head. Both rows are about the map rather than part of it, so
   they bracket it: identity above, provenance and controls below. */
.graphic-foot {
  align-items: center;
  column-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 18px auto;
  row-gap: 6px;
  width: 100%;
}

/* Was #999fa5 at 2.67:1 — below AA on attribution the AP requires be legible */
.credit {
  color: #5f636a;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}
.graphic-content {
  height: 0;
  margin-bottom: 10px;
  overflow: hidden;
  padding-bottom: 75%;
  padding-top: 0;
  position: relative;
  width: 100%;
}
.graphic-content svg {
  background-color: transparent;
  display: inline-block;
  height: 100%;
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.graphic-content .infobox {
  bottom: 0;
  display: block;
  font-size: 16px;
  height: auto;
  left: 0;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.graphic-content .infobox h2 {
  font-size: 22px;
  font-weight: 200;
  margin: 0 0 4px;
}
.graphic-content .infobox table {
  border: none;
  font-size: 16px;
  margin: 12px 0 0;
  padding: 0;
}
.graphic-content .infobox .infotable th {
  border: none;
  font-weight: normal;
  padding: 2px 14px 2px 0;
  text-align: left;
  white-space: nowrap;
}
.graphic-content .infobox table td {
  border: none;
  padding: 2px 5px;
  text-align: right;
}
.graphic-content .infobox .infotable td:has([class^='info-vote']) {
  padding-right: 10px;
}
.graphic-content .infobox .infotable td:has([class^='info-pct']) {
  border-left: 2px solid #dbe0e7;
  padding-left: 10px;
}
.graphic-content .infobox .winner-img {
  margin-left: 0.5rem;
  width: 14px;
}
.graphic-content .infobox .info-precincts {
  white-space: nowrap;
}
.graphic-content .infobox table td.info-bar0,
.graphic-content .infobox table td.info-bar1,
.graphic-content .infobox table td.info-bar2 {
  text-align: left;
}
.graphic-content .infobox table td.info-bar0 .bar,
.graphic-content .infobox table td.info-bar1 .bar,
.graphic-content .infobox table td.info-bar2 .bar {
  display: inline-block;
  height: 10px;
}
.graphic-content .keys {
  display: none;
}
.graphic-content .square {
  display: inline-block;
  height: 10px;
  width: 10px;
}
.table-wrapper {
  margin: 0 auto 20px auto;
}

.graphic-head {
  align-items: baseline;
  column-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 14px auto;
  max-width: 750px;
  row-gap: 8px;
  width: 100%;
}

.race-title {
  font-size: 26px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}

/* margin key
-----------------------------------------------------------------
   Compact by design: the statewide result is already reported in full by the
   infobox, so the key only has to name the two colors and say which direction
   is a wider margin. Swatches reuse the per-race sqt/sqb palette and the names
   reuse col0 and col1, so this stays correct for the senate and ballot-question
   templates without new tokens. */
.scale {
  text-align: right;
}

.scale-row {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 0;

  .keys.scale-bar {
    border-radius: 2px;
    display: flex;
    flex: 0 0 auto;
    overflow: hidden;
    width: 140px;
  }
}

.scale-cand {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.scale-note {
  color: #5f636a;
  font-size: 11px;
  letter-spacing: 0.01em;
  margin: 4px 0 0;
}


/* Five classes on purpose: the per-race rules pin a fixed 14px square at four,
   which would tie and be settled by source order. These must win outright. */
.scale .keys.scale-bar .square {
  flex: 1 1 0;
  height: 9px;
  width: auto;
}

/* Marks where the lead flips, doing the job the old "Even" tick label did */
.scale .keys.scale-bar .square:nth-child(5) {
  margin-right: 3px;
}

/* Digits stop shifting as counts tick up on election night */
.infobox table td,
.table-wrapper table {
  font-variant-numeric: tabular-nums;
}
/* auto, not hidden: a table cannot be squeezed below the sum of its columns'
   min-content widths, so max-width alone cannot prevent overflow. hidden made
   the columns past the edge unreachable; auto scrolls them inside this box and
   keeps the page itself from scrolling sideways. */
.table-wrapper {
  overflow-x: auto;
  width: 100%;
}

.table-wrapper table {
  border-bottom: none;
  font-size: 15px;
  line-height: 1;
  margin: 0 0 20px 0;
  max-width: 100%;
  width: 100%;
}

/* Auto table layout sized this column for its single longest value: 338 of the
   351 town names are under 12 characters, but Manchester-by-the-Sea is 21 and
   was setting the width for every row. Capped just above the longest
   unbreakable word (Middleborough, 13 characters) so the cap is honoured rather
   than overridden by min-content, and the 13 long names wrap at the spaces and
   hyphens they already contain. */
.table-wrapper table th:first-child,
.table-wrapper table td:first-child {
  width: 13ch;
}
/* DataTables 2 renames the search wrapper: 1.10's #datatable_filter is gone */
.dt-search {
  margin: 10px 0;
}

/* DataTables reserves 30px of padding on every sortable header for its sort
   arrows — across six columns that is 180px, wider than a whole column. Pull the
   arrow in and cut the reservation to match. Scoped by id so it outranks
   DataTables' own two-class selector outright, rather than depending on which
   stylesheet the browser happens to read second. */
#datatable thead > tr > th {
  padding-right: 18px;
}

#datatable thead > tr > th span.dt-column-order {
  right: 4px;
}
.town {
  cursor: pointer;
  display: block;
  fill: #ddd;
  stroke: #efefef;
  stroke-width: 0.5;
  transition: fill 0.25s ease;
}
.town:hover,
.town:focus,
.town.searched {
  outline: none;
  stroke: #000;
  stroke-width: 2;
}
#tooltip {
  background: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 2px 1px #ccc;
  font-size: 16px;
  left: 300px;
  padding: 1px 5px;
  pointer-events: none;
  position: absolute;
  top: 400px;
  visibility: hidden;
  z-index: 100000;
}
#tooltip:after {
  border: 10px solid transparent;
  border-bottom: 0;
  border-right: 0;
  border-top-color: #fff;
  bottom: 0;
  content: "";
  height: 0;
  left: 18px;
  margin-bottom: -9px;
  margin-left: -6.5px;
  position: absolute;
  width: 0;
}
/* Six columns of results do not fit this embed: the text plus DataTables' own
   cell padding is already ~710px before a single sort arrow, and the widest the
   embed ever gets is 750px. So the two raw vote counts drop first — the
   percentages are what a reader compares, and the counts stay available in the
   infobox and by widening. */
@media (max-width: 760px) {
  .hide-for-medium {
    display: none;
  }
}

@media (max-width: 525px) {
  .hide-for-small {
    display: none;
  }
}
@media (max-width: 360px) {
  .hide-for-extrasmall {
    display: none;
  }
}
@media (min-width: 445px) {
  .graphic-content {
    padding-bottom: 62.5%;
  }
  .graphic-content .infobox {
    font-size: 16px;
    width: 50%;
  }
  #datatable > tbody > tr > td:nth-child(1) {
    white-space: nowrap;
  }
}
@media (min-width: 600px) {
  .graphic-content .keys {
    display: block;
    font-size: 14px;
    line-height: 1;
    position: absolute;
    right: 0;
    top: 3%;
  }
  .table-wrapper table {
    font-size: 17px;
  }
  .graphic-content .infobox table {
    font-size: 24px;
  }
}
@media (min-width: 640px) {
  .dt-container .dt-search {
    float: none;
    text-align: right;
  }
}
@media (min-width: 699px) {
  .graphic-content .infobox {
    bottom: 3%;
  }

  .graphic-content .keys {
    right: 8%;
  }
}
.graphic-content .infobox h2 {
  font-size: 30px;
}
h3 + small {
  font-size: 14px;
  font-weight: 200;
}
.graphic-content .infobox table td.info-bar0 .bar,
.graphic-content .infobox table td.info-bar1 .bar,
.graphic-content .infobox table td.info-bar2 .bar {
  height: 16px;
}

/* The town fills cross-fade on every refresh; the disclosure caret and the
   refresh button are guarded where they are declared. */
@media (prefers-reduced-motion: reduce) {
  .town {
    transition: none;
  }
}