:root{
      --text:#222; --muted:#555; --card:#f9f9f9; --border:#ddd;
      --new:#ff7f0e;
      --gain:rgba(255,127,14,.35);
      --lossBase:#f7e36a;
      --lossStripe:#d2b206;
      --pos:#106c2a; --neg:#b42318; --brand:#0b6bcb;
      --ring: 0 0 0 3px rgba(11,107,203,.25);
    }

    html, body { margin:0; padding:0; background:#fff; color:var(--text);
      font-family:Work Sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; line-height:1.5; }
    a { color:#0645ad; }
    a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline:none; box-shadow: var(--ring); border-radius:8px; }
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

    .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    .container { max-width:1000px; margin:0 auto; padding:12px 10px; box-sizing:border-box; }
    header.container{ padding-top:16px; }
    h1 { font-family:"Founders Grotesk Bold", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      font-size:1.35rem; font-weight:500; margin:0 0 6px; line-height:1.2; }
    .deck { font-size:0.95rem; color:var(--muted); margin-bottom:10px; }

    .skip { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip:focus{ position:static; width:auto; height:auto; padding:6px 10px; margin:6px; background:#fff; border:2px solid var(--brand); border-radius:8px; z-index:10000; }

    /* Search + select */
    .search-bar-top{ width:100%; margin:8px 0 10px; display:grid; grid-template-columns:1fr; gap:8px; }
    .autoComplete_wrapper{ width:100%; }
    label[for="address-search"]{ font-weight:600; font-size:.95rem; }
    #address-search{
      width:100%; box-sizing:border-box; font-size:1rem;
      padding:10px 12px; border:2px solid var(--brand); border-radius:8px;
      transition: box-shadow .2s;
    }
    #address-search:focus{ box-shadow: var(--ring); }
    /* Make sure dropdown sits above the map */
    .autoComplete_wrapper > ul { z-index: 10000; }

    .district-chooser{
      display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:end; margin-bottom:8px;
    }
    .district-chooser label{ font-weight:600; font-size:.95rem; display:block; }
    .district-chooser select{ width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:.95rem; }
    .btn{ border:1px solid var(--border); background:#fff; padding:8px 12px; border-radius:10px; font-size:.95rem; cursor:pointer; transition: box-shadow .15s, border-color .15s; }
    .btn:hover{ border-color:var(--new); box-shadow:0 0 0 2px rgba(255,127,14,.18); }

    /* Centered legend above map */
    .legend-wrap{ display:flex; justify-content:center; margin:10px 0 6px; }
    .legend-bar {
      display:inline-flex; align-items:center; gap:14px;
      background:rgba(255,255,255,.92);
      border:1px solid #e5e5e5; border-radius:12px; padding:8px 12px;
      box-shadow:0 1px 2px rgba(0,0,0,.05);
      backdrop-filter: saturate(140%) blur(2px);
      font-size:.95rem; color:#333;
    }
    .legend-title{ font-weight:700; font-size:.9rem; letter-spacing:.02em; color:#222; }
    .legend-list{ display:inline-flex; gap:14px; padding:0; margin:0; list-style:none; }
    .legend-item{ display:inline-flex; align-items:center; gap:8px; line-height:1; }
    .legend-sep{ width:1px; height:18px; background:#e8e8e8; border-radius:1px; }
    .sw{ width:16px; height:16px; border-radius:50%; border:2px solid #bbb; box-sizing:border-box; display:inline-block; }
    .sw-new  { background:rgba(255,127,14,.18); border-color:var(--new); }
    .sw-gain { background:var(--gain); border-color:var(--new); }
    .sw-loss {
      border-color:#c4a306;
      background:
        repeating-linear-gradient(45deg,
          var(--lossBase) 0 6px,
          var(--lossStripe) 6px 10px);
    }

    /* Result card ABOVE map */
    .result-card{
      margin:8px 0 6px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:#fffbe8;
      font-size:.95rem;
    }
    .result-card .line{ margin:2px 0; }
    .result-card .ok{ color:var(--pos); }
    .result-card .changed{ color:#b26a00; }

    #map { width:100%; height:60vh; min-height:380px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

    .district-text-label{
      background:transparent; border:none; padding:0; margin:0;
      font-weight:800; font-size:.9rem; color:rgba(0,0,0,.55);
      text-shadow:0 1px 2px rgba(255,255,255,.9);
      pointer-events:none; text-align:center;
    }

    /* Visible address pin */
    .addr-pin{
      width:14px; height:14px;
      background:#0b6bcb;
      border:2px solid #fff;
      border-radius:50%;
      box-shadow:0 0 0 2px rgba(11,107,203,.25);
    }

    .profile-panel{ margin:12px 0; background:var(--card); border:1px solid var(--border); padding:12px; border-radius:10px; }
    .profile-header{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:0 0 6px; }
    .profile-header h2{ font-size:1.05rem; margin:0; }
    .chip{ font-size:.8rem; padding:2px 8px; border:1px solid var(--border); border-radius:999px; background:#fff; color:#333; }

    .pop-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:8px 0 4px; }
    .pop-card{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px; font-size:.93rem; }
    .pop-card .label{ color:var(--muted); font-size:.78rem; display:block; }
    .pop-card .value{ font-weight:600; }
    .delta-pos{ color:var(--pos); } .delta-neg{ color:var(--neg); }

    .demo-toggle { margin-top:8px; }
    .table-wrap{ margin-top:8px; border:1px solid var(--border); border-radius:8px; background:#fff; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .demotab{ width:100%; min-width:720px; border-collapse:collapse; font-size:.93rem; }
    .demotab caption{ text-align:left; padding:8px 10px; font-weight:600; }
    .demotab th,.demotab td{ border-bottom:1px solid #eee; padding:8px 10px; text-align:left; white-space:nowrap; }
    .demotab th{ background:#f6f6f6; font-weight:600; }
    .demotab th[scope="row"]{ font-weight:500; }

    @media (max-width: 720px){
      .district-chooser{ grid-template-columns: 1fr; }
      .legend-bar{ gap:10px; padding:6px 10px; font-size:.9rem; }
      .sw{ width:14px; height:14px; }
      .legend-sep{ height:16px; }
      .pop-grid{ grid-template-columns:1fr; }
      #map { height:56vh; min-height:320px; }
      .demotab th,.demotab td{ padding:6px 8px; }
      .btn{ width:100%; }
    }

    /* Prominent district title */
.district-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.district-title h2 {
  color: #222; /* neutral dark gray */
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
}

.council-line {
  margin-top: 2px;
  font-size: 1rem;
  color: #666;
  font-weight: 400;
  line-height: 1.3;
}

.council-name {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
}

/* Source line at bottom */
.source-line {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

#map {
  width: 100%;
  height: clamp(300px, 50vh, 450px);
}