.observation-split { display:flex; align-items:flex-start; }
.observation-split > ul, .observation-split > .observation-list-workspace { flex:1; min-width:0; }
.map-pane { flex:1; min-width:0; margin-left:16px; position:sticky; top:12px; }
.project-map { height:520px; }
.location-map { height:320px; margin:12px 0; }
.project-map,.location-map { background:#e9edf1; border:1px solid #d9dee5; border-radius:9px; z-index:0; }
.map-toolbar { display:flex; flex-wrap:wrap; margin-bottom:12px; }
.map-toolbar button,.location-controls button { margin:4px; width:auto; }
.observation-pin { background:#1f7ae0; border:3px solid white; border-radius:50%; box-shadow:0 1px 5px #333; color:white; text-align:center; font:bold 15px/22px Arial; }
.draft-pin { background:#b45309; }
.observation-card:focus { outline:3px solid #1f7ae0; }
@media (min-width:1000px) { .app-shell.project-shell { max-width:1400px; } }
@media (max-width:640px) {
 .observation-split { display:block; }
 .observation-split[data-view="map"] > ul, .observation-split[data-view="map"] > .observation-list-workspace { display:none; }
 .map-pane { margin:0; position:static; }
 .project-map { height:60vh; min-height:300px; }
}

.observation-map-popup { width:220px; max-width:100%; overflow-wrap:break-word; }
.observation-popup-card + .observation-popup-card { border-top:1px solid #cbd5e1; margin-top:10px; padding-top:10px; }
.observation-popup-card > strong { display:block; font-size:15px; margin-bottom:6px; }
.observation-popup-card p { margin:4px 0; }
.observation-popup-card button { min-height:44px; width:100%; margin-top:6px; }
.observation-popup-photo { position:relative; height:96px; background:#edf0f3; border-radius:6px; color:#64748b; text-align:center; line-height:96px; overflow:hidden; }
.observation-popup-photo img { position:absolute; top:0; left:0; width:100%; height:96px; object-fit:contain; background:#edf0f3; opacity:0; }
.observation-popup-photo img[data-preview-state="loaded"] { opacity:1; }