/* =========================================================
   UrbanScan v13 — Three-column analysis workspace
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: #111111;
  background: #f3f3f3;
}


/* =========================================================
   Header
   ========================================================= */

.topbar {
  flex: 0 0 auto;
  min-height: 88px;

  display: flex;
  align-items: center;
  gap: 24px;

  padding: 14px 24px;

  background: #ffffff;
  border-bottom: 1px solid #dddddd;

  position: relative;
  z-index: 50;
}

.brand {
  flex: 0 0 auto;
}

.brand h1 {
  margin: 0;

  font-size: 30px;
  line-height: 1;
  font-weight: 700;
}

.brand p {
  margin: 8px 0 0;

  font-size: 14px;
  color: #666666;
}

.author-name {
  margin-top: 4px;

  font-size: 11px;
  line-height: 1.2;

  letter-spacing: 0.35px;

  color: #888888;
}

.search-container {
  width: min(620px, 56vw);

  margin-left: auto;

  display: flex;
  align-items: center;
  gap: 10px;
}

#searchInput {
  width: 100%;
  min-width: 0;
  height: 44px;

  padding: 0 16px;

  border: 1px solid #cccccc;
  border-radius: 8px;

  background: #ffffff;

  font-size: 16px;
  outline: none;
}

#searchInput:focus {
  border-color: #555555;
}

#searchButton {
  height: 44px;

  padding: 0 22px;

  border: none;
  border-radius: 8px;

  background: #111111;
  color: #ffffff;

  font-size: 15px;
  cursor: pointer;
}

#searchButton:hover {
  opacity: 0.84;
}

#searchButton:disabled {
  opacity: 0.55;
  cursor: default;
}


/* =========================================================
   Three-column application workspace
   ========================================================= */

.workspace {
  flex: 1 1 auto;
  min-height: 0;

  display: grid;
  grid-template-columns:
    clamp(310px, 22vw, 360px)
    minmax(360px, 1fr)
    clamp(330px, 24vw, 390px);

  overflow: hidden;

  background: #ffffff;
}

.app-sidebar {
  min-width: 0;
  min-height: 0;

  background: #ffffff;
}

.left-sidebar {
  display: grid;
  grid-template-rows:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);

  overflow: hidden;

  border-right: 1px solid #dddddd;
}

.left-scroll-panel {
  min-height: 0;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.right-sidebar {
  overflow-y: auto;
  overscroll-behavior: contain;

  border-left: 1px solid #dddddd;
}

.sidebar-section {
  padding: 18px;
}

.sidebar-section + .sidebar-section {
  border-top: 1px solid #e3e3e3;
}

.sidebar-title {
  margin-bottom: 14px;

  font-size: 11px;
  line-height: 1.2;

  letter-spacing: 1.25px;

  color: #666666;
}

.section-kicker {
  font-size: 10px;
  line-height: 1.2;

  letter-spacing: 1px;

  color: #888888;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-divider {
  height: 1px;

  margin: 16px 0;

  background: #e5e5e5;
}


/* =========================================================
   Map
   ========================================================= */

.map-shell {
  min-width: 0;
  min-height: 0;

  position: relative;
  overflow: hidden;

  background: #d9dedf;
}

#map {
  width: 100%;
  height: 100%;
}

#map.pick-point-mode .maplibregl-canvas,
#map.three-point-mode .maplibregl-canvas {
  cursor: crosshair !important;
}

/*
  Terra Draw stays mounted because UrbanScan uses its drawing engine,
  undo/redo/delete actions, and selection logic. Its native floating
  toolbar is hidden because all controls now live in the left sidebar.
*/
.urbanscan-hidden-native-terradraw {
  display: none !important;
}

.three-point-instruction {
  position: absolute;

  top: 14px;
  left: 50%;

  z-index: 34;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 10px;

  max-width: min(460px, calc(100% - 30px));

  padding: 9px 11px;

  border: 1px solid #d9b3b3;
  border-radius: 7px;

  background: rgba(255, 255, 255, 0.97);

  font-size: 11px;
  line-height: 1.35;

  color: #6f3030;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.three-point-instruction[hidden] {
  display: none;
}

.instruction-cancel {
  flex: 0 0 auto;

  border: none;
  background: transparent;

  color: #777777;

  font-size: 10px;
  text-decoration: underline;

  cursor: pointer;
}


/* =========================================================
   Selected Study Area
   ========================================================= */

.selected-area-name {
  margin-top: 2px;

  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}

.area-row {
  display: flex;
  align-items: baseline;

  margin-top: 10px;
}

.area-value {
  font-size: 34px;
  line-height: 1;
  font-weight: 600;
}

.area-unit {
  margin-left: 6px;

  font-size: 14px;
  color: #777777;
}

.shape-info {
  margin-top: 8px;
  margin-bottom: 14px;

  font-size: 12px;
  line-height: 1.4;

  color: #777777;
}

.undo-note {
  margin-top: 9px;

  font-size: 10px;
  line-height: 1.45;

  color: #999999;
}


/* =========================================================
   Forms / buttons
   ========================================================= */

.field-label {
  display: block;

  margin-bottom: 5px;

  font-size: 10px;
  line-height: 1.2;

  color: #777777;
}

.rename-control {
  margin-bottom: 12px;
}

.rename-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.text-input,
.number-input {
  height: 36px;

  padding: 0 9px;

  border: 1px solid #cccccc;
  border-radius: 6px;

  background: #ffffff;

  font-size: 12px;
  outline: none;
}

.text-input {
  width: 100%;
  min-width: 0;
}

.text-input:focus,
.number-input:focus {
  border-color: #555555;
}

.text-input:disabled {
  background: #f4f4f4;
  color: #999999;
}

.small-button {
  min-width: 56px;
  min-height: 36px;

  padding: 0 10px;

  border: 1px solid #cccccc;
  border-radius: 6px;

  background: #eeeeee;
  color: #111111;

  font-size: 11px;
  cursor: pointer;
}

.small-button:hover:not(:disabled) {
  background: #e2e2e2;
}

.small-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.primary-panel-button,
.secondary-panel-button {
  width: 100%;
  min-height: 38px;

  border-radius: 6px;

  font-size: 12px;

  cursor: pointer;
}

.primary-panel-button {
  border: none;

  background: #111111;
  color: #ffffff;
}

.primary-panel-button:hover:not(:disabled) {
  opacity: 0.84;
}

.primary-panel-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.secondary-panel-button {
  margin-top: 9px;

  border: 1px solid #cccccc;

  background: #eeeeee;
  color: #111111;
}

