/* Phone and iPad polish for the public tracker. */
@media (max-width: 820px) {
  html, body { overflow-x: clip !important; }

  header { padding-left: 18px !important; padding-right: 18px !important; }
  header > div[style*="display:flex"] {
    height: auto !important;
    min-height: 64px;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* tiny breathing room between the "Powered by Graham & Gold" line and the divider */
  header a[data-track="logo-home"] > div > div:last-child { margin-bottom: 5px; }
  header .site-nav {
    order: 9;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 8px 0 -12px;
    padding: 10px 0 12px;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    white-space: nowrap;
    border-top: 1px solid rgba(12,30,51,.12);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header .site-nav::-webkit-scrollbar { display: none; }
  header .site-nav a { flex: 0 0 auto; min-height: 34px; padding-top: 6px !important; padding-bottom: 6px !important; }

  .map-page { height: auto !important; min-height: 100svh; overflow: visible !important; }
  .map-body { display: flex !important; flex: none !important; flex-direction: column !important; min-height: 0 !important; }
  .map-canvas { order: 1; flex: none !important; height: min(58svh, 520px); min-height: 390px; width: 100%; }
  .map-sidebar { order: 2; width: 100% !important; max-height: none !important; overflow: visible !important; border-right: 0 !important; border-top: 1px solid rgba(12,30,51,.12); }
  .map-stats, .map-legend { display: none !important; }
  .map-basemap { top: 12px !important; right: 12px !important; }
  .map-basemap .bm { padding: 9px 11px !important; }
  .map-actions { left: 12px !important; bottom: 12px !important; max-width: calc(100% - 24px); overflow-x: auto; }
  .map-actions button { padding: 10px 12px !important; white-space: nowrap; }
  .leaflet-top.leaflet-right { margin-top: 54px !important; }
  .ask-emmy { display: none !important; }
  .map-canvas > a[data-track="map-brand"] {
    top: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    transform: scale(.86);
    transform-origin: top left;
  }
}

@media (max-width: 640px) {
  .map-canvas { height: 52svh; min-height: 340px; }
  .megawatt-note { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .megawatt-note > span:first-child { max-width: 100%; }

  .mobile-signup-bar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    background: #0C1E33 !important;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(17,20,23,.26);
    padding: 11px 12px !important;
  }
  .mobile-signup-bar > span:first-child > span:first-child { color: #B8D5F0 !important; }
  .mobile-signup-bar > span:first-child > span:last-child { font-size: 14px !important; color: #FFFFFF !important; }
  #mdct-root { padding-bottom: 104px !important; }
}

.social-button {
  width: 44px;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0 !important;
  letter-spacing: 0 !important;
  transition: transform .16s ease, box-shadow .16s ease;
}
.social-button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(12,30,51,.18); }
.social-button svg { width: 18px; height: 18px; fill: currentColor; }
.social-button.x { background:#111417; border-color:#111417 !important; color:#fff !important; }
.social-button.facebook { background:#1877F2; border-color:#1877F2 !important; color:#fff !important; }
.social-button.linkedin { background:#0A66C2; border-color:#0A66C2 !important; color:#fff !important; }
.social-button.email { background:#fff; color:#15487B !important; border-color:#15487B !important; }
.social-button.copy { background:#15487B; color:#fff !important; border-color:#15487B !important; }
.social-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.voice-feature {
  border: 1px solid #C9D9E8 !important;
  background: #F4F7FB;
  box-shadow: 0 12px 28px rgba(21,72,123,.09);
  overflow: hidden;
}
.voice-feature-banner {
  background: linear-gradient(118deg, #15487B 0%, #286FA9 100%) !important;
  position: relative;
}
.voice-feature-banner::after {
  content: "ELECTION DESK";
  position: absolute;
  right: 16px;
  bottom: 14px;
  color: rgba(255,255,255,.5);
  font: 500 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
}
.voice-feature-copy { background: linear-gradient(135deg, #FFFFFF 0%, #F4F7FB 100%); }