/* City overview layout (v1)
   - The map spans the full page width (right to left); the side rail moves
     below it as a horizontal strip.
   - Text on the map is larger and brighter.
   - The trend chart under the map is larger and easier to read.
   Presentation only; no data is changed. */

main .pi-spatial {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
/* The page container is an implicit grid; without an explicit track it grows
   to its widest child and pushes the map past the screen edge on mobile. */
main div:has(> .pi-spatial) {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
main div:has(> .pi-spatial) > * {
  min-width: 0;
  max-width: 100%;
}
main .pi-spatial > .pi-map-wrap {
  order: -1;
  width: 100%;
}
main .pi-spatial > .pi-map-wrap .mapboxgl-map {
  border-radius: 16px;
}
main .pi-spatial > .pi-siderail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px 18px;
  max-height: none;
  overflow: visible;
  padding: 0;
  align-items: start;
}
main .pi-spatial > .pi-siderail > .pi-rail-sec {
  margin-top: 0;
  padding: 14px 16px 10px;
  border: 1px solid rgba(151, 168, 202, .16);
  border-radius: 14px;
  background: rgba(11, 18, 32, .72);
  min-width: 0;
}
main .pi-spatial > .pi-siderail .pi-rail-head {
  font-size: 13.5px;
  color: #c9d4e3;
}
main .pi-spatial > .pi-siderail .pi-rail-item .sentence,
main .pi-spatial > .pi-siderail .pi-rail-item .basis {
  color: #c3cedd;
}

/* Brighter, larger text on the map */
main .pi-map-wrap .pi-overlay {
  background: rgba(6, 9, 16, .9);
  border-color: rgba(201, 214, 235, .28);
  padding: 16px 20px 14px !important;
}
main .pi-map-wrap .pi-overlay .l1 {
  font-size: 27px !important;
  color: #ffffff !important;
}
main .pi-map-wrap .pi-overlay .l2 {
  font-size: 15.5px !important;
  color: #e3e9f2 !important;
}
main .pi-map-wrap .pi-overlay .l3,
main .pi-map-wrap .pi-overlay .l3 span {
  font-size: 13.5px !important;
  color: #c3cedd !important;
}
main .pi-map-wrap .pi-hud {
  background: rgba(6, 9, 16, .9);
  border-color: rgba(201, 214, 235, .28);
}
main .pi-map-wrap .pi-hud .cell {
  padding: 11px 18px 10px;
}
main .pi-map-wrap .pi-hud .hlabel {
  font-size: 13.5px;
  color: #d3dce8;
}
main .pi-map-wrap .pi-hud .hval {
  font-size: 25px;
}
main .pi-map-wrap .pi-hud .hdelta {
  font-size: 14px;
}
main .pi-map-wrap .pi-hud .hprev {
  font-size: 13px;
  color: #b4c1d3;
}
/* Legend and map controls (inline-styled by the app) */
main .pi-map-wrap [style*="font-size: 11.5px"] {
  font-size: 13px !important;
  color: #eef2f8 !important;
}
main .pi-map-wrap [style*="font-size: 10.5px"] {
  font-size: 12.5px !important;
  color: #d3dce8 !important;
}
main .pi-map-wrap [style*="font-size: 10px"] {
  font-size: 12px !important;
  color: #b9c6d8 !important;
}
main .pi-map-wrap button[style*="font-size: 12px"],
main .pi-map-wrap button[style*="font-size: 12.5px"] {
  font-size: 13.5px !important;
}
main .pi-map-wrap button[style*="color: rgb(164, 175, 193)"] {
  color: #dbe3ee !important;
}
main .pi-map-wrap input[style*="font-size: 12.5px"] {
  font-size: 14px !important;
}

/* Trend chart under the map */
main .pi-drawer {
  margin-top: 16px;
  padding: 16px 22px 12px;
  border: 1px solid rgba(151, 168, 202, .16);
}
main .pi-drawer .dtitle {
  font-size: 18px;
  font-weight: 800;
}
main .pi-drawer .dnote {
  font-size: 13.5px;
  color: #b4c1d3;
}
main .pi-drawer .recharts-cartesian-grid line {
  stroke-opacity: .55;
}

@media (max-width: 760px) {
  main .pi-spatial > .pi-siderail {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Four stat cells do not fit over a phone-width map: show them below the
     map as a 2×2 grid instead of an overlapping strip. */
  main .pi-map-wrap .pi-hud {
    position: static !important;
    inset: auto !important;
    margin-top: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  main .pi-map-wrap .pi-hud .cell {
    padding: 10px 12px 9px;
    border-top: 1px solid rgba(151, 168, 202, .14);
  }
  main .pi-map-wrap .pi-hud .cell:nth-child(-n+2) {
    border-top: 0;
  }
  main .pi-map-wrap .pi-hud .cell:nth-child(odd) {
    border-inline-start: 0;
  }
  main .pi-map-wrap .pi-hud .hrow {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  main .pi-map-wrap .pi-hud .hlabel,
  main .pi-map-wrap .pi-hud .hprev {
    white-space: normal;
  }
  main .pi-map-wrap .pi-overlay .l1 {
    font-size: 21px !important;
  }
  main .pi-map-wrap .pi-overlay .l2 {
    font-size: 14px !important;
  }
  main .pi-map-wrap .pi-hud .hval {
    font-size: 20px;
  }
  main .pi-drawer {
    padding: 12px 12px 8px;
  }
}

/* v2: the map stats tiles keep a fixed order and label; the tile that matches
   the top-bar metric is marked instead of being moved to the first place. */
main .pi-map-wrap .pi-hud .cell.is-selected {
  background: rgba(240, 192, 64, .09);
  box-shadow: inset 0 3px 0 #f0c040;
}
main .pi-map-wrap .pi-hud .hlabel .hsel {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(240, 192, 64, .16);
  color: #f6d47a;
  font-size: 11.5px;
  font-weight: 800;
  vertical-align: 1px;
}