@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100;400;600;900&display=swap');

h1 {
  font-family: 'Archivo', sans-serif;
  font-weight: 900; /* Black */
}

h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 600; /* Semi-Bold */
}

p.thin {
  font-family: 'Archivo', sans-serif;
  font-weight: 100; /* Thin */
}

p.regular {
  font-family: 'Archivo', sans-serif;
  font-weight: 400; /* Regular */
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Archivo', sans-serif;
  position: relative;
}

svg {
  width: 100%;
  height: 100vh;
  background: #161616;
  touch-action: none;
  user-select: none;
  overflow: hidden;
}

polygon {
  stroke: #edebe3;
  stroke-width: 2;
  paint-order: stroke fill;
  transition: filter 0.2s, stroke 0.2s;
}

polygon:hover {
  filter: brightness(1.2); /* Lighten current fill */
  stroke: black;           /* Overlay black border */
  stroke-width: 1.5;
  cursor: pointer;
}

text {
  /*font-size: 1rem;*/
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  fill: black;
  font-family: 'Archivo', sans-serif;
  font-weight: bold;

  /* White halo */
  paint-order: stroke fill;
  stroke: white;
  /*stroke-width: 2px;*/
  stroke-linejoin: round;
}

#tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #aaa;
  padding: 6px 10px;
  font-size: 14px;
  display: none;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  white-space: pre-line;
  font-family: 'Archivo', sans-serif;
}

#tooltip .tip-title {
  font-weight: 600;
  margin-bottom: 4px;
}

#tooltip .tip-table {
  border-collapse: collapse;   /* compact layout */
}

#tooltip .tip-table th,
#tooltip .tip-table td {
  padding: 2px 6px;
  border: none;                /* invisible lines */
  vertical-align: top;
}

#tooltip .tip-table th {
  font-weight: 600;
}

#tooltip .tl { text-align: left;  }
#tooltip .tr { text-align: right; }

.zoom-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zoom-controls button {
  padding: 6px 12px;
  font-size: 18px;
  border: none;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  font-family: 'Archivo', sans-serif;
}

.zoom-controls button:hover {
  background: #eee;
}

.mode-tab {
  padding: 6px 10px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Archivo', sans-serif;
  transition: background 0.2s;
}

.mode-tab:hover {
  background: #eee;
}

.mode-tab.active {
  background: #ddd;
  font-weight: bold;
}

.demographic-tab {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
  font-family: 'Archivo', sans-serif;
}

.demographic-tab:hover {
  background: #eee;
}

.demographic-tab.active {
  background: #ddd;
  font-weight: bold;
}

/* --- Overlay card (NYT-like) --- */
.info-card {
  position: absolute;
  top: 24px;              /* sit below your top tabs */
  left: 24px;
  z-index: 1100;

  max-width: 480px;
  width: min(92vw, 520px);

  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);

  /* dark, glassy look */
  background: rgba(20, 20, 20, 0.88);
  color: #fff;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
}

#info-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  color: #555;
  transition: color 0.2s ease, background-color 0.2s ease;
}

#info-toggle:hover {
  color: #000;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.info-card.collapsed #info-blurb,
.info-card.collapsed .info-actions,
.info-card.collapsed .info-links {
  display: none;
}

.info-card.collapsed {
  max-height: 2.425rem;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.info-title {
  margin: 0 0 8px 0;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.info-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 10px;
}

.info-search {
  margin: 10px 0 12px 0;
}
.info-search input {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.9);
  color: #111;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}

.info-blurb {
  margin: 6px 0 12px 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
}

.info-actions {
  display: flex;
  gap: 8px;
  margin: 6px 0 6px 0;
}

.pill {
  appearance: none;
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
}
.pill:hover { background: rgba(255,255,255,0.22); }
.pill.active { background: #fff; color: #111; }

.info-links {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 8px 0 0 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.info-links a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 12px;
}
.info-links a:hover { text-decoration: underline; }

/* Keep card readable over the map and tabs */
.top-tabs { z-index: 1200; }  /* your existing tabs stay above if needed */
.sidebar-tabs { z-index: 1050; }
.zoom-controls { z-index: 1050; }

/* Responsive nudge for small screens */
@media (max-width: 640px) {
  .info-card {
    top: 56px;
    left: 12px;
    right: 12px;
    width: auto;
    padding: 14px;
  }
}

/* Unified toolbar row */
.toolbar {
  position: absolute;
  bottom: 10px;              /* stick to bottom */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;

  display: flex;
  flex-wrap: wrap;           /* allow wrapping when screen edge is hit */
  align-items: center;
  justify-content: center;
  gap: 8px 12px;             /* row/column gaps */
  max-width: 92vw;
  background: rgba(255,255,255,0.9); /* optional: semi-opaque background */
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.toolbar-divider {
  opacity: 0.5;
  padding: 0 4px;
  font-weight: 600;
  user-select: none;
}

.mode-tab, .demographic-tab {
  padding: 6px 10px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Archivo', sans-serif;
  transition: background 0.2s;
}

.mode-tab:hover, .demographic-tab:hover { background: #eee; }
.mode-tab.active, .demographic-tab.active { background: #ddd; font-weight: bold; }

/* Space below the toolbar for the info card */
.info-card { top: 24px; }
@media (max-width: 640px) {
  .info-card { top: 24px; }
}

.hidden {
  display: none !important;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* backdrop */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: white;
  border-radius: 10px;
  width: 80%;
  max-width: 800px;
  max-height: 90vh;
  padding: 1.5rem;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  position: relative;
}

.close-button {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
}

.close-button:hover {
  color: #000;
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}
.modal-content::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}