/* One set of columns for every candidate row, so the DMN mark, ballot box, party, name, incumbent line,
   party name, website and social icons line up from race to race.
   Full ballot:  [DMN] [box] [party] [name + tags] [party name] [website] [socials]
   Featured:     [DMN] [box] [party] [name + tags] [links]        [open] */
.dmn-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
}
.dmn-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dmn-mark.dmn-text { border: 1px solid var(--endorse); color: var(--endorse); }
.dmn-mark.dmn-empty { visibility: hidden; }

/* Full ballot */
#ballot-content .candidate {
  display: grid;
  grid-template-columns: 32px auto auto minmax(0, 1.5fr) minmax(70px, .8fr) 116px;
  align-items: center;
  gap: 2px 8px;
  padding: 6px 0;
}
#ballot-content .candidate > .party-box { margin-right: 0; }
#ballot-content .candidate-name { display: grid; gap: 2px; justify-items: start; min-width: 0; overflow-wrap: anywhere; }
#ballot-content .candidate-tag {
  font-size: .68rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 7px;
  color: var(--muted);
}
#ballot-content .candidate-socials { display: flex; gap: 2px; align-items: center; justify-content: flex-start; }
#ballot-content .candidate.picked > .candidate-name .candidate-name-text { font-weight: 650; }
#ballot-content .candidate > .result-votes { grid-column: 4 / -1; }
#ballot-content .candidate > .result-bar { grid-column: 4 / -1; }
#ballot-content .candidate > .endorse-line { grid-column: 4 / -1; }
@media (max-width: 700px) {
  #ballot-content .candidate { grid-template-columns: 32px auto auto minmax(0, 1fr); }
  #ballot-content .candidate > .candidate-party,
  #ballot-content .candidate > .candidate-socials { grid-column: 4; }
}

/* Featured races: the DMN mark leads the row */
.featured-races .candidate-row {
  grid-template-columns: 32px auto auto minmax(0, 1fr) 108px auto;
}
.featured-races .candidate-row > .dmn-mark { grid-column: 1; grid-row: 1 / span 2; }
.featured-races .candidate-row > .pick { grid-column: 2; }
.featured-races .candidate-row > .party-box { grid-column: 3; }
.featured-races .candidate-row > .candidate-row-name { grid-column: 4; }
.featured-races .candidate-row > .incumbent-tag-line { grid-column: 4; grid-row: 2; display: flex; gap: 6px; justify-self: start; }
.featured-races .candidate-row > .candidate-row-links { grid-column: 5; justify-content: flex-start; }
.featured-races .candidate-row > .candidate-row-open { grid-column: 6; }

/* Website and social icons wear the candidate's party colour. */
#ballot-content .candidate .candidate-social { color: var(--accent); }
#ballot-content .candidate[data-party="D"] .candidate-social { color: var(--party-d); }
#ballot-content .candidate[data-party="R"] .candidate-social { color: var(--party-r); }
#ballot-content .candidate[data-party="L"] .candidate-social { color: var(--party-l); }
#ballot-content .candidate[data-party="G"] .candidate-social { color: var(--party-g); }
#ballot-content .candidate[data-party="I"] .candidate-social,
#ballot-content .candidate[data-party="W"] .candidate-social { color: var(--party-i); }

/* "DMN Endorsed": plainly a link. */
.endorse-line .endorse-link {
  font-size: .78rem;
  font-weight: 650;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 9px;
}
.endorse-line .endorse-link:hover { background: var(--accent-soft, var(--line)); }