:root {
  --wgmd-bg: #f5f7fa;
  --wgmd-card: #ffffff;
  --wgmd-text: #152238;
  --wgmd-muted: #667085;
  --wgmd-border: #d7dde6;
  --wgmd-accent: #0b4f8a;
  --wgmd-dark: #0c1c2e;
  --wgmd-ok: #17633a;
}

.wgmd-election-app,
.wgmd-obs {
  box-sizing: border-box;
  color: var(--wgmd-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.wgmd-election-app *,
.wgmd-obs * { box-sizing: border-box; }

.wgmd-election-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  padding: 22px 0 16px;
  border-bottom: 3px solid var(--wgmd-dark);
}

.wgmd-election-header h2 {
  margin: 0 0 4px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
}

.wgmd-election-header p { margin: 0; color: var(--wgmd-muted); }

.wgmd-election-meta {
  text-align: right;
  min-width: 245px;
  font-size: 13px;
  color: var(--wgmd-muted);
}

.wgmd-election-meta strong {
  display: block;
  color: var(--wgmd-text);
  font-size: 15px;
  letter-spacing: .05em;
}

.wgmd-election-status {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--wgmd-border);
  background: var(--wgmd-bg);
  font-size: 13px;
}

.wgmd-election-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.wgmd-election-filters button {
  border: 1px solid var(--wgmd-border);
  background: #fff;
  color: var(--wgmd-text);
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}
.wgmd-election-filters button.is-active { background: var(--wgmd-dark); color: #fff; border-color: var(--wgmd-dark); }

.wgmd-election-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
}

.wgmd-race-card {
  background: var(--wgmd-card);
  border: 1px solid var(--wgmd-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.wgmd-race-card.is-featured { border-top: 5px solid var(--wgmd-accent); }
.wgmd-race-card[hidden] { display: none !important; }

.wgmd-race-card > header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--wgmd-border);
}

.wgmd-race-card h3 { margin: 2px 0 0; font-size: 20px; line-height: 1.2; }
.wgmd-race-jurisdiction { color: var(--wgmd-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.wgmd-reporting { color: var(--wgmd-muted); font-size: 12px; text-align: right; max-width: 150px; }

.wgmd-candidate-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #edf0f4;
}
.wgmd-candidate-row:last-child { border-bottom: 0; }
.wgmd-candidate-row.is-official-winner { box-shadow: inset 4px 0 0 var(--wgmd-ok); }
.wgmd-candidate-name strong { display: block; font-size: 16px; }
.wgmd-candidate-name span { display: block; margin-top: 2px; color: var(--wgmd-muted); font-size: 12px; }
.wgmd-candidate-name small { display: block; margin-top: 4px; color: var(--wgmd-ok); font-size: 11px; font-weight: 700; }
.wgmd-candidate-votes { text-align: right; }
.wgmd-candidate-votes strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.wgmd-candidate-votes span { color: var(--wgmd-muted); font-size: 13px; }

.wgmd-race-card > footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  background: var(--wgmd-bg);
  color: var(--wgmd-muted);
  font-size: 11px;
}

.wgmd-election-empty { padding: 28px; text-align: center; border: 1px dashed var(--wgmd-border); color: var(--wgmd-muted); }

/* OBS view */
.wgmd-obs-body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  background: transparent;
  overflow: hidden;
}
.wgmd-obs-body:not(.is-transparent) { background: #0c1c2e; }
.wgmd-obs {
  width: 100vw;
  min-height: 100vh;
  padding: 4vh 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wgmd-obs-kicker {
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(20px, 2.3vw, 42px);
  margin-bottom: 1.4vh;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.wgmd-obs-card {
  background: rgba(255,255,255,.97);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 34px rgba(0,0,0,.22);
}
.wgmd-obs-race-header {
  padding: 2.4vh 2.5vw 1.8vh;
  border-bottom: 3px solid #d7dde6;
}
.wgmd-obs-race-header .jurisdiction {
  color: #667085;
  font-size: clamp(18px, 1.6vw, 28px);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.wgmd-obs-race-header h1 {
  margin: .3vh 0 0;
  color: #152238;
  font-size: clamp(38px, 4.1vw, 76px);
  line-height: 1.05;
}
.wgmd-obs-reporting { margin-top: 1vh; color: #667085; font-size: clamp(16px, 1.4vw, 25px); }
.wgmd-obs-candidate {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2vw;
  padding: 1.7vh 2.5vw;
  border-bottom: 2px solid #edf0f4;
}
.wgmd-obs-candidate:last-child { border-bottom: 0; }
.wgmd-obs-candidate.official-winner { box-shadow: inset 9px 0 0 #17633a; }
.wgmd-obs-candidate .name { color: #152238; font-size: clamp(28px, 3vw, 56px); font-weight: 800; }
.wgmd-obs-candidate .party { display: block; color: #667085; font-size: clamp(15px, 1.35vw, 24px); font-weight: 500; margin-top: .3vh; }
.wgmd-obs-candidate .winner-note { display: block; color: #17633a; font-size: clamp(13px, 1.1vw, 20px); margin-top: .35vh; font-weight: 700; }
.wgmd-obs-candidate .numbers { text-align: right; font-variant-numeric: tabular-nums; }
.wgmd-obs-candidate .votes { display: block; color: #152238; font-size: clamp(30px, 3.4vw, 62px); font-weight: 850; }
.wgmd-obs-candidate .percent { display: block; color: #667085; font-size: clamp(17px, 1.7vw, 30px); }
.wgmd-obs-footer {
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 1.4vh;
  font-size: clamp(15px, 1.25vw, 23px);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.wgmd-obs-footer strong { letter-spacing: .07em; }
.wgmd-obs-loading, .wgmd-obs-error { padding: 7vh 4vw; font-size: clamp(28px, 3vw, 52px); font-weight: 700; color: #152238; }

@media (max-width: 700px) {
  .wgmd-election-header { align-items: flex-start; flex-direction: column; }
  .wgmd-election-meta { text-align: left; min-width: 0; }
  .wgmd-race-card > footer { flex-direction: column; }
}