/* Live-night additions on top of style.css (shared with election_dashboard). */

#test-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: repeating-linear-gradient(135deg, #f2994a 0 14px, #e07f2c 14px 28px);
  color: #1a1206; font: 700 13px/1 system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; text-align: center; padding: 7px 16px;
}
#test-banner:not([hidden]) ~ #app { padding-top: 27px; }
#test-banner[hidden] { display: none; }

.pill.live  { background: rgba(232,97,122,.14); color: #ff8fa3; border-color: rgba(232,97,122,.35); }
.pill.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
                     background: #ff5c7a; margin-right: 6px; vertical-align: 1px; animation: pulse 1.6s infinite; }
.pill.test  { background: rgba(242,153,74,.16); color: #f2b27a; border-color: rgba(242,153,74,.45); }
.pill.stale { background: rgba(242,153,74,.10); color: var(--warn); border-color: rgba(242,153,74,.35); }
.pill.wait  { color: var(--ink-dim); }
@keyframes pulse { 50% { opacity: .35; } }

.chip.call  { font-weight: 600; }
.chip.warn  { color: var(--warn); border-color: rgba(242,153,74,.5); }
.tick       { color: #86cf9c; font-weight: 700; }
.call-note  { color: var(--ink-dim); }

@media (max-width: 720px) {
  #test-banner { font-size: 11px; }
}

/* Hover: one outline on its own layer above every shape (app.js gHover), so
   no neighbour drawn later can cover half of it. */
.hover-outline { fill: none; stroke: #fff; vector-effect: non-scaling-stroke;
                 stroke-linejoin: round; pointer-events: none; }
.hover-outline.muni { stroke-width: 1.6px; }
.hover-outline.ward { stroke-width: 2px; }