.secondary-panel-button:hover:not(:disabled) {
  background: #e3e3e3;
}

.secondary-panel-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.compact-button {
  min-height: 36px;
}

.no-top-margin {
  margin-top: 0;
}

.button-pair {
  display: grid;
  grid-template-columns: 1fr 0.58fr;
  gap: 8px;
}

.text-button {
  width: 100%;

  margin-top: 10px;
  padding: 5px 0;

  border: none;
  background: transparent;

  color: #777777;

  font-size: 11px;
  text-decoration: underline;

  cursor: pointer;
}

.text-button:hover {
  color: #111111;
}


/* =========================================================
   Study Area list
   ========================================================= */

.area-count {
  min-width: 24px;

  padding: 3px 7px;

  border-radius: 99px;

  background: #eeeeee;

  text-align: center;

  font-size: 11px;
  color: #555555;
}

.area-list {
  margin-top: 10px;

  max-height: 220px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding-right: 3px;
}

.empty-list {
  padding: 11px;

  border: 1px dashed #cccccc;
  border-radius: 6px;

  color: #999999;

  font-size: 11px;
  line-height: 1.4;
}

.area-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 36px;
  gap: 6px;

  flex: 0 0 auto;
}

.area-list-item {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;

  padding: 9px;

  border: 1px solid #dddddd;
  border-radius: 7px;

  background: #ffffff;

  text-align: left;
  cursor: pointer;
}

.area-list-item:hover {
  border-color: #aaaaaa;
  background: #f8f8f8;
}

.area-list-item.active {
  border-color: #c82323;
  background: #fff8f8;
}

.area-item-main {
  min-width: 0;
}

.area-item-name {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 11px;
  font-weight: 600;
}

.area-item-detail {
  margin-top: 4px;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 9px;
  color: #888888;
}

.area-item-value {
  font-size: 10px;
  color: #555555;

  white-space: nowrap;
}

.area-edit-button,
.area-visibility-button {
  width: 36px;
  min-height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid #dddddd;
  border-radius: 7px;

  background: #ffffff;
  color: #666666;

  cursor: pointer;
}

.area-edit-button {
  font-size: 14px;
}

.area-edit-button:hover,
.area-visibility-button:hover:not(:disabled) {
  border-color: #aaaaaa;
  background: #f2f2f2;
  color: #222222;
}

.area-visibility-button {
  color: #999999;
}

.area-visibility-button.active {
  border-color: #555555;
  background: #eeeeee;
  color: #111111;
}

.area-visibility-button:disabled {
  opacity: 0.28;
  cursor: default;
}

.area-visibility-button svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.area-visibility-button.active svg circle {
  fill: currentColor;
}


/* =========================================================
   Create Study Area
   ========================================================= */

.create-area-section {
  padding-bottom: 20px;
}

.creation-subsection {
  padding: 14px;

  border: 1px solid #dedede;
  border-radius: 9px;

  background: #fafafa;
}

.creation-subsection + .creation-subsection {
  margin-top: 12px;
}

.creation-subtitle {
  margin-bottom: 12px;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.3px;

  color: #222222;
}

.free-draw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.shape-tool-button {
  min-width: 0;
  min-height: 70px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 8px 4px;

  border: 1px solid #d7d7d7;
  border-radius: 7px;

  background: #ffffff;
  color: #555555;

  cursor: pointer;
}

.shape-tool-button:hover {
  border-color: #999999;
  background: #f3f3f3;
  color: #111111;
}

.shape-tool-button.active {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}

.shape-tool-button svg {
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shape-tool-button svg circle {
  fill: currentColor;
  stroke: currentColor;
}

/*
  Circle drawing tool uses a hollow circle.
  Other tool icons keep their filled point markers.
*/
#circleToolButton svg circle {
  fill: none;
  stroke: currentColor;
}

.shape-tool-button span {
  width: 100%;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 9px;
}

.draw-action-grid {
  margin-top: 8px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.draw-action-button {
  min-width: 0;
  min-height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  padding: 5px;

  border: 1px solid #d9d9d9;
  border-radius: 6px;

  background: #eeeeee;
  color: #555555;

  font-size: 9px;
  cursor: pointer;
}

.draw-action-button:hover {
  background: #e3e3e3;
  color: #111111;
}

.draw-action-button.active {
  border-color: #555555;
  background: #dddddd;
  color: #111111;
}

.draw-action-button.danger-action:hover {
  border-color: #d4a0a0;
  background: #fff3f3;
  color: #9b2c2c;
}

.draw-action-button svg {
  width: 15px;
  height: 15px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-help {
  margin-top: 9px;

  font-size: 9px;
  line-height: 1.45;

  color: #999999;
}

.fixed-size-subsection .section-kicker {
  margin-bottom: 0;
}

.point-status {
  min-height: 18px;

  margin: 7px 0 9px;

  font-size: 10px;
  line-height: 1.4;

  color: #888888;
}

.point-status.ready {
  color: #b31e1e;
}

.fixed-shape-block {
  margin-top: 14px;
  padding-top: 14px;

  border-top: 1px solid #e5e5e5;
}

.fixed-shape-title {
  margin-bottom: 8px;

  font-size: 12px;
  font-weight: 600;
}

.input-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 8px;
  align-items: end;
}

.input-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;

  color: #777777;
  font-size: 10px;
}

.input-with-unit .number-input {
  width: 100%;
}

.dimension-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dimension-grid .number-input {
  width: 100%;
}

.dimension-unit {
  margin-top: 5px;

  font-size: 9px;
  color: #999999;
}


/* =========================================================
   Base Map
   ========================================================= */

.base-map-section {
  padding-bottom: 22px;
}

.toggle-row {
  min-height: 34px;

  display: flex;
  align-items: center;
  gap: 9px;

  font-size: 11px;

  cursor: pointer;
}

.toggle-row + .toggle-row {
  border-top: 1px solid #eeeeee;
}

.toggle-row input {
  margin: 0;
}


/* =========================================================
   Fixed center marker
   ========================================================= */

.fixed-center-marker {
  width: 18px;
  height: 18px;

  position: relative;
}

.fixed-center-marker::before,
.fixed-center-marker::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  background: #c82323;

  transform: translate(-50%, -50%);
}

.fixed-center-marker::before {
  width: 18px;
  height: 2px;
}

.fixed-center-marker::after {
  width: 2px;
  height: 18px;
}

