/* BallotNexus v6.4.1 public election experience design system */
:root {
  --bnx-public-bg: #f4f7fb;
  --bnx-public-surface: #ffffff;
  --bnx-public-surface-soft: #f8fafc;
  --bnx-public-border: #dfe7f1;
  --bnx-public-border-strong: #cbd6e3;
  --bnx-public-text: #0f172a;
  --bnx-public-muted: #64748b;
  --bnx-public-subtle: #94a3b8;
  --bnx-public-primary: #2563eb;
  --bnx-public-primary-strong: #1d4ed8;
  --bnx-public-primary-soft: #eff6ff;
  --bnx-public-success: #15803d;
  --bnx-public-success-soft: #ecfdf3;
  --bnx-public-warning: #b45309;
  --bnx-public-warning-soft: #fff7ed;
  --bnx-public-danger: #b91c1c;
  --bnx-public-danger-soft: #fef2f2;
  --bnx-public-radius: 18px;
  --bnx-public-radius-sm: 12px;
  --bnx-public-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
  --bnx-public-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.05);
}

html.dark-mode {
  --bnx-public-bg: #07111f;
  --bnx-public-surface: #0d1a2d;
  --bnx-public-surface-soft: #101f35;
  --bnx-public-border: rgba(148, 163, 184, 0.18);
  --bnx-public-border-strong: rgba(148, 163, 184, 0.26);
  --bnx-public-text: #f8fafc;
  --bnx-public-muted: #a9b7cc;
  --bnx-public-subtle: #7f91aa;
  --bnx-public-primary: #60a5fa;
  --bnx-public-primary-strong: #93c5fd;
  --bnx-public-primary-soft: rgba(37, 99, 235, 0.16);
  --bnx-public-success: #4ade80;
  --bnx-public-success-soft: rgba(22, 163, 74, 0.16);
  --bnx-public-warning: #fbbf24;
  --bnx-public-warning-soft: rgba(245, 158, 11, 0.15);
  --bnx-public-danger: #f87171;
  --bnx-public-danger-soft: rgba(239, 68, 68, 0.15);
  --bnx-public-shadow: 0 14px 34px rgba(2, 6, 23, 0.26);
  --bnx-public-shadow-soft: 0 8px 22px rgba(2, 6, 23, 0.2);
}

