Merge remote-tracking branch 'origin/main'

# Conflicts:
#	AGENTS.md
#	README.md
#	index.html
#	package.json
#	src/data/buildings.js
#	src/data/grid.js
#	src/data/pavement.js
#	src/data/plants.js
#	src/data/yard.js
#	src/lib/feature-types.js
#	src/lib/yard-features.js
#	src/main.js
#	styles.css

styles.css

@@ -27,6 +27,7 @@ body {
 
 body {
   min-height: 100vh;
+  min-height: 100svh;
 }
 
 .app-shell {
@@ -66,25 +67,25 @@ h1 {
   line-height: 1.5;
 }
 
-.legend {
-  display: grid;
-  gap: 0.65rem;
-  margin: 1.5rem 0;
+.visibility-panel {
+  margin-top: 1.5rem;
 }
 
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 0.95rem;
+.visibility-panel h2 {
+  margin: 0 0 0.65rem;
+  color: var(--ink);
+  font-size: 1rem;
 }
 
-.legend-swatch {
-  width: 0.9rem;
-  height: 0.9rem;
-  border-radius: 999px;
-  flex: none;
-  border: 1px solid rgba(0, 0, 0, 0.12);
+#visibility-tree {
+  --checkbox-tree-indent: 16px;
+  --checkbox-tree-hover-color: var(--accent);
+  max-height: min(45vh, 28rem);
+  overflow: auto;
+  padding: 0.65rem;
+  border: 1px solid var(--panel-border);
+  border-radius: 12px;
+  background: rgba(255, 253, 246, 0.62);
 }
 
 .notes h2 {
@@ -108,15 +109,19 @@ code {
 
 main,
 .map-frame {
+  display: flex;
   min-width: 0;
 }
 
 .map-frame {
   position: relative;
+  flex: 1;
 }
 
 #map {
+  flex: 1;
   min-height: calc(100vh - 2rem);
+  min-height: calc(100svh - 2rem);
   border-radius: 28px;
   overflow: hidden;
   box-shadow: var(--shadow);
@@ -147,6 +152,33 @@ main,
   display: none;
 }
 
+.measurement-table-block {
+  margin-top: 0.35rem;
+}
+
+.measurement-table {
+  width: 100%;
+  margin-top: 0.15rem;
+  border-collapse: collapse;
+  font-size: 0.92em;
+}
+
+.measurement-table th,
+.measurement-table td {
+  padding: 0.12rem 0.35rem 0.12rem 0;
+  border-bottom: 1px solid rgba(87, 68, 38, 0.18);
+  text-align: left;
+  white-space: nowrap;
+}
+
+.measurement-table th {
+  font-weight: 700;
+}
+
+.measurement-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
 .timeline-control {
   display: grid;
   gap: 0.45rem;
@@ -255,11 +287,102 @@ main,
 }
 
 @media (max-width: 900px) {
+  body {
+    min-height: auto;
+  }
+
   .app-shell {
     grid-template-columns: 1fr;
+    gap: 0.75rem;
+    min-height: auto;
+    padding: 0.75rem;
+    padding:
+      max(0.75rem, env(safe-area-inset-top))
+      max(0.75rem, env(safe-area-inset-right))
+      max(0.75rem, env(safe-area-inset-bottom))
+      max(0.75rem, env(safe-area-inset-left));
+  }
+
+  main {
+    order: -1;
+    min-height: min(72svh, 46rem);
+  }
+
+  .panel {
+    padding: 1rem;
+    border-radius: 12px;
+    box-shadow: 0 12px 36px rgba(60, 44, 22, 0.14);
+  }
+
+  h1 {
+    margin-bottom: 0.65rem;
+    font-size: clamp(2rem, 12vw, 3rem);
+  }
+
+  .intro {
+    margin-bottom: 0;
   }
 
   #map {
-    min-height: 65vh;
+    min-height: min(72svh, 46rem);
+    border-radius: 12px;
+  }
+
+  .timeline-control {
+    width: min(18rem, calc(100vw - 2rem));
+    max-width: calc(100vw - 2rem);
+  }
+
+  .timeline-buttons {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .timeline-buttons button {
+    min-height: 2.65rem;
+    padding: 0.38rem 0.45rem;
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  .maplibregl-ctrl-top-left,
+  .maplibregl-ctrl-top-right {
+    top: 0.5rem;
+  }
+
+  .maplibregl-ctrl-top-right,
+  .maplibregl-ctrl-bottom-right {
+    right: 0.5rem;
+  }
+
+  .maplibregl-ctrl-bottom-left,
+  .maplibregl-ctrl-bottom-right {
+    bottom: 0.5rem;
+  }
+
+  .maplibregl-popup-content {
+    max-width: min(16rem, calc(100vw - 5rem));
+  }
+}
+
+@media (max-width: 520px) {
+  .app-shell {
+    padding: 0;
+  }
+
+  main,
+  #map {
+    min-height: 68svh;
+  }
+
+  #map {
+    border-radius: 0;
+  }
+
+  .panel {
+    margin: 0 0.75rem 0.75rem;
+  }
+
+  .timeline-control {
+    padding: 0.55rem;
   }
 }