.fixed-center-dot {
  width: 6px;
  height: 6px;

  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #ffffff;
  border: 2px solid #c82323;
}


/* =========================================================
   Building Analysis — right fixed column
   ========================================================= */

.analysis-panel {
  min-height: 100%;
}

.analysis-status {
  padding: 9px 10px;

  border: 1px solid #e0e0e0;
  border-radius: 6px;

  background: #f7f7f7;

  font-size: 10px;
  line-height: 1.45;

  color: #777777;
}

.analysis-status.loading {
  border-color: #d8d8d8;
  color: #333333;
}

.analysis-status.error {
  border-color: #e0b4b4;
  background: #fff7f7;
  color: #9b2c2c;
}

.analysis-status.success {
  border-color: #cfcfcf;
  background: #fafafa;
  color: #555555;
}

.analysis-metric-grid {
  margin-top: 12px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.analysis-metric {
  padding: 10px;

  border: 1px solid #e5e5e5;
  border-radius: 7px;

  background: #ffffff;
}

.analysis-metric-label {
  font-size: 9px;
  line-height: 1.25;

  letter-spacing: 0.65px;

  color: #888888;
}

.analysis-metric-value {
  margin-top: 5px;

  font-size: 18px;
  line-height: 1.1;
  font-weight: 600;

  color: #111111;
}

.analysis-toggle {
  margin-top: 10px;
}

.master-analysis-toggle {
  padding: 2px 0;
  border-top: none !important;
}

.analysis-divider {
  height: 1px;

  margin: 13px 0;

  background: #e7e7e7;
}

.analysis-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;

  margin-bottom: 8px;
}

.analysis-subtitle {
  font-size: 10px;
  line-height: 1.2;

  letter-spacing: 1px;

  color: #777777;
}

.analysis-filter-note {
  font-size: 8px;
  color: #aaaaaa;
  text-align: right;
}

.building-category-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.building-category-row {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto
    auto;

  gap: 8px;
  align-items: center;

  min-height: 34px;

  padding: 6px 7px;

  border-radius: 6px;

  background: #f7f7f7;
}

.building-category-row.category-hidden {
  opacity: 0.48;
}

.building-category-swatch {
  width: 10px;
  height: 10px;

  border-radius: 2px;
}

.building-category-main {
  min-width: 0;
}

.building-category-name {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 10px;
  font-weight: 600;

  color: #333333;
}

.building-category-area {
  margin-top: 2px;

  font-size: 9px;

  color: #999999;
}

.building-category-count {
  white-space: nowrap;

  font-size: 10px;
  font-weight: 600;

  color: #333333;
}

.category-visibility-switch {
  width: 30px;
  height: 18px;

  position: relative;

  display: inline-block;
  flex: 0 0 auto;
}

.category-visibility-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.category-switch-track {
  position: absolute;
  inset: 0;

  border-radius: 99px;

  background: #cccccc;

  cursor: pointer;

  transition:
    background 0.15s ease;
}

.category-switch-track::after {
  content: "";

  width: 12px;
  height: 12px;

  position: absolute;
  left: 3px;
  top: 3px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.15s ease;
}

.category-visibility-switch input:checked + .category-switch-track {
  background: #333333;
}

.category-visibility-switch input:checked + .category-switch-track::after {
  transform: translateX(12px);
}

.analysis-meta {
  margin-top: 12px;
  padding-top: 10px;

  border-top: 1px solid #ededed;

  font-size: 9px;
  line-height: 1.5;

  color: #999999;
}

.building-download-section {
  margin-top: 2px;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.download-button {
  min-height: 34px;

  padding: 5px 6px;

  border: 1px solid #cccccc;
  border-radius: 6px;

  background: #f3f3f3;
  color: #222222;

  font-size: 9px;
  line-height: 1.2;

  cursor: pointer;
}

.download-button:hover {
  background: #e7e7e7;
}

.download-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.building-popup {
  min-width: 170px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

.building-popup-title {
  margin-bottom: 6px;

  font-size: 12px;
  font-weight: 700;
}

.building-popup-row {
  margin-top: 3px;

  font-size: 10px;
  line-height: 1.35;

  color: #555555;
}


/* =========================================================
   MapLibre scale / controls
   ========================================================= */

.maplibregl-ctrl-scale {
  min-width: 70px;

  padding: 2px 5px;

  border-color: #555555;

  background: rgba(255, 255, 255, 0.92);

  color: #333333;

  font-size: 10px;
  line-height: 1.2;
}


/* =========================================================
   Scrollbars
   ========================================================= */

.app-sidebar::-webkit-scrollbar,
.area-list::-webkit-scrollbar {
  width: 7px;
}

.app-sidebar::-webkit-scrollbar-thumb,
.area-list::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 99px;
}

.app-sidebar::-webkit-scrollbar-track,
.area-list::-webkit-scrollbar-track {
  background: transparent;
}


/* =========================================================
   Responsive desktop compression
   ========================================================= */

@media (max-width: 1220px) {
  .workspace {
    grid-template-columns:
      300px
      minmax(320px, 1fr)
      330px;
  }

  .sidebar-section {
    padding: 14px;
  }

  .shape-tool-button span {
    font-size: 8px;
  }
}

@media (max-width: 980px) {
  .topbar {
    padding: 12px 14px;
  }

  .brand h1 {
    font-size: 25px;
  }

  .brand p {
    margin-top: 5px;
    font-size: 12px;
  }

  .search-container {
    width: min(500px, 58vw);
  }

  .workspace {
    grid-template-columns:
      280px
      minmax(300px, 1fr)
      300px;
  }

  .free-draw-grid,
  .draw-action-grid {
    gap: 5px;
  }
}


/* =========================================================
   v13.1 — Independent left scroll panels
   ========================================================= */

.left-scroll-panel + .left-scroll-panel {
  border-top: 1px solid #dcdcdc;
}

.left-scroll-panel::-webkit-scrollbar {
  width: 7px;
}

.left-scroll-panel::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 99px;
}

.left-scroll-panel::-webkit-scrollbar-track {
  background: transparent;
}

.free-draw-grid.five-tools {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.free-draw-grid.five-tools .shape-tool-button {
  min-height: 67px;
  padding-left: 2px;
  padding-right: 2px;
}

.free-draw-grid.five-tools .shape-tool-button span {
  font-size: 8px;
}


/* =========================================================
   v13.1 — Explicit Pan / Select interaction modes
   ========================================================= */

#map.urbanscan-pan-mode .maplibregl-canvas {
  cursor: grab !important;
}