html body,
html body.public-ballot-page,
html body.verification-page-body,
html body.counter-page-body {
  background: var(--bnx-public-bg) !important;
  color: var(--bnx-public-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html body a { color: var(--bnx-public-primary); }
html body a:hover,
html body a:focus { color: var(--bnx-public-primary-strong); }

/* Shared public content width */
html body .entry-shell,
html body .reg-page,
html body .verification-page-shell,
html body .counter-page-shell,
html body .selector-shell,
html body .hub-shell,
html body .public-results,
html body .state-shell,
html body .ballot-shell {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Shared surfaces */
html body .entry-panel,
html body .entry-side,
html body .entry-auth-card,
html body .entry-context-card,
html body .entry-link-card,
html body .entry-election-card,
html body .reg-card,
html body .reg-form-card,
html body .reg-metric,
html body .reg-election-card,
html body .verification-hero-panel,
html body .verification-side-card,
html body .verification-lookup-card,
html body .verification-result-shell,
html body .verification-command-card,
html body .counter-hero-panel,
html body .counter-side-card,
html body .counter-live-stage-card,
html body .counter-stage-panel,
html body .counter-turnout-panel,
html body .counter-stage-summary-item,
html body .selector-hero,
html body .selector-stat,
html body .selector-controls,
html body .selector-card,
html body .selector-empty,
html body .hub-hero,
html body .hub-card,
html body .hub-share,
html body .public-box,
html body .public-hero,
html body .public-card,
html body .public-panel,
html body .public-position-card,
html body .state-card,
html body .state-panel,
html body .state-meta-item,
html body .state-stat,
html body .state-timeline-item {
  border-color: var(--bnx-public-border) !important;
  background: var(--bnx-public-surface) !important;
  color: var(--bnx-public-text) !important;
  box-shadow: var(--bnx-public-shadow-soft) !important;
}

html body .entry-panel,
html body .entry-side,
html body .entry-auth-card,
html body .entry-context-card,
html body .reg-card,
html body .reg-form-card,
html body .verification-hero-panel,
html body .verification-side-card,
html body .verification-lookup-card,
html body .verification-result-shell,
html body .counter-hero-panel,
html body .counter-live-stage-card,
html body .selector-hero,
html body .selector-controls,
html body .hub-hero,
html body .hub-share,
html body .public-box,
html body .public-hero,
html body .public-panel,
html body .state-card {
  border-radius: var(--bnx-public-radius) !important;
}

/* Public state banners: compact context/status strip instead of a second hero */
html body .public-state-banner {
  margin: 0 0 14px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--bnx-public-border) !important;
  background: var(--bnx-public-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body .public-state-banner::before { height: 2px !important; }
html body .public-state-banner-layout { gap: 10px !important; align-items: center !important; }
html body .public-state-banner-copy { gap: 6px !important; min-width: 0 !important; flex: 1 1 520px !important; }
html body .public-state-banner-status {
  width: max-content;
  padding: 5px 9px !important;
  font-size: 10px !important;
  border-radius: 999px !important;
}
html body .public-state-banner h2 {
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--bnx-public-text) !important;
}
html body .public-state-banner p { font-size: 12px !important; line-height: 1.55 !important; color: var(--bnx-public-muted) !important; }
html body .public-state-banner-meta,
html body .public-state-banner-actions { gap: 7px !important; }
html body .public-state-banner-chip {
  padding: 5px 8px !important;
  font-size: 10px !important;
  background: var(--bnx-public-surface-soft) !important;
  border-color: var(--bnx-public-border) !important;
  color: var(--bnx-public-muted) !important;
}
html body .public-state-banner-chip strong { color: var(--bnx-public-text) !important; }
html body .public-state-banner-action {
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
}
html body .public-state-banner-action.is-primary {
  background: var(--bnx-public-primary) !important;
  box-shadow: none !important;
}
html body .public-state-banner-action.is-secondary {
  background: var(--bnx-public-surface-soft) !important;
  color: var(--bnx-public-text) !important;
  border-color: var(--bnx-public-border) !important;
}

/* Consistent public navigation */
html body .verification-topbar,
html body .counter-topbar {
  padding: 0 !important;
  border-bottom: 1px solid var(--bnx-public-border);
  background: color-mix(in srgb, var(--bnx-public-surface) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html body .verification-topbar-inner,
html body .counter-topbar-inner {
  max-width: 1180px !important;
  min-height: 62px;
  padding: 9px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .verification-brand-mark,
html body .counter-brand-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  background: var(--bnx-public-primary-soft) !important;
  color: var(--bnx-public-primary) !important;
  box-shadow: none !important;
}
html body .verification-brand-copy strong,
html body .counter-brand-copy strong { color: var(--bnx-public-text) !important; font-size: 13px !important; }
html body .verification-brand-copy small,
html body .counter-brand-copy small { color: var(--bnx-public-muted) !important; font-size: 10px !important; margin-top: 2px !important; }
html body .verification-topbar-actions,
html body .counter-topbar-actions { gap: 4px !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
html body .verification-topbar-actions::-webkit-scrollbar,
html body .counter-topbar-actions::-webkit-scrollbar { display: none; }
html body .verification-nav-link,
html body .verification-theme-btn,
html body .counter-nav-link,
html body .counter-theme-btn,
html body .reg-link {
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--bnx-public-muted) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  white-space: nowrap;
}
html body .verification-nav-link:hover,
html body .verification-nav-link:focus,
html body .verification-theme-btn:hover,
html body .verification-theme-btn:focus,
html body .counter-nav-link:hover,
html body .counter-nav-link:focus,
html body .counter-theme-btn:hover,
html body .counter-theme-btn:focus,
html body .reg-link:hover,
html body .reg-link:focus {
  color: var(--bnx-public-text) !important;
  background: var(--bnx-public-surface-soft) !important;
  transform: none !important;
}

/* Entry / voter sign-in */
html body.public-entry-page { min-height: 100vh; }
html body .entry-shell { padding: 18px 16px 38px !important; }
html body .entry-topbar {
  min-height: 58px;
  margin: 0 0 14px !important;
  padding: 0 2px;
  align-items: center !important;
}
html body .entry-brand {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bnx-public-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body .entry-brand-mark { width: 36px !important; height: 36px !important; border-radius: 11px !important; background: var(--bnx-public-primary) !important; }
html body .entry-chip-row { gap: 4px !important; }
html body .entry-chip,
html body .entry-chip-button {
  min-height: 36px;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bnx-public-muted) !important;
  backdrop-filter: none !important;
}
html body .entry-chip:hover,
html body .entry-chip:focus,
html body .entry-chip-button:hover,
html body .entry-chip-button:focus { background: var(--bnx-public-surface-soft) !important; color: var(--bnx-public-text) !important; }
html body .entry-context-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--bnx-public-border);
  position: relative;
  overflow: hidden;
}
html body .entry-context-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--bnx-public-primary);
}
html body .entry-context-card.is-live::before { background: #22c55e; }
html body .entry-context-card.is-warning::before { background: #f59e0b; }
html body .entry-context-card.is-blocked::before { background: #94a3b8; }
html body .entry-context-main { min-width: 0; }
html body .entry-context-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bnx-public-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body .entry-context-org { display: block; margin-top: 7px; color: var(--bnx-public-muted); font-size: 12px; font-weight: 700; }
html body .entry-context-title { margin: 3px 0 0; color: var(--bnx-public-text); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.18; letter-spacing: -.025em; font-weight: 800; }
html body .entry-context-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
html body .entry-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--bnx-public-surface-soft);
  border: 1px solid var(--bnx-public-border);
  color: var(--bnx-public-muted);
  font-size: 11px;
  font-weight: 700;
}
html body .entry-context-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
html body .entry-context-action,
html body .entry-service-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--bnx-public-border);
  background: var(--bnx-public-surface);
  color: var(--bnx-public-text);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
html body .entry-context-action.primary { background: var(--bnx-public-primary); border-color: var(--bnx-public-primary); color: #fff; }
html body .entry-auth-layout { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; margin-top: 16px; }
html body .entry-auth-card { padding: 24px; border: 1px solid var(--bnx-public-border); }
html body .entry-auth-header { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
html body .entry-auth-mark { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 13px; background: var(--bnx-public-primary-soft); color: var(--bnx-public-primary); font-size: 18px; }
html body .entry-auth-header h2 { margin: 0; color: var(--bnx-public-text); font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
html body .entry-auth-header p { margin: 5px 0 0; color: var(--bnx-public-muted); font-size: 13px; line-height: 1.55; }
html body .entry-login-state { margin: 0 0 16px; padding: 12px 13px; border: 1px solid var(--bnx-public-border); border-radius: 12px; background: var(--bnx-public-surface-soft); }
html body .entry-login-state p { margin: 7px 0 0 !important; color: var(--bnx-public-muted) !important; font-size: 12px !important; line-height: 1.55 !important; }
html body .entry-status { padding: 5px 8px !important; background: var(--bnx-public-primary-soft) !important; color: var(--bnx-public-primary) !important; font-size: 10px !important; }
html body .entry-section-title { margin: 0 0 7px !important; color: var(--bnx-public-muted) !important; font-size: 11px !important; }
html body #accessCodeField,
html body .reg-input,
html body .reg-select,
html body .verification-input,
html body .public-results-filter-group .form-control {
  min-height: 46px !important;
  border-radius: 11px !important;
  border-color: var(--bnx-public-border-strong) !important;
  background: var(--bnx-public-surface) !important;
  color: var(--bnx-public-text) !important;
  box-shadow: none !important;
}
html body #accessCodeField:focus,
html body .reg-input:focus,
html body .reg-select:focus,
html body .verification-input:focus,
html body .public-results-filter-group .form-control:focus {
  border-color: var(--bnx-public-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bnx-public-primary) 14%, transparent) !important;
}
html body .entry-submit { min-height: 46px !important; height: 46px !important; border-radius: 11px !important; background: var(--bnx-public-primary) !important; border-color: var(--bnx-public-primary) !important; box-shadow: none !important; }
html body .entry-inline-btn { min-height: 46px !important; border-radius: 11px !important; background: var(--bnx-public-surface) !important; border-color: var(--bnx-public-border-strong) !important; color: var(--bnx-public-text) !important; }
html body .entry-meta { color: var(--bnx-public-muted) !important; font-size: 12px !important; }
html body .entry-services { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bnx-public-border); }
html body .entry-service-link { min-height: 36px; padding: 0 10px; color: var(--bnx-public-muted); background: var(--bnx-public-surface-soft); }
html body .entry-countdown { gap: 7px !important; margin: 12px 0 0; }
html body .entry-countdown-box { padding: 9px 7px !important; border-radius: 10px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; box-shadow: none !important; }
html body .entry-countdown-box strong { font-size: 18px !important; color: var(--bnx-public-text) !important; }
html body .entry-countdown-box span { margin-top: 4px !important; font-size: 9px !important; color: var(--bnx-public-muted) !important; }
html body .entry-countdown-copy { margin: 7px 0 0 !important; font-size: 11px !important; color: var(--bnx-public-muted) !important; }
html body .entry-scanner-panel { border-radius: 12px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; }

/* Registration */
html body .reg-page { padding: 18px 16px 36px !important; }
html body .reg-topbar { min-height: 58px; margin-bottom: 14px !important; align-items: center !important; }
html body .reg-brand { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; color: var(--bnx-public-text) !important; }
html body .reg-brand-mark { width: 36px !important; height: 36px !important; border-radius: 11px !important; background: var(--bnx-public-primary) !important; }
html body .reg-links { display: flex; flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto; scrollbar-width: none; }
html body .reg-links::-webkit-scrollbar { display: none; }
html body .reg-grid { gap: 16px !important; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) !important; }
html body .reg-card,
html body .reg-form-card { overflow: hidden; }
html body .reg-hero { padding: 20px !important; background: var(--bnx-public-surface) !important; color: var(--bnx-public-text) !important; }
html body .reg-hero::before,
html body .reg-hero::after { display: none !important; }
html body .reg-badge { padding: 5px 8px !important; background: var(--bnx-public-primary-soft) !important; border-color: transparent !important; color: var(--bnx-public-primary) !important; font-size: 10px !important; }
html body .reg-status { padding: 5px 8px !important; font-size: 10px !important; }
html body .reg-hero h1 { margin: 12px 0 5px !important; color: var(--bnx-public-text) !important; font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.15 !important; }
html body .reg-hero p { color: var(--bnx-public-muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
html body .reg-card-body { padding: 18px !important; }
html body .reg-metrics { gap: 8px !important; grid-template-columns: 1fr !important; }
html body .reg-metric { padding: 12px !important; border-radius: 12px !important; box-shadow: none !important; }
html body .reg-metric strong { font-size: 14px !important; color: var(--bnx-public-text) !important; }
html body .reg-metric span,
html body .reg-metric small { color: var(--bnx-public-muted) !important; }
html body .reg-form-grid { gap: 12px !important; }
html body .reg-btn,
html body .reg-btn-alt { min-height: 46px !important; border-radius: 11px !important; box-shadow: none !important; }
html body .reg-btn { background: var(--bnx-public-primary) !important; }

/* Verification */
html body .verification-page-shell { padding: 16px 16px 36px !important; }
html body .verification-hero-panel { padding: 18px 20px !important; overflow: hidden; }
html body .verification-hero-panel::after { display: none !important; }
html body .verification-eyebrow,
html body .verification-section-kicker { padding: 5px 8px !important; background: var(--bnx-public-primary-soft) !important; color: var(--bnx-public-primary) !important; font-size: 10px !important; }
html body .verification-status-pill { padding: 5px 8px !important; font-size: 10px !important; }
html body .verification-hero-copy { margin-top: 12px !important; }
html body .verification-hero-copy h1 { color: var(--bnx-public-text) !important; font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.15 !important; }
html body .verification-hero-copy p { margin-top: 6px !important; color: var(--bnx-public-muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
html body .verification-hero-grid { margin-top: 14px !important; gap: 8px !important; }
html body .verification-hero-metric { padding: 11px 12px !important; border-radius: 11px !important; box-shadow: none !important; }
html body .verification-hero-metric strong { margin-top: 5px !important; color: var(--bnx-public-text) !important; font-size: 14px !important; }
html body .verification-hero-metric span,
html body .verification-hero-metric small { color: var(--bnx-public-muted) !important; }
html body .verification-command-strip { margin-top: 12px !important; gap: 8px !important; }
html body .verification-command-card { padding: 11px 12px !important; border-radius: 11px !important; box-shadow: none !important; }
html body .verification-workspace-grid { gap: 16px !important; }
html body .verification-lookup-card,
html body .verification-side-card,
html body .verification-result-shell { border-radius: 16px !important; box-shadow: var(--bnx-public-shadow-soft) !important; }

/* Turnout counter */
html body .counter-page-shell { padding: 16px 16px 36px !important; }
html body .counter-hero-panel { padding: 18px 20px !important; }
html body .counter-hero-panel::after { display: none !important; }
html body .counter-eyebrow,
html body .counter-section-kicker { padding: 5px 8px !important; font-size: 10px !important; background: var(--bnx-public-primary-soft) !important; color: var(--bnx-public-primary) !important; }
html body .counter-status-pill { padding: 5px 8px !important; font-size: 10px !important; }
html body .counter-hero-copy { margin-top: 12px !important; }
html body .counter-hero-copy h1 { color: var(--bnx-public-text) !important; font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.15 !important; }
html body .counter-hero-copy p { margin-top: 6px !important; color: var(--bnx-public-muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
html body .counter-dashboard-grid { margin-top: 16px !important; gap: 16px !important; }
html body .counter-live-stage-card,
html body .counter-side-card { border-radius: 16px !important; }
html body .counter-board-toolbar { padding: 10px 12px !important; border-radius: 12px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; }
html body .counter-board-btn { min-height: 38px !important; padding: 0 10px !important; border-radius: 9px !important; box-shadow: none !important; }
html body .counter-stage-summary { gap: 8px !important; }
html body .counter-stage-summary-item { padding: 10px 12px !important; border-radius: 11px !important; box-shadow: none !important; }

/* Election selector */
html body .selector-shell { padding: 18px 16px 38px !important; }
html body .selector-topbar { margin-bottom: 14px !important; }
html body .selector-brand { color: var(--bnx-public-text) !important; }
html body .selector-brand-mark { background: var(--bnx-public-primary) !important; border-radius: 11px !important; }
html body .selector-target { min-height: 36px !important; padding: 0 10px !important; border-radius: 9px !important; color: var(--bnx-public-muted) !important; }
html body .selector-target.is-active { background: var(--bnx-public-primary-soft) !important; color: var(--bnx-public-primary) !important; }
html body .selector-hero { padding: 20px !important; box-shadow: none !important; }
html body .selector-hero::before,
html body .selector-hero::after { display: none !important; }
html body .selector-eyebrow { color: var(--bnx-public-primary) !important; font-size: 10px !important; }
html body .selector-hero h1 { margin: 7px 0 4px !important; color: var(--bnx-public-text) !important; font-size: clamp(24px, 3vw, 34px) !important; }
html body .selector-hero p { color: var(--bnx-public-muted) !important; font-size: 13px !important; }
html body .selector-stats { gap: 8px !important; margin-top: 10px !important; }
html body .selector-stat { padding: 11px 12px !important; border-radius: 12px !important; box-shadow: none !important; }
html body .selector-stat strong { margin-top: 4px !important; font-size: 20px !important; color: var(--bnx-public-text) !important; }
html body .selector-stat span,
html body .selector-stat small { color: var(--bnx-public-muted) !important; }
html body .selector-controls { margin-top: 14px !important; padding: 16px !important; box-shadow: none !important; }
html body .selector-controls-head h2 { font-size: 17px !important; color: var(--bnx-public-text) !important; }
html body .selector-controls-head p { color: var(--bnx-public-muted) !important; }
html body .selector-control-btn { min-height: 38px !important; border-radius: 9px !important; box-shadow: none !important; }
html body .selector-control-btn.primary { background: var(--bnx-public-primary) !important; }
html body .selector-grid { gap: 10px !important; margin-top: 14px !important; }
html body .selector-card { padding: 15px !important; border-radius: 15px !important; box-shadow: none !important; }
html body .selector-card::after { display: none !important; }
html body .selector-card h2 { margin: 9px 0 3px !important; font-size: 18px !important; color: var(--bnx-public-text) !important; }
html body .selector-card p,
html body .selector-chip { color: var(--bnx-public-muted) !important; }
html body .selector-chip { padding: 5px 8px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; }
html body .selector-btn { min-height: 40px !important; border-radius: 9px !important; box-shadow: none !important; }
html body .selector-btn.primary { background: var(--bnx-public-primary) !important; }

/* Election hub */
html body .hub-shell { padding: 18px 16px 38px !important; }
html body .hub-top { margin-bottom: 14px !important; }
html body .hub-brand { color: var(--bnx-public-text) !important; }
html body .hub-mark { background: var(--bnx-public-primary) !important; border-radius: 11px !important; }
html body .hub-hero { padding: 20px !important; box-shadow: none !important; }
html body .hub-hero::after { display: none !important; }
html body .hub-eyebrow { color: var(--bnx-public-primary) !important; font-size: 10px !important; }
html body .hub-hero h1 { margin: 7px 0 4px !important; color: var(--bnx-public-text) !important; font-size: clamp(24px, 3vw, 34px) !important; }
html body .hub-hero p { color: var(--bnx-public-muted) !important; }
html body .hub-chip { padding: 5px 8px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; color: var(--bnx-public-muted) !important; }
html body .hub-main { margin-top: 14px !important; }
html body .hub-grid { gap: 9px !important; }
html body .hub-card { padding: 12px !important; border-radius: 13px !important; box-shadow: none !important; transform: none !important; }
html body .hub-card:hover,
html body .hub-card:focus { border-color: var(--bnx-public-primary) !important; transform: none !important; box-shadow: none !important; }
html body .hub-icon { width: 38px !important; height: 38px !important; border-radius: 10px !important; background: var(--bnx-public-primary-soft) !important; color: var(--bnx-public-primary) !important; }
html body .hub-copy strong { color: var(--bnx-public-text) !important; }
html body .hub-copy small { color: var(--bnx-public-muted) !important; }
html body .hub-share { padding: 12px !important; box-shadow: none !important; }
html body .hub-share-url { color: var(--bnx-public-text) !important; }
html body .hub-foot { color: var(--bnx-public-muted) !important; }

/* Public results */
html body .public-results { padding: 18px 16px 38px !important; }
html body .public-box { padding: 10px 12px !important; border-radius: 13px !important; box-shadow: none !important; }
html body .public-pill { padding: 5px 8px !important; font-size: 10px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; color: var(--bnx-public-muted) !important; }
html body .public-actions .btn { min-height: 36px !important; border-radius: 9px !important; box-shadow: none !important; }
html body .public-hero { margin-top: 12px !important; padding: 20px !important; box-shadow: none !important; }
html body .public-hero::before,
html body .public-hero::after { display: none !important; }
html body .public-hero h1 { color: var(--bnx-public-text) !important; font-size: clamp(24px, 3vw, 34px) !important; }
html body .public-hero p { color: var(--bnx-public-muted) !important; }
html body .public-hero-context { gap: 7px !important; margin-top: 12px !important; }
html body .public-cards { gap: 8px !important; margin-top: 10px !important; }
html body .public-card { padding: 11px 12px !important; border-radius: 12px !important; box-shadow: none !important; }
html body .public-card strong { color: var(--bnx-public-text) !important; }
html body .public-panel { border-radius: 15px !important; box-shadow: none !important; }
html body .public-results-controls { padding: 15px !important; }
html body .public-position-card { border-radius: 15px !important; box-shadow: none !important; }
html body .public-position-title strong,
html body .public-result-name,
html body .public-result-value strong,
html body .public-candidate-person-meta strong,
html body .public-candidate-value strong { color: var(--bnx-public-text) !important; }
html body .public-position-title span,
html body .public-candidate-person-meta span,
html body .public-candidate-value span,
html body .public-candidate-outcome small { color: var(--bnx-public-muted) !important; }

/* Generic public state pages */
html body .state-shell { min-height: 100vh !important; padding: 28px 16px 40px !important; display: grid !important; align-items: start !important; }
html body .state-card { max-width: 900px !important; width: 100% !important; margin: 0 auto !important; overflow: hidden; }
html body .state-layout { display: block !important; min-height: 0 !important; }
html body .state-visual {
  min-height: 0 !important;
  padding: 20px 22px !important;
  background: var(--bnx-public-surface) !important;
  color: var(--bnx-public-text) !important;
  border-bottom: 1px solid var(--bnx-public-border);
}
html body .state-visual::before { display: none !important; }
html body .state-badge { padding: 5px 8px !important; background: var(--bnx-public-primary-soft) !important; border-color: transparent !important; color: var(--bnx-public-primary) !important; font-size: 10px !important; }
html body .state-mark { width: 52px !important; height: 52px !important; margin-top: 14px !important; border-radius: 14px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; box-shadow: none !important; }
html body .state-mark-ring { width: 36px !important; height: 36px !important; border-width: 0 !important; background: var(--bnx-public-primary-soft) !important; color: var(--state-accent, var(--bnx-public-primary)) !important; }
html body .state-hero-title { margin-top: 12px !important; color: var(--bnx-public-text) !important; font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.15 !important; }
html body .state-hero-copy { margin-top: 6px !important; color: var(--bnx-public-muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
html body .state-panel { padding: 20px 22px !important; border-radius: 0 !important; box-shadow: none !important; }
html body .state-eyebrow { color: var(--bnx-public-primary) !important; }
html body .state-title { color: var(--bnx-public-text) !important; font-size: 22px !important; line-height: 1.25 !important; }
html body .state-message,
html body .state-note,
html body .state-footer,
html body .state-timeline-copy,
html body .state-timeline-meta { color: var(--bnx-public-muted) !important; }
html body .state-signal-row { gap: 7px !important; }
html body .state-signal { padding: 5px 8px !important; font-size: 10px !important; }
html body .state-meta-grid,
html body .state-stats-grid { gap: 8px !important; }
html body .state-meta-item,
html body .state-stat { padding: 11px 12px !important; border-radius: 11px !important; box-shadow: none !important; }
html body .state-meta-label,
html body .state-stat-label { color: var(--bnx-public-muted) !important; }
html body .state-meta-value,
html body .state-stat-value { color: var(--bnx-public-text) !important; }
html body .state-countdown { gap: 7px !important; }
html body .state-countdown-segment { padding: 9px 7px !important; border-radius: 10px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; box-shadow: none !important; }
html body .state-countdown-value { color: var(--bnx-public-text) !important; font-size: 20px !important; }
html body .state-countdown-name,
html body .state-countdown-label { color: var(--bnx-public-muted) !important; }
html body .state-timeline { border-color: var(--bnx-public-border) !important; }
html body .state-timeline-item { padding: 10px 12px !important; border-radius: 11px !important; box-shadow: none !important; }
html body .state-button { min-height: 42px !important; border-radius: 10px !important; box-shadow: none !important; }
html body .state-button-primary { background: var(--bnx-public-primary) !important; }
html body .state-button-secondary { background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; color: var(--bnx-public-text) !important; }

/* Public voter ballot: prioritize the ballot itself over decorative chrome. */
html body.public-ballot-page .content-wrapper,
html body.public-ballot-page .wrapper { background: var(--bnx-public-bg) !important; }
html body.public-ballot-page .main-header .navbar { background: var(--bnx-public-surface) !important; border-bottom: 1px solid var(--bnx-public-border) !important; box-shadow: none !important; }
html body.public-ballot-page .main-header .navbar-brand,
html body.public-ballot-page .main-header .navbar-nav > li > a { color: var(--bnx-public-text) !important; }
html body.public-ballot-page .ballot-shell { padding: 18px 8px 30px !important; }
html body.public-ballot-page .ballot-hero {
  padding: 20px !important;
  border-radius: 16px !important;
  background: var(--bnx-public-surface) !important;
  color: var(--bnx-public-text) !important;
  border-color: var(--bnx-public-border) !important;
  box-shadow: none !important;
}
html body.public-ballot-page .ballot-hero::before { display: none !important; }
html body.public-ballot-page .ballot-badge { padding: 5px 8px !important; background: var(--bnx-public-primary-soft) !important; border-color: transparent !important; color: var(--bnx-public-primary) !important; font-size: 10px !important; }
html body.public-ballot-page .ballot-status-pill { padding: 5px 8px !important; font-size: 10px !important; }
html body.public-ballot-page .ballot-hero-grid { grid-template-columns: minmax(0, 1fr) auto !important; gap: 14px !important; margin-top: 12px !important; align-items: end; }
html body.public-ballot-page .ballot-hero-title { color: var(--bnx-public-text) !important; font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.15 !important; text-transform: none; }
html body.public-ballot-page .ballot-hero-description { margin: 7px 0 12px !important; color: var(--bnx-public-muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
html body.public-ballot-page .ballot-hero-meta .ballot-meta-item { min-width: 0 !important; padding: 7px 9px !important; border-radius: 9px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; }
html body.public-ballot-page .ballot-hero-meta .ballot-meta-label { color: var(--bnx-public-muted) !important; font-size: 9px !important; }
html body.public-ballot-page .ballot-hero-meta .ballot-meta-value { margin-top: 2px !important; color: var(--bnx-public-text) !important; font-size: 12px !important; }
html body.public-ballot-page .ballot-metric-grid { min-width: 220px; grid-template-columns: repeat(2, minmax(100px, 1fr)) !important; gap: 7px !important; }
html body.public-ballot-page .ballot-metric-card { min-height: 0 !important; padding: 10px !important; border-radius: 10px !important; background: var(--bnx-public-surface-soft) !important; border-color: var(--bnx-public-border) !important; box-shadow: none !important; }
html body.public-ballot-page .ballot-metric-card span,
html body.public-ballot-page .ballot-metric-card small { color: var(--bnx-public-muted) !important; }
html body.public-ballot-page .ballot-metric-card strong { margin-top: 5px !important; color: var(--bnx-public-text) !important; font-size: 20px !important; }
html body.public-ballot-page .ballot-metric-card small { display: none !important; }
html body.public-ballot-page .ballot-command-bar,
html body.public-ballot-page .ballot-contest-card,
html body.public-ballot-page .ballot-submit-dock,
html body.public-ballot-page .ballot-empty-state {
  border-radius: 16px !important;
  background: var(--bnx-public-surface) !important;
  border-color: var(--bnx-public-border) !important;
  box-shadow: var(--bnx-public-shadow-soft) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body.public-ballot-page .ballot-command-bar { padding: 12px 14px !important; margin-bottom: 12px !important; }
html body.public-ballot-page .ballot-progress-track { height: 7px !important; background: var(--bnx-public-surface-soft) !important; }
html body.public-ballot-page .ballot-progress-fill { background: var(--bnx-public-primary) !important; box-shadow: none !important; }
html body.public-ballot-page .ballot-option-card { border-radius: 14px !important; box-shadow: none !important; }

/* Footer */
html body .bnx-public-footer { border-top: 1px solid var(--bnx-public-border) !important; background: var(--bnx-public-surface) !important; }
html body .bnx-public-footer-inner { max-width: 1180px !important; }
html body .bnx-public-footer-meta { color: var(--bnx-public-muted) !important; }

/* Dark-mode text recovery for legacy inline public rules */
html.dark-mode body .entry-context-title,
html.dark-mode body .entry-auth-header h2,
html.dark-mode body .entry-link-card strong,
html.dark-mode body .entry-election-card strong,
html.dark-mode body .entry-side-title,
html.dark-mode body .reg-hero h1,
html.dark-mode body .reg-election-card strong,
html.dark-mode body .verification-hero-copy h1,
html.dark-mode body .verification-card-head h2,
html.dark-mode body .verification-card-head h3,
html.dark-mode body .counter-hero-copy h1,
html.dark-mode body .counter-card-head h2,
html.dark-mode body .selector-hero h1,
html.dark-mode body .selector-card h2,
html.dark-mode body .hub-hero h1,
html.dark-mode body .public-hero h1,
html.dark-mode body .public-panel h3,
html.dark-mode body .state-title,
html.dark-mode body .state-hero-title { color: var(--bnx-public-text) !important; }

@media (max-width: 1080px) {
  html body .reg-grid { grid-template-columns: 1fr !important; }
  html body .verification-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body.public-ballot-page .ballot-hero-grid { grid-template-columns: 1fr !important; }
  html body.public-ballot-page .ballot-metric-grid { min-width: 0; width: 100%; }
}

@media (max-width: 820px) {
  html body .entry-chip-row { width: auto !important; }
  html body .entry-chip,
  html body .entry-chip-button { width: auto !important; }
  html body .entry-context-card { grid-template-columns: 1fr; }
  html body .entry-context-actions { justify-content: flex-start; }
  html body .verification-topbar-inner,
  html body .counter-topbar-inner { align-items: center !important; }
  html body .verification-brand-copy small,
  html body .counter-brand-copy small { display: none !important; }
  html body .verification-nav-link span,
  html body .counter-nav-link span { display: none; }
  html body .verification-nav-link,
  html body .verification-theme-btn,
  html body .counter-nav-link,
  html body .counter-theme-btn { width: 36px; min-width: 36px; padding: 0 !important; justify-content: center; }
  html body .verification-theme-btn .theme-toggle-text,
  html body .counter-theme-btn .theme-toggle-text { display: none; }
  html body .selector-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .selector-filters { grid-template-columns: 1fr !important; }
  html body .hub-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  html body .entry-shell,
  html body .reg-page,
  html body .verification-page-shell,
  html body .counter-page-shell,
  html body .selector-shell,
  html body .hub-shell,
  html body .public-results,
  html body .state-shell { padding-left: 12px !important; padding-right: 12px !important; }
  html body .entry-topbar { min-height: 52px; }
  html body .entry-chip span.optional-label { display: none; }
  html body .entry-context-card,
  html body .entry-auth-card { padding: 16px !important; }
  html body .entry-context-actions > * { flex: 1 1 auto; }
  html body .entry-login-actions { display: grid !important; grid-template-columns: 1fr !important; }
  html body .entry-login-actions .entry-submit,
  html body .entry-inline-btn { width: 100% !important; }
  html body .entry-countdown { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html body .entry-countdown-box { min-width: 0; }
  html body .entry-countdown-box strong { font-size: 16px !important; }
  html body .verification-hero-grid { grid-template-columns: 1fr !important; }
  html body .verification-command-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .selector-stats { grid-template-columns: 1fr 1fr !important; }
  html body .selector-card-actions { display: grid !important; grid-template-columns: 1fr !important; }
  html body .hub-share { align-items: stretch !important; flex-direction: column !important; }
  html body .hub-share-actions { width: 100% !important; }
  html body .hub-share-actions .btn { flex: 1; }
  html body .state-visual,
  html body .state-panel { padding: 16px !important; }
  html body .state-meta-grid,
  html body .state-stats-grid { grid-template-columns: 1fr !important; }
  html body.public-ballot-page .ballot-shell { padding-left: 4px !important; padding-right: 4px !important; }
  html body.public-ballot-page .ballot-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .hub-card,
  html body .selector-card,
  html body .verification-nav-link,
  html body .counter-nav-link,
  html body .entry-chip { transition: none !important; transform: none !important; }
}

/* Public navigation overflow: keep primary election actions obvious and utilities secondary. */
html body .public-nav-more { position: relative; display: inline-flex; }
html body .public-nav-more > summary {
  list-style: none;
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--bnx-public-border);
  border-radius: 10px;
  background: var(--bnx-public-surface);
  color: var(--bnx-public-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  user-select: none;
}
html body .public-nav-more > summary::-webkit-details-marker { display: none; }
html body .public-nav-more > summary::marker { display: none; content: ""; }
html body .public-nav-more[open] > summary,
html body .public-nav-more > summary:hover,
html body .public-nav-more > summary:focus-visible {
  border-color: var(--bnx-public-primary);
  color: var(--bnx-public-primary);
  outline: none;
}
html body .public-nav-more-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--bnx-public-border);
  border-radius: 12px;
  background: var(--bnx-public-surface);
  box-shadow: var(--bnx-public-shadow-lg);
}
html body .public-nav-more-menu a,
html body .public-nav-more-menu button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bnx-public-text);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
html body .public-nav-more-menu a:hover,
html body .public-nav-more-menu a:focus-visible,
html body .public-nav-more-menu button:hover,
html body .public-nav-more-menu button:focus-visible {
  background: var(--bnx-public-surface-muted);
  color: var(--bnx-public-primary);
  outline: none;
}
html body .public-nav-more-menu .public-nav-more-label {
  display: block;
  padding: 7px 10px 4px;
  color: var(--bnx-public-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Keep results controls operational without making the first viewport a toolbar. */
html body .public-results .public-box {
  min-height: 52px !important;
  padding: 9px 10px !important;
  align-items: center !important;
}
html body .public-results .public-actions { align-items: center !important; }
html body .public-results .public-actions form { min-width: 210px; flex: 1 1 230px; }
html body .public-results .public-actions .form-control { min-width: 0 !important; width: 100%; }
html body .public-results .results-secondary-actions { display: inline-flex; gap: 6px; align-items: center; }

@media (max-width: 820px) {
  html body .public-nav-more > summary { width: 36px; min-width: 36px; padding: 0; }
  html body .public-nav-more > summary span { display: none; }
  html body .public-nav-more-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; }
}
html body button.selector-target { font-family: inherit; cursor: pointer; }
html body .selector-targets .public-nav-more > summary { min-height: 38px; border-radius: 10px; }
html body .selector-targets .public-nav-more-menu a[aria-current="page"] { background: var(--bnx-public-primary-soft); color: var(--bnx-public-primary); }
@media (max-width: 640px) {
  html body .selector-theme { width: 38px; min-width: 38px; justify-content: center; padding: 0 !important; }
  html body .selector-theme span { display: none; }
}
html body .public-nav-more-menu [hidden] { display: none !important; }
@media (max-width: 640px) {
  html body .reg-links { width: auto !important; }
  html body .reg-links .reg-link { width: auto !important; flex: 0 0 auto; }
}

/* BallotNexus v6.4.2 public live-experience and motion layer */
:root {
  --bnx-public-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);
  --bnx-public-live: #0f766e;
  --bnx-public-live-soft: rgba(15, 118, 110, 0.10);
  --bnx-public-focus-ring: color-mix(in srgb, var(--bnx-public-primary) 20%, transparent);
  --bnx-public-motion-fast: 180ms;
  --bnx-public-motion-base: 280ms;
  --bnx-public-motion-slow: 520ms;
}

html.dark-mode {
  --bnx-public-shadow-lg: 0 22px 56px rgba(2, 6, 23, 0.38);
  --bnx-public-live: #2dd4bf;
  --bnx-public-live-soft: rgba(45, 212, 191, 0.12);
}

/* Live status rail. It is injected by the shared public runtime only when a
   safe public status feed exists for the current surface. */
html body .bnx-public-livebar {
  position: relative;
  z-index: 18;
  min-height: 42px;
  margin: 0 0 14px;
  padding: 7px 9px 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--bnx-public-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bnx-public-surface) 92%, transparent);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}

html body .bnx-public-livebar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--bnx-public-primary);
  transition: background-color var(--bnx-public-motion-base) ease;
}

html body .bnx-public-livebar.is-available::before { background: var(--bnx-public-live); }
html body .bnx-public-livebar.is-unavailable::before { background: var(--bnx-public-warning); }
html body .bnx-public-livebar.is-offline::before { background: var(--bnx-public-danger); }

html body .bnx-public-livebar__main,
html body .bnx-public-livebar__tools {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

html body .bnx-public-livebar__main { flex: 1 1 auto; }
html body .bnx-public-livebar__tools { flex: 0 0 auto; }

html body .bnx-public-livebar__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: var(--bnx-public-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bnx-public-primary) 12%, transparent);
  transition: background-color var(--bnx-public-motion-base) ease, box-shadow var(--bnx-public-motion-base) ease;
}

html body .bnx-public-livebar.is-available .bnx-public-livebar__dot {
  background: var(--bnx-public-live);
  box-shadow: 0 0 0 4px var(--bnx-public-live-soft);
  animation: bnxPublicLivePulse 2.2s ease-in-out infinite;
}

html body .bnx-public-livebar.is-unavailable .bnx-public-livebar__dot {
  background: var(--bnx-public-warning);
  box-shadow: 0 0 0 4px var(--bnx-public-warning-soft);
}

html body .bnx-public-livebar.is-offline .bnx-public-livebar__dot {
  background: var(--bnx-public-danger);
  box-shadow: 0 0 0 4px var(--bnx-public-danger-soft);
  animation: none;
}

html body .bnx-public-livebar__label {
  color: var(--bnx-public-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

html body .bnx-public-livebar__status {
  min-width: 0;
  color: var(--bnx-public-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .bnx-public-livebar__meta {
  color: var(--bnx-public-muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

html body .bnx-public-livebar__refresh {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--bnx-public-border);
  border-radius: 9px;
  background: var(--bnx-public-surface-soft);
  color: var(--bnx-public-muted);
  cursor: pointer;
  transition: transform var(--bnx-public-motion-fast) ease, border-color var(--bnx-public-motion-fast) ease, color var(--bnx-public-motion-fast) ease, background var(--bnx-public-motion-fast) ease;
}

html body .bnx-public-livebar__refresh:hover,
html body .bnx-public-livebar__refresh:focus-visible {
  color: var(--bnx-public-primary);
  border-color: color-mix(in srgb, var(--bnx-public-primary) 48%, var(--bnx-public-border));
  background: var(--bnx-public-primary-soft);
  outline: none;
}

html body .bnx-public-livebar.is-syncing .bnx-public-livebar__refresh i {
  animation: bnxPublicSpin .8s linear infinite;
}

html body .state-card > .bnx-public-livebar {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  background: var(--bnx-public-surface-soft);
}

/* State/lifecycle surfaces use a compact command-style header instead of a
   large static hero. */
html body.public-state-page .state-card {
  max-width: 980px !important;
  border-radius: 18px !important;
  box-shadow: var(--bnx-public-shadow) !important;
}

html body.public-state-page .state-card::before {
  height: 3px !important;
  background: linear-gradient(90deg, var(--state-accent), var(--bnx-public-primary)) !important;
}

html body.public-state-page .state-card::after { display: none !important; }

html body.public-state-page .state-visual {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "badge badge"
    "mark title"
    "mark copy";
  column-gap: 14px;
  row-gap: 3px;
  align-items: center;
  padding: 18px 22px !important;
}

html body.public-state-page .state-badge {
  grid-area: badge;
  width: max-content;
  margin-bottom: 8px;
}

html body.public-state-page .state-mark {
  grid-area: mark;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  align-self: start;
  transition: transform var(--bnx-public-motion-base) ease, border-color var(--bnx-public-motion-base) ease;
}

html body.public-state-page .state-mark-ring {
  width: 34px !important;
  height: 34px !important;
  font-size: 17px !important;
}

html body.public-state-page .state-hero-title {
  grid-area: title;
  margin: 0 !important;
  max-width: none !important;
  font-size: clamp(23px, 3vw, 32px) !important;
}

html body.public-state-page .state-hero-copy {
  grid-area: copy;
  margin: 4px 0 0 !important;
  max-width: 680px !important;
}

html body.public-state-page .state-panel {
  padding: 18px 22px 22px !important;
}

html body.public-state-page .state-title { margin-top: 10px !important; }
html body.public-state-page .state-message { margin-top: 6px !important; }
html body.public-state-page .state-signal-row { margin-top: 14px !important; }
html body.public-state-page .state-meta-grid,
html body.public-state-page .state-stats-grid { margin-top: 14px !important; }
html body.public-state-page .state-note { margin-top: 14px !important; padding: 12px 14px !important; border-radius: 11px !important; background: var(--bnx-public-surface-soft) !important; }
html body.public-state-page .state-actions { margin-top: 16px !important; }

html body.public-state-page .state-signal {
  transition: transform var(--bnx-public-motion-fast) ease, border-color var(--bnx-public-motion-fast) ease, background var(--bnx-public-motion-fast) ease;
}

html body.public-state-page .state-timeline-item[data-status="current"] .state-timeline-icon {
  animation: bnxPublicLivePulse 2.2s ease-in-out infinite;
}

/* A state page can recover while it is open. The runtime inserts this safe
   action banner instead of forcing an unexpected redirect. */
html body .bnx-public-restored {
  margin: 0 0 14px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--bnx-public-live) 34%, var(--bnx-public-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--bnx-public-live-soft) 66%, var(--bnx-public-surface));
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--bnx-public-motion-base) ease, transform var(--bnx-public-motion-base) ease;
}

html body .bnx-public-restored.is-visible { opacity: 1; transform: translateY(0); }
html body .bnx-public-restored__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--bnx-public-live-soft); color: var(--bnx-public-live); }
html body .bnx-public-restored__copy { min-width: 0; display: grid; gap: 2px; }
html body .bnx-public-restored__copy strong { color: var(--bnx-public-text); font-size: 12px; }
html body .bnx-public-restored__copy span { color: var(--bnx-public-muted); font-size: 11px; line-height: 1.4; }
html body .bnx-public-restored > a { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border-radius: 9px; background: var(--bnx-public-live); color: #fff !important; font-size: 11px; font-weight: 800; text-decoration: none; }

/* Page/navigation progress feedback. It never blanks the public workspace. */
html body .bnx-public-progress {
  position: fixed;
  z-index: 2147483000;
  inset: 0 0 auto 0;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 120ms ease;
}

html body .bnx-public-progress span {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bnx-public-primary), #38bdf8, var(--bnx-public-live));
  transform: translateX(-120%);
}

html body .bnx-public-progress.is-active { opacity: 1; }
html body .bnx-public-progress.is-active span { animation: bnxPublicProgress 1.15s ease-in-out infinite; }
html body .bnx-public-progress.is-done { opacity: 0; }

/* Non-blocking form submission feedback. */
html body .bnx-is-busy { cursor: progress !important; }
html body .bnx-is-busy > * { pointer-events: none; }
html body .bnx-button-spinner {
  width: 15px;
  height: 15px;
  display: inline-block;
  flex: 0 0 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: bnxPublicSpin .72s linear infinite;
}

/* Contextual toast stack for status changes, connectivity, install state and
   manual status refreshes. */
html body .bnx-public-toast-stack {
  position: fixed;
  z-index: 2147482000;
  right: 18px;
  bottom: 18px;
  width: min(390px, calc(100vw - 24px));
  display: grid;
  gap: 9px;
  pointer-events: none;
}

html body .bnx-public-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 11px 11px 12px;
  border: 1px solid var(--bnx-public-border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bnx-public-surface) 96%, transparent);
  color: var(--bnx-public-text);
  box-shadow: var(--bnx-public-shadow-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity var(--bnx-public-motion-base) ease, transform var(--bnx-public-motion-base) cubic-bezier(.2,.8,.2,1);
}

html body .bnx-public-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
html body .bnx-public-toast__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--bnx-public-primary-soft); color: var(--bnx-public-primary); font-size: 15px; }
html body .bnx-public-toast.tone-success .bnx-public-toast__icon { background: var(--bnx-public-success-soft); color: var(--bnx-public-success); }
html body .bnx-public-toast.tone-warning .bnx-public-toast__icon { background: var(--bnx-public-warning-soft); color: var(--bnx-public-warning); }
html body .bnx-public-toast.tone-danger .bnx-public-toast__icon { background: var(--bnx-public-danger-soft); color: var(--bnx-public-danger); }
html body .bnx-public-toast__copy { min-width: 0; display: grid; gap: 2px; }
html body .bnx-public-toast__copy strong { color: var(--bnx-public-text); font-size: 12px; font-weight: 850; }
html body .bnx-public-toast__copy span { color: var(--bnx-public-muted); font-size: 11px; line-height: 1.4; }
html body .bnx-public-toast__action { min-height: 32px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; background: var(--bnx-public-primary-soft); color: var(--bnx-public-primary) !important; font-size: 11px; font-weight: 850; text-decoration: none; white-space: nowrap; }
html body .bnx-public-toast__close { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--bnx-public-muted); cursor: pointer; }
html body .bnx-public-toast__close:hover,
html body .bnx-public-toast__close:focus-visible { background: var(--bnx-public-surface-soft); color: var(--bnx-public-text); outline: none; }

/* Progressive entrance motion. Content remains fully visible when motion is
   unavailable or explicitly reduced by the user. */
html.bnx-public-motion-ready .bnx-public-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--bnx-public-motion-slow) cubic-bezier(.2,.8,.2,1),
    transform var(--bnx-public-motion-slow) cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--bnx-reveal-order, 0) * 34ms);
}

