/* PowerShare 2 - Upcoming elections tile
   Mobile-first. All colours/spacing come from css/tokens.css custom
   properties - no raw hex. Party dots are tinted via the --party-colour
   token, set from JS (the one sanctioned styling-from-data exception). */

/* ── Card list ───────────────────────────────────────────────────────────── */

.election-list > * + * {
  margin-top: var(--space-4);
}

.election-card {
  background: var(--colour-surface-alt);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-brand-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.election-card--soon {
  border-left-color: var(--colour-warn);
}

.election-card--urgent {
  border-left-color: var(--colour-danger);
}

/* ── Card header ─────────────────────────────────────────────────────────── */

.election-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.election-icon {
  font-size: var(--text-xl);
  line-height: 1;
}

.election-header-text {
  flex: 1;
  min-width: 0;
}

.election-type-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.election-name {
  margin: var(--space-1) 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  color: var(--colour-brand-dark);
}

.election-ward {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

.election-date-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.election-date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--colour-text);
}

.election-countdown {
  display: inline-block;
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--colour-success-bg);
  color: var(--colour-success);
}

.election-countdown--soon {
  background: var(--colour-warn-bg);
  color: var(--colour-warn);
}

.election-countdown--urgent {
  background: var(--colour-danger-bg);
  color: var(--colour-danger);
}

/* From small-tablet up, right-align the date block beside the title. */
@media (min-width: 480px) {
  .election-date-block {
    align-items: flex-end;
    text-align: right;
  }
}

/* ── Notices and warnings ────────────────────────────────────────────────── */

.election-notice {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.election-notice--cancelled {
  background: var(--colour-danger-bg);
  color: var(--colour-danger);
}

.election-notice--uncontested {
  background: var(--colour-info-bg);
  color: var(--colour-info);
}

.election-reg-warning {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--colour-warn-bg);
  color: var(--colour-warn);
  font-size: var(--text-sm);
}

/* ── Candidates ──────────────────────────────────────────────────────────── */

.election-candidates {
  margin-top: var(--space-3);
}

.election-candidates-label {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--colour-text-muted);
}

.election-candidates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.election-candidate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.election-candidate-dot {
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--party-colour);
}

.election-candidate-name {
  font-weight: 600;
  color: var(--colour-text);
}

.election-candidate-party {
  color: var(--colour-text-muted);
}

.election-candidate-link {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--colour-link);
}

.election-candidate-more {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

/* ── Deadlines ───────────────────────────────────────────────────────────── */

.election-deadlines {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--colour-border);
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

.election-deadline strong {
  color: var(--colour-text);
}

/* ── Tile-level actions ──────────────────────────────────────────────────── */

.election-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.election-link {
  font-size: var(--text-sm);
  color: var(--colour-link);
}