#map.urbanscan-pan-mode .maplibregl-canvas:active {
  cursor: grabbing !important;
}

#map.urbanscan-select-mode .maplibregl-canvas {
  cursor: default !important;
}

#map.urbanscan-draw-mode .maplibregl-canvas,
#map.three-point-mode .maplibregl-canvas,
#map.pick-point-mode .maplibregl-canvas {
  cursor: crosshair !important;
}


/* =========================================================
   v13.1 — Base Map controls on the map
   ========================================================= */

.map-bottom-controls {
  position: absolute;

  left: 50%;
  bottom: 15px;

  z-index: 32;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 3px;

  padding: 5px 7px;

  border: 1px solid rgba(170, 170, 170, 0.75);
  border-radius: 8px;

  background: rgba(255, 255, 255, 0.94);

  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.09);
}

.map-toggle {
  min-height: 28px;

  display: flex;
  align-items: center;
  gap: 6px;

  padding: 0 8px;

  border-radius: 5px;

  white-space: nowrap;

  font-size: 10px;
  color: #444444;

  cursor: pointer;
}

.map-toggle:hover {
  background: #f1f1f1;
}

.map-toggle input {
  margin: 0;
}


/* Four download formats */
.download-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.download-button {
  min-width: 0;
}

@media (max-width: 1220px) {
  .free-draw-grid.five-tools {
    gap: 4px;
  }

  .map-toggle {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 9px;
  }
}


/* =========================================================
   v13.2 — Selected Study Area state
   ========================================================= */

.area-list-item.active {
  border-color: #e0b91e;
  background: #fffbea;
}


/* =========================================================
   v13.2 — Collapsible Fixed Size subsection
   ========================================================= */

.fixed-size-subsection {
  padding: 0;
  overflow: hidden;
}

.fixed-size-summary {
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px;

  list-style: none;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;

  color: #222222;

  cursor: pointer;
  user-select: none;
}

.fixed-size-summary::-webkit-details-marker {
  display: none;
}

.fixed-size-summary:hover {
  background: #f4f4f4;
}

.fixed-size-chevron {
  font-size: 18px;
  line-height: 1;

  color: #777777;

  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

.fixed-size-subsection[open] .fixed-size-chevron {
  transform: rotate(180deg);
}

.fixed-size-content {
  padding: 0 14px 14px;
  border-top: 1px solid #e5e5e5;
}

.fixed-size-content > .section-kicker {
  margin-top: 14px;
}


/* =========================================================
   v13.2 — Unified Area visibility
   ========================================================= */

.area-visibility-button.active {
  border-color: #555555;
  background: #eeeeee;
  color: #111111;
}


/* =========================================================
   v13.2 — Building Type master switch placement
   ========================================================= */

.master-analysis-toggle {
  margin-top: 0;
  margin-bottom: 8px;
  padding: 2px 0 7px;

  border-top: none !important;
  border-bottom: 1px solid #eeeeee;
}


/* =========================================================
   v13.3 — Map fills the entire left/center workspace
   ========================================================= */

.workspace {
  grid-template-columns:
    minmax(420px, 1fr)
    clamp(330px, 24vw, 390px);
}

.left-sidebar {
  display: none !important;
}

.map-shell {
  position: relative;
}


/* =========================================================
   v13.3 — Study Area panels are overlays ON TOP of the map
   ========================================================= */

.left-overlay-card {
  position: absolute;
  left: 14px;

  z-index: 36;

  width: clamp(300px, 24vw, 350px);

  border: 1px solid rgba(210, 210, 210, 0.95);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.97);

  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.08);

  backdrop-filter: blur(3px);
}

.create-study-area-card {
  top: 14px;

  max-height: 52%;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.selected-study-area-card {
  bottom: 14px;

  max-height: 42%;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 16px;
}

.overlay-card-summary {
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 0 16px;

  list-style: none;

  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 1.25px;

  color: #666666;

  cursor: pointer;
  user-select: none;
}

.overlay-card-summary::-webkit-details-marker {
  display: none;
}

.overlay-card-summary:hover {
  background: #f6f6f6;
}

.overlay-card-chevron {
  font-size: 18px;
  line-height: 1;

  color: #777777;

  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

.create-study-area-card[open] .overlay-card-chevron {
  transform: rotate(180deg);
}

.create-study-area-content {
  padding: 0 14px 14px;
  border-top: 1px solid #e6e6e6;
}

.create-study-area-content > .creation-subsection:first-child {
  margin-top: 14px;
}

.create-study-area-content .fixed-size-subsection {
  padding: 14px;
  overflow: visible;
}

.create-study-area-content .fixed-size-subsection .creation-subtitle {
  display: block;
}

/* Old nested Fixed Size accordion is no longer used in v13.3 */
.fixed-size-summary,
.fixed-size-chevron,
.fixed-size-content {
  all: unset;
}


/* Independent overlay scrolling */
.create-study-area-card::-webkit-scrollbar,
.selected-study-area-card::-webkit-scrollbar {
  width: 7px;
}

.create-study-area-card::-webkit-scrollbar-thumb,
.selected-study-area-card::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 99px;
}

.create-study-area-card::-webkit-scrollbar-track,
.selected-study-area-card::-webkit-scrollbar-track {
  background: transparent;
}


/* =========================================================
   v13.3 — Stronger selected Study Area yellow
   ========================================================= */

.area-list-item.active {
  border-color: #c58b00;
  background: #fff5cf;
}


/* =========================================================
   Responsive overlay sizing
   ========================================================= */

@media (max-width: 1220px) {
  .workspace {
    grid-template-columns:
      minmax(380px, 1fr)
      330px;
  }

  .left-overlay-card {
    width: 305px;
  }
}

@media (max-height: 720px) {
  .create-study-area-card {
    max-height: 48%;
  }

  .selected-study-area-card {
    max-height: 46%;
  }
}


/* =========================================================
   v14.0 — Building visualization modes
   ========================================================= */

.visualization-section-heading {
  margin-top: 0;
}

.visualization-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;

  margin: 8px 0 12px;
}

.visualization-mode-button {
  min-width: 0;
  min-height: 38px;

  padding: 7px 5px;

  border: 1px solid #d4d4d4;
  border-radius: 6px;

  background: #f6f6f6;

  font: inherit;
  font-size: 10px;
  line-height: 1.15;

  color: #444444;

  cursor: pointer;
}

.visualization-mode-button:hover {
  background: #eeeeee;
}