html.bnx-public-motion-ready .bnx-public-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Micro-interactions are intentionally subtle for an election product. */
@media (hover: hover) and (pointer: fine) {
  html body .hub-card,
  html body .selector-card,
  html body .entry-election-card,
  html body .entry-link-card,
  html body .verification-command-card,
  html body .reg-election-card,
  html body .public-position-card,
  html body.public-ballot-page .ballot-option-card {
    transition: transform var(--bnx-public-motion-fast) ease, border-color var(--bnx-public-motion-fast) ease, box-shadow var(--bnx-public-motion-fast) ease, background var(--bnx-public-motion-fast) ease !important;
  }

  html body .hub-card:hover,
  html body .selector-card:hover,
  html body .entry-election-card:hover,
  html body .entry-link-card:hover,
  html body .verification-command-card:hover,
  html body .reg-election-card:hover,
  html body .public-position-card:hover,
  html body.public-ballot-page .ballot-option-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--bnx-public-primary) 30%, var(--bnx-public-border)) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
  }

  html body .state-button,
  html body .entry-context-action,
  html body .entry-service-link,
  html body .verification-nav-link,
  html body .counter-nav-link,
  html body .reg-link,
  html body .selector-target,
  html body .hub-actions .btn,
  html body .public-actions .btn {
    transition: transform var(--bnx-public-motion-fast) ease, box-shadow var(--bnx-public-motion-fast) ease, border-color var(--bnx-public-motion-fast) ease, background var(--bnx-public-motion-fast) ease !important;
  }

  html body .state-button:hover,
  html body .entry-context-action:hover,
  html body .entry-service-link:hover,
  html body .verification-nav-link:hover,
  html body .counter-nav-link:hover,
  html body .reg-link:hover,
  html body .selector-target:hover,
  html body .hub-actions .btn:hover,
  html body .public-actions .btn:hover {
    transform: translateY(-1px);
  }
}

