@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,500;0,9..40,700;1,9..40,300&display=swap');

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: "DM Sans", "Avenir Next", sans-serif;
  background: #101014;
  color: #d4d4d8;
}

calcite-shell {
  --calcite-color-brand: #3b82f6;
  --calcite-font-family: "DM Sans", sans-serif;
}

arcgis-map {
  flex: 1;
  min-height: 0;
}

/* ── Panel descriptions ── */
.block-description {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #71717a;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* ── Borough chips ── */
.borough-chip {
  display: inline-block;
  padding: 1px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.borough-chip.manhattan { color: #38bdf8; }
.borough-chip.brooklyn  { color: #f472b6; }
.borough-chip.queens    { color: #4ade80; }
.borough-chip.bronx     { color: #fb923c; }

/* ── Stats bar ── */
.stats-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 20px;
  gap: 32px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #52525b;
  font-weight: 500;
}

.stat-value {
  font-size: 17px;
  font-weight: 700;
  color: #e4e4e7;
  letter-spacing: -0.02em;
}

/* ── About text ── */
.about-text {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.6;
  color: #a1a1aa;
  font-weight: 300;
}
.about-text a {
  color: #38bdf8;
  text-decoration: none;
  border-bottom: 1px solid #38bdf844;
  transition: border-color 0.2s;
}
.about-text a:hover {
  border-color: #38bdf8;
}

/* ── Legend ── */
#legendDiv {
  padding: 8px;
}

/* ── Popup ── */
.popup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: "DM Sans", sans-serif;
}
.popup-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #27272a;
}
.popup-table td:first-child {
  color: #71717a;
  white-space: nowrap;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.popup-table td:last-child {
  font-weight: 500;
  color: #d4d4d8;
}