.visualization-mode-button.active {
  border-color: #222222;
  background: #111111;
  color: #ffffff;
}

.continuous-legend {
  margin: 4px 0 15px;

  padding: 11px;

  border: 1px solid #e2e2e2;
  border-radius: 7px;

  background: #fafafa;
}

.continuous-legend-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;

  margin-bottom: 8px;
}

.continuous-legend-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;

  color: #555555;
}

.continuous-legend-coverage {
  max-width: 70%;

  text-align: right;

  font-size: 9px;
  line-height: 1.35;

  color: #888888;
}

.continuous-legend-gradient {
  height: 12px;

  border: 1px solid #cfcfcf;
  border-radius: 3px;

  background:
    linear-gradient(
      to right,
      #eaf3fb 0%,
      #cfe3f4 20%,
      #9ecae1 40%,
      #6baed6 60%,
      #3182bd 80%,
      #08519c 100%
    );
}

.continuous-legend-ticks {
  display: flex;
  justify-content: space-between;
  gap: 4px;

  margin-top: 5px;

  font-size: 8px;
  color: #777777;
}

.continuous-legend-unknown {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: 9px;

  font-size: 9px;
  color: #777777;
}

.continuous-legend-unknown-swatch {
  width: 12px;
  height: 12px;

  flex: 0 0 12px;

  border: 1px solid #e1e4e8;
  border-radius: 2px;

  background: #fcfcfd;
}

#buildingTypeControls[hidden] {
  display: none !important;
}


/* =========================================================
   Height coverage + source summary — v15.5
   ========================================================= */

.height-data-summary {
  margin-top: 11px;
  padding-top: 10px;

  border-top: 1px solid #e4e4e4;
}

.height-data-summary-title {
  font-size: 8px;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.7px;

  color: #777777;
}

.height-data-coverage-line {
  margin-top: 5px;

  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;

  font-size: 9px;
  line-height: 1.35;

  color: #777777;
}

.height-data-coverage-value {
  font-size: 11px;
  font-weight: 700;

  color: #333333;
}

.height-data-separator {
  margin: 0 2px;

  color: #b0b0b0;
}

.height-source-title {
  margin-top: 10px;
}

.height-source-breakdown {
  margin-top: 4px;
}

.height-source-row {
  min-height: 19px;

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;

  border-top: 1px solid #ededed;

  font-size: 9px;
  line-height: 1.25;
}

.height-source-row:first-child {
  border-top: 0;
}

.height-source-label {
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #555555;
}

.height-source-value {
  flex: 0 0 auto;

  font-variant-numeric: tabular-nums;

  color: #777777;
}

.height-source-row.unknown .height-source-label,
.height-source-row.unknown .height-source-value {
  color: #999999;
}


/* =========================================================
   v15.6 — interaction + rendering
   ========================================================= */

.urbanscan-pan-mode .maplibregl-marker {
  cursor: pointer;
}

#map canvas {
  visibility: visible !important;
}


/* =========================================================
   v15.6.1 — Height source row vertical alignment
   ========================================================= */

/* More breathing room below SOURCE BY BUILDING. */
.height-source-title {
  margin-top: 12px;
}

.height-source-breakdown {
  margin-top: 8px;
}

/*
  Put the separator underneath each source row and lower the text
  so the baseline sits visually close to that lower rule.
*/
.height-source-row {
  min-height: 23px;

  align-items: flex-end;

  padding-top: 5px;
  padding-bottom: 2px;

  border-top: 0;
  border-bottom: 1px solid #ededed;
}

.height-source-row:first-child {
  border-top: 0;
}

.height-source-row:last-child {
  border-bottom: 1px solid #ededed;
}


/* =========================================================
   v15.7 — Official source candidate notice
   ========================================================= */

.official-source-notice {
  margin-top: 12px;
  padding: 11px;

  border: 1px solid #d9d9d9;
  border-radius: 7px;

  background: #fafafa;
}

.official-source-notice-kicker {
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.7px;
  color: #888888;
}

.official-source-headline {
  margin-top: 5px;

  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;

  color: #222222;
}

.official-source-summary {
  margin-top: 5px;

  font-size: 9px;
  line-height: 1.5;

  color: #777777;
}

.official-source-list {
  margin-top: 9px;
}

.official-source-row {
  padding: 7px 0;

  border-top: 1px solid #e8e8e8;
}

.official-source-row:last-child {
  border-bottom: 1px solid #e8e8e8;
}

.official-source-name {
  font-size: 10px;
  line-height: 1.35;
  font-weight: 600;

  color: #333333;
}

.official-source-detail,
.official-source-roles {
  margin-top: 2px;

  font-size: 8.5px;
  line-height: 1.4;

  color: #8a8a8a;
}

.official-source-roles {
  overflow-wrap: anywhere;
}

.official-source-actions {
  margin-top: 9px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.official-source-button {
  min-height: 34px;
  padding: 7px 8px;

  border: 1px solid #d5d5d5;
  border-radius: 6px;

  background: #ffffff;
  color: #444444;

  font: inherit;
  font-size: 9px;

  cursor: pointer;
}

.official-source-button.primary {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}


/* =========================================================
   v15.8 — Global official download manager + data settings
   ========================================================= */

.urban-data-settings {
  margin: 10px 0 12px;
  border: 1px solid #dedede;
  border-radius: 7px;
  background: #fafafa;
}

.urban-data-settings > summary {
  padding: 9px 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 9px;
  letter-spacing: 0.7px;
  color: #777777;
}

.urban-data-settings > summary::-webkit-details-marker {
  display: none;
}

.urban-data-settings > summary::after {
  content: '+';
  float: right;
  font-size: 12px;
  line-height: 1;
  color: #888888;
}

.urban-data-settings[open] > summary::after {
  content: '−';
}

.urban-data-settings-body {
  padding: 0 10px 10px;
}

.urban-data-setting-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #e8e8e8;
  font-size: 9px;
  color: #666666;
}

.urban-data-setting-row select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  background: #ffffff;
  color: #333333;
  font: inherit;
}

.result-storage-summary {
  padding: 8px 0 7px;
  border-top: 1px solid #e8e8e8;
  font-size: 8.5px;
  line-height: 1.45;
  color: #858585;
}

.urban-data-clean-button {
  width: 100%;
  min-height: 32px;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  background: #ffffff;
  color: #444444;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.urban-data-clean-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.official-source-download-status {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e8e8e8;
  font-size: 8.5px;
  line-height: 1.45;
  color: #777777;
}