/* More menus now feel like a small command palette instead of a static list. */
html body .public-nav-more[open] .public-nav-more-menu {
  transform-origin: top right;
  animation: bnxPublicMenuIn var(--bnx-public-motion-fast) cubic-bezier(.2,.8,.2,1) both;
}

/* Countdown values get a restrained flip/tick when the number changes. */
html body .bnx-count-tick { animation: bnxPublicCountTick 240ms ease both; }

html.bnx-public-status-changed body .bnx-public-livebar {
  animation: bnxPublicStatusFlash 760ms ease both;
}

@keyframes bnxPublicSpin { to { transform: rotate(360deg); } }
@keyframes bnxPublicProgress {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(165%); }
  100% { transform: translateX(320%); }
}
@keyframes bnxPublicLivePulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--bnx-public-live-soft); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bnx-public-live) 6%, transparent); }
}
@keyframes bnxPublicMenuIn {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bnxPublicCountTick {
  0% { opacity: .55; transform: translateY(3px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bnxPublicStatusFlash {
  0%, 100% { box-shadow: 0 5px 14px rgba(15, 23, 42, .04); }
  45% { box-shadow: 0 0 0 4px var(--bnx-public-primary-soft), 0 12px 28px rgba(37, 99, 235, .12); }
}

@media (max-width: 720px) {
  html body .bnx-public-livebar { align-items: flex-start; }
  html body .bnx-public-livebar__label { display: none; }
  html body .bnx-public-livebar__meta { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  html body.public-state-page .state-visual {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 11px;
    padding: 16px !important;
  }
  html body.public-state-page .state-mark { width: 44px !important; height: 44px !important; }
  html body.public-state-page .state-mark-ring { width: 30px !important; height: 30px !important; font-size: 15px !important; }
  html body.public-state-page .state-panel { padding: 16px !important; }
  html body .bnx-public-restored { grid-template-columns: 32px minmax(0, 1fr); }
  html body .bnx-public-restored > a { grid-column: 1 / -1; justify-content: center; }
  html body .bnx-public-toast-stack { right: 12px; bottom: 12px; }
  html body .bnx-public-toast { grid-template-columns: 32px minmax(0, 1fr) auto; }
  html body .bnx-public-toast__action { grid-column: 2 / 3; width: max-content; }
  html body .bnx-public-toast__close { grid-column: 3 / 4; grid-row: 1 / 3; }
}

@media (max-width: 480px) {
  html body .bnx-public-livebar__tools { gap: 5px; }
  html body .bnx-public-livebar__meta { display: none; }
  html body.public-state-page .state-visual {
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "mark" "title" "copy";
    row-gap: 8px;
  }
  html body.public-state-page .state-mark { align-self: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html body .bnx-public-livebar__dot,
  html body .bnx-public-livebar.is-syncing .bnx-public-livebar__refresh i,
  html body .bnx-button-spinner,
  html body .bnx-public-progress.is-active span,
  html body .state-timeline-item[data-status="current"] .state-timeline-icon,
  html body .bnx-count-tick,
  html body .public-nav-more[open] .public-nav-more-menu,
  html.bnx-public-status-changed body .bnx-public-livebar {
    animation: none !important;
  }

  html.bnx-public-motion-ready .bnx-public-reveal,
  html.bnx-public-motion-ready .bnx-public-reveal.is-visible,
  html body .bnx-public-restored,
  html body .bnx-public-toast {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}