:root {
    --paper: #ffffff;
    --chrome: #f4f3ef;
    --ink: #111;
    --muted: #6a6a66;
    --rule: #d6d4cc;
    --accent: #1f4e79;
    --neighbor: #ececea;
    --water: #e9f0f5;
    --shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08);
    --panel-w: 380px;
    --serif: "Times New Roman", Times, Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    background: var(--chrome); color: var(--ink);
    font: 14px/1.45 var(--sans);
    display: flex; flex-direction: column; overflow: hidden;
    -webkit-text-size-adjust: 100%;
  }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; }

  /* ---------- masthead ---------- */
  header {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 8px 14px; background: var(--paper); border-bottom: 1px solid var(--rule);
    z-index: 5;
  }
  .brand { display: flex; flex-direction: column; line-height: 1.05; margin-right: 10px; }
  .brand b { font: 700 20px var(--serif); letter-spacing: .06em; }
  .brand span { font: 12px var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
  .search { position: relative; flex: 1 1 180px; max-width: 320px; }
  .search input {
    width: 100%; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--chrome);
  }
  .search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  .results {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--paper);
    border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); max-height: 280px; overflow: auto;
    z-index: 20; display: none;
  }
  .results.open { display: block; }
  .results button {
    display: flex; width: 100%; gap: 8px; align-items: baseline; text-align: left; padding: 7px 10px;
    background: none; border: 0; border-bottom: 1px solid var(--rule);
  }
  .results button:last-child { border-bottom: 0; }
  .results button:hover, .results button.active { background: var(--chrome); }
  .results small { color: var(--muted); }
  .toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--rule); border-radius: 6px; background: var(--chrome); user-select: none; }
  .toggle input { margin: 0; accent-color: var(--accent); }
  .btn {
    padding: 5px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--chrome);
  }
  .btn:hover { border-color: #b8b6ae; }
  .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  .zoom { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
  .zoom button { width: 32px; height: 30px; border: 0; background: var(--chrome); border-right: 1px solid var(--rule); font-size: 16px; }
  .zoom button:last-child { border-right: 0; font-size: 12px; width: auto; padding: 0 8px; }
  .zoom button:hover { background: #e8e6df; }

  /* ---------- main ---------- */
  main { flex: 1; display: flex; min-height: 0; position: relative; }
  #stage { flex: 1; position: relative; min-width: 0; background: var(--water); overflow: hidden; touch-action: none; }
  #map { width: 100%; height: 100%; display: block; cursor: grab; }
  #map.dragging { cursor: grabbing; }
  #world { will-change: transform; }
  #world.animate { transition: transform .45s cubic-bezier(.2,.7,.2,1); }

  .neighbor { fill: var(--neighbor); stroke: #bbb; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .neighbor-label { font: italic 22px var(--serif); fill: #8d8d88; letter-spacing: .2em; text-anchor: middle; pointer-events: none; }
  .county { fill: #fff; stroke: #333; stroke-width: .9; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill .15s; }
  .county:hover { stroke-width: 2; stroke: #000; }
  #state-outline { fill: none; stroke: #000; stroke-width: 1.4; vector-effect: non-scaling-stroke; pointer-events: none; stroke-linejoin: round; }
  #hl { fill: none; stroke: var(--accent); stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
  .county-label { font-family: var(--serif); font-weight: 600; fill: #111; text-anchor: middle; pointer-events: none; letter-spacing: .02em; }
  #munis { display: none; }
  #munis.on { display: block; }
  .muni { stroke: #333; stroke-width: .6; vector-effect: non-scaling-stroke; cursor: pointer; opacity: .85; }
  .muni:hover { opacity: 1; stroke-width: 1.5; }
  .muni.selected { opacity: 1; }
  .muni-label { font-family: var(--sans); fill: #222; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 2.5px; stroke-linejoin: round; }
  #muni-labels { display: none; }
  #muni-labels.on { display: block; }
  .seat { fill: #c0392b; stroke: #fff; stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: none; }
  #seats { display: none; }
  #seats.on { display: block; }

  .tip {
    position: absolute; pointer-events: none; background: #111; color: #fff; padding: 3px 8px; border-radius: 4px;
    font-size: 12px; white-space: nowrap; transform: translate(12px, 14px); display: none; z-index: 4;
  }
  .scalebar { position: absolute; left: 14px; bottom: 12px; font: 11px var(--sans); color: var(--ink); pointer-events: none; }
  .scalebar .bar { height: 6px; border: 1px solid #111; background: linear-gradient(90deg, #111 50%, #fff 50%); margin-bottom: 3px; }
  .compass { position: absolute; right: 14px; bottom: 12px; width: 44px; height: 44px; pointer-events: none; opacity: .85; }
  .attrib { position: absolute; right: 68px; bottom: 12px; font-size: 10px; color: var(--muted); pointer-events: none; }

  /* ---------- side panel ---------- */
  aside {
    width: var(--panel-w); background: var(--chrome); border-left: 1px solid var(--rule);
    overflow-y: auto; padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 16px;
  }
  section h2 { font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
  section h2 button { font-size: 11px; padding: 2px 7px; }
  .legend { display: flex; flex-direction: column; gap: 4px; }
  .cat {
    display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 6px;
    padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  }
  .cat.active { border-color: var(--accent); background: #fff; }
  .cat .sw { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); padding: 0; overflow: hidden; position: relative; }
  .cat:not(.tool) .sw::after { content: "✎"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.8); opacity: 0; pointer-events: none; transition: opacity .15s; }
  .cat:not(.tool):hover .sw::after, .cat.active .sw::after { opacity: 1; }
  .cat .name { border-bottom: 1px dashed transparent; }
  .cat:hover .name { border-bottom-color: var(--rule); }
  .cat .sw input { position: absolute; inset: -6px; width: 40px; height: 40px; border: 0; padding: 0; cursor: pointer; }
  .cat .name { border: 0; background: transparent; padding: 2px 4px; min-width: 0; border-radius: 4px; }
  .cat .name:focus { background: #fff; outline: 1px solid var(--rule); }
  .cat .n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
  .cat .x { border: 0; background: none; color: var(--muted); padding: 0 4px; font-size: 14px; line-height: 1; }
  .cat .x:hover { color: #c0392b; }
  .cat.tool { grid-template-columns: 26px 1fr; }
  .cat.tool .sw { display: grid; place-items: center; background: #fff; font-size: 13px; }
  .tally { margin-top: 8px; font-size: 13px; }
  .tally b { font-size: 20px; font-family: var(--serif); }
  .meter { height: 8px; background: #e2e0d8; border-radius: 4px; overflow: hidden; margin-top: 6px; display: flex; }
  .meter i { display: block; height: 100%; }
  .hint { color: var(--muted); font-size: 12px; margin-top: 6px; }

  .card { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; }
  .card h3 { margin: 0; font: 700 20px var(--serif); letter-spacing: .01em; }
  .card .sub { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
  .facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; }
  .facts dt { color: var(--muted); margin: 0; }
  .facts dd { margin: 0; font-variant-numeric: tabular-nums; }
  .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
  .chips button { font-size: 12px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 12px; background: var(--chrome); }
  .chips button:hover { border-color: var(--accent); }
  .chips button.seat::after { content: " ★"; color: #c0392b; }
  .empty { color: var(--muted); font-size: 13px; }
  .card .actions { margin-top: 10px; display: flex; gap: 6px; }
  .card .actions .btn { font-size: 12px; padding: 3px 8px; }

  /* ---------- export dialog ---------- */
  dialog { border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; width: min(420px, 92vw); box-shadow: var(--shadow); }
  dialog::backdrop { background: rgba(0,0,0,.3); }
  dialog h2 { margin: 0 0 10px; font: 700 18px var(--serif); }
  .row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
  .row label { display: inline-flex; align-items: center; gap: 5px; }
  .row select { padding: 4px 6px; border: 1px solid var(--rule); border-radius: 5px; background: var(--chrome); }
  .dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .dl .btn { padding: 9px; text-align: center; }
  .linkbox { display: flex; gap: 6px; margin-top: 12px; }
  .linkbox input { flex: 1; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 5px; font-size: 12px; }
  .close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 18px; }

  .grip { display: none; width: 100%; border: 0; background: none; padding: 0 0 6px; color: var(--muted); font-size: 12px; text-align: center; }

  /* ---------- phone ---------- */
  @media (max-width: 760px) {
    header { padding: 6px 10px; gap: 6px 8px; }
    .brand { flex-direction: row; align-items: baseline; gap: 8px; margin-right: 0; }
    .brand b { font-size: 15px; }
    .brand span { font-size: 10px; }
    .tools { gap: 6px; flex-wrap: nowrap; width: 100%; }
    .search { flex: 1 1 auto; max-width: none; min-width: 0; }
    .toggle { padding: 5px 7px; font-size: 13px; white-space: nowrap; }
    .toggle .long { display: none; }
    .btn.primary { padding: 5px 8px; font-size: 13px; white-space: nowrap; }
    .btn.primary .long { display: none; }
    .zoom { display: none; }
    .brand span { display: none; }
    .brand b { white-space: nowrap; }
    .nav { margin: 0 0 0 auto; padding: 2px; }
    .nav a { padding: 3px 9px; font-size: 12px; }
    main { flex-direction: column; }
    aside {
      width: auto; border-left: 0; border-top: 1px solid var(--rule); max-height: 42vh; padding: 10px 12px 24px;
    }
    aside.collapsed { max-height: 38px; overflow: hidden; }
    .grip { display: block; }
    .attrib { display: none; }
  }
  .short { display: none; }
  @media (max-width: 760px) { .short { display: inline; } }
  .nav { display: flex; gap: 3px; margin-right: 10px; padding: 3px; border: 1px solid var(--rule); border-radius: 5px; background: var(--chrome); }
  .nav a { padding: 4px 12px; border-radius: 3px; color: var(--ink); text-decoration: none; font-size: 13px; white-space: nowrap; }
  .nav a:hover { background: #fff; }
  .nav a.here { background: var(--accent); color: #fff; font-weight: 600; }
  #zips { display: none; }
  #zips.on { display: block; }
  .zip { fill: rgba(0,0,0,0); stroke: #6b7a8a; stroke-width: .8; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; cursor: pointer; }
  .zip:hover { stroke: #1f4e79; stroke-width: 1.6; stroke-dasharray: none; }
  #zip-labels { display: none; }
  #zip-labels.on { display: block; }
  .zip-label { font-family: var(--sans); fill: #4a5866; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 2px; }
  .demo { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 6px; }
  .demo summary { cursor: pointer; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); user-select: none; }
  .demo table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12.5px; }
  .demo td { padding: 2px 0 2px 8px; }
  .demo td:first-child, .demo th:first-child { padding-left: 0; }
  .demo td:first-child { color: var(--muted); }
  .demo td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .demo td.r { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; width: 64px; white-space: nowrap; }
  .demo th { font-weight: 500; font-size: 11px; color: var(--muted); text-align: right; padding: 0 0 2px 8px; vertical-align: bottom; }
  .demo table.wide { font-size: 12px; }
  .demo table.wide td { padding-left: 6px; }
  .demo th:first-child { text-align: left; }
  .demo .src { font-size: 11px; color: var(--muted); margin-top: 6px; }
  .ext { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--accent); }

  @media print {
    header, aside, .tip, .scalebar, .compass, .attrib { display: none !important; }
    body { background: #fff; }
    #stage { position: fixed; inset: 0; }
  }

  /* ---------- details sections (Demographics and the extra datasets) ---------- */
  .demo .notes { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
  .demo .notes div { margin-top: 2px; }
  .demo .notes sup, .demo td sup, .demo .sub sup { font-size: 9px; color: var(--accent); margin-left: 1px; }
  .demo .src a, .demo .notes a { color: var(--accent); }
  .demo .nodata { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
  .demo table + table { margin-top: 10px; }
  .demo caption { text-align: left; font-size: 11px; color: var(--muted); padding: 6px 0 2px; caption-side: top; }
  .demo td.k { font-weight: 500; color: var(--ink); }
  .demo tr.indent td:first-child { padding-left: 12px; }
  .demo tr.rule td { border-top: 1px solid var(--rule); padding-top: 4px; }
  .agencies { margin-top: 8px; font-size: 12px; }
  .agencies summary { cursor: pointer; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12px; }
  .agencies ul { margin: 4px 0 0; padding-left: 14px; }
  .agencies li { padding: 1px 0; display: flex; justify-content: space-between; gap: 8px; }
  .agencies li b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .agencies .zero { color: #a23b2a; font-size: 10.5px; margin-left: 4px; }

  /* "i" info button and its popover */
  .info { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 4px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: #fff; color: var(--accent); font: italic 700 10px/1 var(--serif); vertical-align: 1px; }
  .info:hover { border-color: var(--accent); }
  .popover { position: fixed; z-index: 30; width: min(320px, calc(100vw - 24px)); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); padding: 10px 12px; font-size: 12.5px; line-height: 1.45; display: none; }
  .popover.open { display: block; }
  .popover h4 { margin: 0 0 4px; font: 600 13px var(--sans); padding-right: 18px; }
  .popover p { margin: 0 0 6px; }
  .popover a { color: var(--accent); word-break: break-all; }
  .popover .close { top: 4px; right: 6px; font-size: 16px; }

  /* ---------- heat map (Data Map) ---------- */
  .heat select { width: 100%; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; }
  .heat .key { margin-top: 8px; font-size: 12px; }
  .heat .ramp { height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); position: relative; }
  .heat .ramp i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #111; margin-left: -1px; }
  .heat .ends { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; color: var(--muted); margin-top: 3px; }
  .heat .nc { margin-top: 4px; color: var(--muted); }
  .heat .nc b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
  .heat .nd { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); }
  .heat .nd i { width: 16px; height: 12px; border: 1px solid rgba(0,0,0,.2); border-radius: 2px; background: var(--nodata); }
  .heat .note { color: var(--muted); font-size: 11px; margin-top: 4px; }
  :root { --nodata: #e6e3dc; }
  .heat .opt { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; user-select: none; }
  .heat .opt input { margin: 0; accent-color: var(--accent); }
  #heat-labels { display: none; pointer-events: none; }
  #heat-labels.on { display: block; }
  .heat-label { font-family: var(--sans); font-weight: 600; fill: #111; text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 1px; stroke-linejoin: round; }
  /* on a dark fill, both labels flip to white (the value keeps a faint dark halo instead of a light one) */
  .county-label-g.on-dark .county-label { fill: #fff; }
  .heat-label.on-dark { fill: #fff; stroke: rgba(0,0,0,.4); }
  .county.nodata { fill: var(--nodata); }

  /* ---------- Travel Map inspect card ---------- */
  .card.small h3 { font-size: 17px; }
  .card.small .sub { margin-bottom: 4px; }