.official-source-actions {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}


/* =========================================================
   v15.9 — Separate Building Type / Height analysis modes
   ========================================================= */
.analysis-mode-control {
  margin: 16px 0 10px;
}

.analysis-mode-control .field-label {
  margin-bottom: 8px;
}

.analysis-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.analysis-mode-button {
  min-height: 44px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  background: #ffffff;
  color: #222222;
  font: inherit;
  cursor: pointer;
}

.analysis-mode-button:hover {
  border-color: #9f9f9f;
}

.analysis-mode-button.active {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

.analysis-mode-note,
.urban-data-setting-note {
  margin-top: 8px;
  color: #8a8a8a;
  font-size: 12px;
  line-height: 1.45;
}

.urban-data-settings.analysis-height-local-only .urban-data-setting-row {
  display: none;
}

.urban-data-settings.analysis-height-local-only .urban-data-setting-note {
  margin-top: 0;
  color: #5f5f5f;
}

/* =========================================================
   v15.9.2 — Analysis typography + persistent official-data prompt
   ========================================================= */

/* Match the normal panel-button typography. */
.analysis-mode-button {
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Success/idle status remains hidden; loading and errors can still appear. */
.analysis-status[hidden] {
  display: none !important;
}

/* Minimal official-data prompt: no provider/source/Registry details. */
.official-source-notice-minimal {
  margin: 10px 0 12px;
  padding: 12px;
}

.official-source-notice-minimal .official-source-headline {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.official-source-actions-minimal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.official-source-actions-minimal .official-source-button {
  min-height: 36px;
}


/* URBANSCAN_URBAN_FORM_FAR_V1 */
.far-data-summary {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dddddd;
  border-radius: 10px;
  background: #ffffff;
}
.far-data-summary[hidden],
.far-gradient-visual[hidden] { display: none !important; }
.far-data-summary-title {
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: #777777;
}
.far-primary-value {
  margin-bottom: 12px;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  color: #111111;
}
.far-gradient-visual { margin-bottom: 18px; }
.far-gradient-bar {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg,#fff4e6 0%,#ffd8a8 25%,#ffb366 50%,#f08a32 75%,#d95f02 100%);
}
.far-gradient-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 10px;
  color: #888888;
}
.far-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.far-mini-metric {
  padding: 10px;
  border-radius: 8px;
  background: #f7f7f7;
}
.far-mini-label {
  margin-bottom: 5px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #888888;
}
.far-mini-value {
  font-size: 15px;
  font-weight: 700;
  color: #111111;
}
.far-type-title { margin-top: 2px; }
.far-by-type-list {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}
.far-type-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 7px;
  background: #f7f7f7;
}
.far-type-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #333333;
}
.far-type-value {
  font-size: 11px;
  font-weight: 700;
  color: #111111;
}
.far-method-note {
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.45;
  color: #999999;
}


