:root {
  --election-accent: var(--wine);
  --surface: #f8faf8;
  --line-soft: #e7ece8;
  --radius: 6px;
  --shadow: 0 1px 2px rgb(28 43 35 / 7%);
}

body { font-variant-numeric: tabular-nums; }
header, main { width: min(1180px, calc(100% - 32px)); }
header { min-height: 106px; padding-block: 26px 22px; }
header a { padding: 9px 12px; border: 1px solid var(--election-accent); border-radius: 4px; text-decoration: none; }
header a:hover { background: #fff; }

.status,
.metrics article,
.council-comparison,
.results {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.status { min-height: 150px; border-left-width: 6px; }
.metrics { gap: 10px; }
.metrics article { min-height: 82px; }

.council-comparison,
.results { padding: 22px; }
.heading { min-height: 58px; align-items: center; }
.heading h2 { line-height: 1.15; }
.heading > div:last-child,
.heading > span { color: #65726d; font-size: 12px; }

.comparison-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); }
.council-table th { background: #f3f6f4; }
.council-table td { height: 54px; }
.council-table tr:hover td { filter: brightness(.985); }
.change { border-radius: 999px; }

.party {
  padding: 16px;
  border-radius: var(--radius);
  box-shadow: none;
  border-left: 5px solid var(--party-color);
}
.party-head { min-height: 48px; }
.number { border-radius: 3px; }
.bar { overflow: hidden; border-radius: 2px; }
.party details { margin-top: 4px; }
.party summary { min-height: 38px; }
.candidate { min-height: 50px; border-radius: 3px; }
.candidate.elected-candidate { border-left-width: 4px; }

.state,
.change,
.elected-label { font-weight: 800; }

@media (max-width: 700px) {
  header { min-height: 0; padding-block: 22px; }
  header a { width: 100%; text-align: center; }
  .status { min-height: 122px; }
  .council-comparison,
  .results { padding: 14px; }
  .heading { align-items: flex-start; }
  .comparison-table-wrap { margin-inline: -1px; }
  .council-table { min-width: 590px; }
  .council-table th:nth-child(2),
  .council-table td:nth-child(2) { width: 145px; }
}

@media (max-width: 430px) {
  header, main { width: calc(100% - 20px); }
  h1 { font-size: 36px; }
  .metrics article { min-height: 72px; padding: 14px; }
}