feat: improve feature modal navigation

styles.css

@@ -406,6 +406,75 @@ button:disabled {
   font-weight: 700;
 }
 
+.feature-inhabited {
+  margin: 14px 0 0;
+  color: #c62828;
+  font-weight: 700;
+}
+
+.feature-navigation,
+.feature-association {
+  width: 100%;
+  margin-top: 16px;
+}
+
+.feature-associations {
+  margin-top: 20px;
+  border-top: 1px solid var(--panel-border);
+  padding-top: 14px;
+}
+
+.feature-associations h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.feature-associations ul {
+  display: grid;
+  gap: 10px;
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.feature-association {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 4px 12px;
+  margin: 0;
+  padding: 12px 0;
+  border: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--panel-border);
+  background: transparent;
+  color: var(--ink);
+  box-shadow: none;
+  text-align: left;
+}
+
+.feature-association:hover,
+.feature-association:focus-visible {
+  background: rgba(31, 122, 98, 0.08);
+}
+
+.feature-association-label {
+  font-weight: 700;
+}
+
+.feature-association-area {
+  color: var(--muted);
+  font-size: 0.9rem;
+  white-space: nowrap;
+}
+
+.feature-association-inhabited {
+  grid-column: 1 / -1;
+  color: #c62828;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
 .map-wrap .ol-zoom {
   top: 16px;
   right: 16px;