/* URBANSCAN_BUILDING_PROFILE_V1 */
.building-profile-summary{margin:0 0 14px;padding:12px;border:1px solid #ddd;border-radius:9px;background:#fff}
.building-profile-summary[hidden]{display:none!important}
.building-profile-heading{margin-bottom:7px;font-size:10px;line-height:1.25;font-weight:700;letter-spacing:.07em;color:#666}
.building-profile-note{margin-bottom:10px;font-size:9px;line-height:1.45;color:#999}
.building-profile-type-list{display:grid;gap:6px}
.building-profile-type-row{display:grid;grid-template-columns:minmax(0,1fr) 74px 42px;gap:8px;align-items:center}
.building-profile-type-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#333}
.building-profile-type-track{height:5px;overflow:hidden;border-radius:999px;background:#eee}
.building-profile-type-fill{height:100%;border-radius:999px;background:#777}
.building-profile-type-percent{text-align:right;font-size:10px;font-weight:700;color:#333}
.building-profile-gfa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.building-profile-mini-card{padding:9px;border-radius:7px;background:#f7f7f7}
.building-profile-mini-label{margin-bottom:5px;font-size:8px;line-height:1.25;letter-spacing:.04em;color:#888}
.building-profile-mini-value{font-size:14px;line-height:1.2;font-weight:700;color:#111}
.building-profile-gfa-gradient{height:11px;border-radius:999px;background:linear-gradient(90deg,#f5f5f5 0%,#ececec 8%,#e0e0e0 16%,#d2d2d2 24%,#c0c0c0 33%,#ababab 42%,#929292 51%,#777777 60%,#5f5f5f 70%,#4a4a4a 80%,#373737 90%,#242424 100%)}
.building-profile-gfa-labels{display:flex;justify-content:space-between;gap:8px;margin-top:5px;margin-bottom:10px;font-size:9px;color:#777}

/* URBANSCAN_ANALYSIS_THREE_CATEGORY_UI_V1 */
.analysis-mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analysis-mode-button.analysis-mode-placeholder:disabled {
  opacity: 0.42;
  cursor: default;
  background: #f5f5f5;
  color: #777777;
}


/* URBANSCAN_BUILDING_PROFILE_UI_FIX_V1_0_1 */
.analysis-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analysis-mode-button.analysis-mode-placeholder:disabled {
  opacity: 0.42;
  cursor: default;
  background: #f5f5f5;
  color: #777777;
}

/* URBANSCAN_BUILDING_GFA_BY_TYPE_V2 */
.building-profile-gfa-by-type-heading{margin-top:14px}
.building-profile-gfa-type-list{display:grid;gap:7px;margin-bottom:12px}
.building-profile-gfa-type-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 48px;gap:8px;align-items:center}
.building-profile-gfa-type-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#333}
.building-profile-gfa-type-value{text-align:right;font-size:10px;font-variant-numeric:tabular-nums;color:#444}
.building-profile-gfa-type-percent{text-align:right;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:#222}
.building-profile-gfa-method-note{margin-top:2px;margin-bottom:0}


/* =====================================================
   URBANSCAN GHSL RESIDENT POPULATION WEB V1
   Additive only: Building Profile and Urban Form styles unchanged.
   ===================================================== */
.population-analysis-results { padding-bottom: 18px; }
.population-metric-note { margin-top: 5px; color: #8c8c8c; font-size: 10px; line-height: 1.25; }
.population-gradient-bar {
  height: 16px; margin-top: 12px; border-radius: 999px;
  background: linear-gradient(90deg,#f3f8f6 0%,#cde9df 25%,#8fd0bc 50%,#4aa58a 72%,#18735d 88%,#074637 100%);
}
.population-gradient-labels { display:flex; justify-content:space-between; gap:12px; margin-top:7px; color:#747474; font-size:11px; }
.population-grid-meta { margin-top:10px; color:#7d7d7d; font-size:11px; line-height:1.45; }
.population-analysis-meta { margin-top:16px; }
.population-download-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.population-history-chart {
  width:100%; min-height:210px; margin-top:12px; padding:8px 0 2px;
  border-top:1px solid #ededed; border-bottom:1px solid #ededed;
  overflow:hidden;
}
.population-history-chart svg { display:block; width:100%; height:200px; overflow:visible; }
.population-history-grid { stroke:#e9e9e9; stroke-width:1; vector-effect:non-scaling-stroke; }
.population-history-axis { stroke:#bdbdbd; stroke-width:1; vector-effect:non-scaling-stroke; }
.population-history-line-estimate { fill:none; stroke:#2b6f60; stroke-width:2.2; vector-effect:non-scaling-stroke; }
.population-history-line-projection { fill:none; stroke:#2b6f60; stroke-width:2.2; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
.population-history-point { fill:#fff; stroke:#2b6f60; stroke-width:1.7; vector-effect:non-scaling-stroke; }
.population-history-point.standard { fill:#2b6f60; }
.population-history-standard-line { stroke:#7d7d7d; stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.population-history-label { fill:#777; font-size:9px; font-family:Arial,sans-serif; }
.population-history-value { fill:#535353; font-size:9px; font-family:Arial,sans-serif; }
.population-history-standard-label { fill:#333; font-size:9px; font-weight:700; font-family:Arial,sans-serif; }
.population-history-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:9px; color:#777; font-size:10px; line-height:1.35; }
.population-history-legend span { display:inline-flex; align-items:center; gap:6px; }
.population-history-key { width:18px; height:0; border-top:2px solid #2b6f60; display:inline-block; }
.population-history-key.projection { border-top-style:dashed; }


/* =========================================================
   UrbanScan Population + Estimated Occupancy Web v1
   ========================================================= */

.population-view-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 12px;
}

.population-view-button {
  min-height: 31px;
  border: 1px solid #d7d7d7;
  border-radius: 6px;
  background: #f8f8f8;
  color: #666;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.population-view-button:hover {
  background: #f1f1f1;
}

.population-view-button.active {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}

.estimated-occupancy-metric-grid {
  margin-top: 10px;
}

.estimated-occupancy-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  background: #fafafa;
  color: #747474;
  font-size: 10px;
}

.estimated-occupancy-secondary strong {
  color: #333;
  font-weight: 700;
}

.estimated-category-heading {
  margin-top: 17px;
}

.estimated-occupancy-category-list {
  margin-top: 7px;
  border-top: 1px solid #ececec;
}

.estimated-occupancy-category-row {
  display: grid;
  grid-template-columns: minmax(105px, 1.25fr) minmax(72px, 0.8fr) minmax(68px, 0.75fr);
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #eeeeee;
  font-size: 10px;
}

.estimated-occupancy-category-name {
  min-width: 0;
}

.estimated-occupancy-category-name strong {
  display: block;
  color: #333;
  font-size: 11px;
  font-weight: 700;
}

.estimated-occupancy-category-name span,
.estimated-occupancy-category-factor span {
  display: block;
  margin-top: 2px;
  color: #8a8a8a;
  line-height: 1.25;
}

.estimated-occupancy-category-factor {
  text-align: right;
  color: #555;
}

.estimated-occupancy-category-people {
  text-align: right;
  color: #222;
  font-size: 12px;
  font-weight: 700;
}

.estimated-ghsl-comparison {
  margin-top: 12px;
  padding: 10px 11px;
  border-left: 3px solid #8bb8ad;
  background: #f5f9f8;
  color: #666;
  font-size: 10px;
  line-height: 1.55;
}

.estimated-occupancy-meta {
  margin-top: 12px;
}

.population-download-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* =========================================================
   UrbanScan Estimated Occupancy Time Views v2
   Six explicit weekday/weekend map scenarios.
   ========================================================= */
.estimated-main-heading { margin-top: 4px; }
.estimated-time-heading {
  margin-top: 12px;
  margin-bottom: 7px;
  color: #777;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.estimated-time-switch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.estimated-time-button {
  min-height: 45px;
  padding: 6px 4px;
  border: 1px solid #d7d7d7;
  border-radius: 7px;
  background: #f8f8f8;
  color: #6d6d6d;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.035em;
  cursor: pointer;
}
.estimated-time-button:hover { background: #f1f1f1; }
.estimated-time-button.active {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}
.estimated-selected-summary {
  margin-top: 10px;
  padding: 12px 13px;
  border: 1px solid #d9e5e1;
  border-radius: 8px;
  background: #f7faf9;
}
.estimated-selected-summary .analysis-metric-value {
  margin-top: 3px;
  font-size: 24px;
}
.estimated-map-legend { margin-top: 11px; }
.estimated-gradient-bar {
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg,#f3f8f6 0%,#d8eee7 25%,#a9d9ca 50%,#6fbea8 72%,#2f8d73 88%,#074637 100%);
}
.estimated-category-heading { margin-top: 18px; }
.estimated-occupancy-category-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
.estimated-occupancy-category-people {
  min-width: 78px;
  font-size: 13px;
}
@media (max-width: 460px) {
  .estimated-time-switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* URBANSCAN_DEVELOPMENT_INTENSITY_V1 */
.development-intensity-summary {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e5e5e5;
}
.development-intensity-summary[hidden],
.development-intensity-grid-legend[hidden] {
  display: none !important;
}
.development-intensity-title {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6f6f6f;
}
.development-intensity-note {
  margin-bottom: 11px;
  font-size: 11px;
  line-height: 1.35;
  color: #999;
}
.development-intensity-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.development-intensity-card {
  min-width: 0;
  padding: 12px 12px 10px;
  border: 1px solid #e1e1e1;
  border-radius: 9px;
  background: #fff;
}
.development-intensity-card-label {
  margin-bottom: 7px;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  color: #888;
}
.development-intensity-card-value {
  font-size: 23px;
  line-height: 1.05;
  font-weight: 700;
  color: #111;
}
.development-intensity-card-unit {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.25;
  color: #999;
}
.development-intensity-grid-legend {
  position: relative;
  margin: 2px 0 20px;
  padding: 14px 14px 13px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fafafa;
}
.development-intensity-spatial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}
.development-intensity-spatial-heading {
  min-width: 0;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5f5f5f;
}
.development-intensity-copy-button {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.development-intensity-copy-button::before,
.development-intensity-copy-button::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1.5px solid #666;
  border-radius: 3px;
  box-sizing: border-box;
}
.development-intensity-copy-button::before {
  left: 5px;
  top: 7px;
}
.development-intensity-copy-button::after {
  left: 9px;
  top: 3px;
  background: #fafafa;
}
.development-intensity-copy-button:hover::before,
.development-intensity-copy-button:hover::after {
  border-color: #111;
}
.development-intensity-resolution-switch {
  display: flex;
  align-items: center;
  gap: 23px;
  min-height: 22px;
  margin-bottom: 9px;
}
.development-intensity-resolution-switch button {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 650;
  color: #777;
  cursor: pointer;
}
.development-intensity-resolution-switch button:hover:not(:disabled) {
  color: #111;
}
.development-intensity-resolution-switch button.active {
  color: #111;
}
.development-intensity-resolution-switch button.active::before { content: '['; margin-right: 3px; }
.development-intensity-resolution-switch button.active::after { content: ']'; margin-left: 3px; }
.development-intensity-resolution-switch button:disabled {
  cursor: wait;
  opacity: 0.42;
}
.development-intensity-grid-title {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #555;
}
.development-intensity-grid-note {
  margin-bottom: 14px;
}
.development-intensity-gradient {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg,
    #fff4e6 0%,
    #ffe0b8 12%,
    #ffc982 24%,
    #f5a64f 38%,
    #e57b2e 55%,
    #c74f16 74%,
    #7f2704 100%);
}
.development-intensity-gradient-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-top: 6px;
  font-size: 10px;
  color: #858585;
}
.development-intensity-gradient-labels span { text-align: center; }
.development-intensity-gradient-labels span:first-child { text-align: left; }
.development-intensity-gradient-labels span:last-child { text-align: right; }
.development-intensity-type-title {
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid #ececec;
}
.development-intensity-type-list {
  margin-top: 3px;
}
.development-intensity-type-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #ededed;
}
.development-intensity-type-name {
  min-width: 0;
  font-size: 12px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.development-intensity-type-value {
  font-size: 12px;
  font-weight: 650;
  color: #222;
  font-variant-numeric: tabular-nums;
}
.development-intensity-method-note {
  margin-top: 13px;
  font-size: 10px;
  line-height: 1.45;
  color: #969696;
}


/* =========================================================
   Urban Form Height dynamic summary — v1.2
   ========================================================= */
.height-statistics-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.height-statistics-card {
  min-width: 0;
  padding: 9px 8px 8px;
  border: 1px solid #e2e2e2;
  border-radius: 7px;
  background: #ffffff;
}
.height-statistics-label {
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.55px;
  color: #777777;
}
.height-statistics-value {
  margin-top: 3px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.05;
  color: #222222;
}
.height-statistics-unit {
  margin-top: 3px;
  font-size: 7.5px;
  line-height: 1.25;
  color: #8b8b8b;
}
@media (max-width: 520px) {
  .height-statistics-grid { gap: 5px; }
  .height-statistics-card { padding: 8px 6px 7px; }
  .height-statistics-value { font-size: 14px; }
}

/* UrbanScan UI Interaction Fix v1.5 */


/* =========================================================
   UrbanScan WEB v1.9 — Analyze-time Manual Sources switch
   ========================================================= */
.manual-source-analysis-control {
  margin-top: 9px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.manual-source-analysis-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.manual-source-analysis-label {
  color: #333333;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.manual-source-analysis-note {
  color: #999999;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}

.manual-source-analysis-switch {
  margin-left: auto;
}


/* v2.0.1 export + source cleanup */
.analysis-meta {
  display: none !important;
}


/* =========================================================
   UrbanScan v2.0.7 — ownership / attribution watermark
   Owner: Shitong Yu · © 2026 · All rights reserved.
   Project fingerprint: URBANSCAN-STY-2026-645B48C0FD6FD66C
   ========================================================= */
.urbanscan-ownership-watermark {
  position: fixed;
  right: 14px;
  bottom: 10px;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(25, 25, 25, 0.62);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  backdrop-filter: blur(2px);
}

.urbanscan-ownership-watermark-separator {
  opacity: 0.55;
}

/* =========================================================
   UrbanScan v2.0.9 — 100 m / 4 × 4 symbolic grid legends
   Six discrete glyph classes; no colour gradients.
   ========================================================= */
.grid-glyph-legend {
  --grid-glyph-color: #555;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
  margin-top: 11px;
}

.grid-glyph-legend-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.grid-glyph-key {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.grid-glyph-ring,
.grid-glyph-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  pointer-events: none;
}

.grid-glyph-ring {
  display: none;
  border: 1.35px solid var(--grid-glyph-color);
  border-radius: 50%;
  background: transparent;
}

.grid-glyph-ring-large {
  width: 15px;
  height: 15px;
}

.grid-glyph-ring-small {
  width: 9px;
  height: 9px;
}

.grid-glyph-dot {
  display: none;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--grid-glyph-color);
}

.grid-glyph-class-1 .grid-glyph-ring-small,
.grid-glyph-class-3 .grid-glyph-ring-small,
.grid-glyph-class-4 .grid-glyph-ring-small,
.grid-glyph-class-6 .grid-glyph-ring-small {
  display: block;
}

.grid-glyph-class-2 .grid-glyph-ring-large,
.grid-glyph-class-4 .grid-glyph-ring-large,
.grid-glyph-class-5 .grid-glyph-ring-large,
.grid-glyph-class-6 .grid-glyph-ring-large {
  display: block;
}

.grid-glyph-class-0 .grid-glyph-dot,
.grid-glyph-class-3 .grid-glyph-dot,
.grid-glyph-class-5 .grid-glyph-dot,
.grid-glyph-class-6 .grid-glyph-dot {
  display: block;
}

.grid-glyph-legend-label {
  min-width: 0;
  color: #6e6e6e;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}

.grid-glyph-legend-note {
  margin-top: 10px;
  color: #999;
  font-size: 9px;
  line-height: 1.35;
}

.population-glyph-legend {
  --grid-glyph-color: #2F8D73;
}

#developmentIntensityGlyphLegend {
  --grid-glyph-color: #D95F02;
}

@media (max-width: 1200px) {
  .grid-glyph-legend {
    grid-template-columns: 1fr;
  }
}