.project-shell > .topbar { margin-bottom:12px; }
.project-shell > .topbar .brand-logo { height:52px; }
.project-header { display:flex; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.project-header h2 { margin:0 16px; flex:1; overflow-wrap:break-word; }
.project-tabs { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; border-bottom:2px solid var(--border); margin-bottom:16px; }
.project-tabs button { flex:0 0 auto; width:auto; min-height:44px; border-radius:8px 8px 0 0; background:transparent; color:var(--text); border-bottom:3px solid transparent; }
.project-tabs button[aria-selected="true"] { color:var(--primary-dark); border-color:var(--primary); background:#e8f1fc; }
.project-tabs button:focus { outline:2px solid var(--primary); outline-offset:-3px; }
.workspace-actions { display:flex; flex-wrap:wrap; margin-bottom:12px; }
.workspace-actions button { width:auto; margin:0 8px 8px 0; min-height:44px; }
#project-panel-map .map-pane { margin:0; position:static; }
#project-panel-map .project-map { height:calc(100vh - 250px); min-height:340px; }
#project-create-panel,#project-edit-host { max-width:900px; margin:0 auto 16px; }
#project-edit-host .app-shell { padding:0; max-width:none; }
#project-edit-host .topbar { display:none; }
.project-summary { display:flex; flex-wrap:wrap; }
.project-summary p { margin:8px 24px 8px 0; }
@media (max-width:640px) {
 .project-header h2 { flex:1 0 100%; margin:12px 0 0; }
 .project-tabs button { padding:11px 12px; }
 #project-panel-map .project-map { height:calc(100vh - 270px); min-height:300px; }
 .workspace-actions { flex-wrap:nowrap; overflow-x:auto; }
 .workspace-actions button { flex:0 0 auto; }
}

/* Compact, touch-friendly observation disclosure rows. No flex gap dependency. */
#observation-list .observation-card { padding:0; overflow:hidden; margin-bottom:8px; }
.observation-row { display:flex; align-items:center; padding:8px 10px; }
.observation-thumbnail { width:68px; height:54px; flex:0 0 68px; margin-right:12px; }
.observation-thumbnail-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:#edf0f3; color:var(--muted); border-radius:6px; font-size:12px; text-align:center; }
.observation-thumbnail-button.photo-trigger { display:block; width:100%; height:100%; padding:0; border-radius:6px; }
.observation-row-thumbnail { display:block; width:100%; height:100%; object-fit:cover; border-radius:6px; }
.observation-row-toggle { display:flex; flex:1; align-items:center; min-width:0; min-height:54px; padding:6px 8px; text-align:left; color:var(--text); background:transparent; font-weight:400; }
.observation-row-toggle:hover { background:#edf4fc; }
.observation-row-toggle:focus { outline:2px solid var(--primary); outline-offset:-2px; }
.observation-row-text { display:flex; flex:1; min-width:0; align-items:center; }
.observation-row-toggle strong { flex:2; min-width:0; overflow-wrap:break-word; }
.observation-row-location { flex:1; min-width:0; color:var(--muted); margin-left:16px; overflow-wrap:break-word; }
.observation-row-toggle strong, .observation-row-location { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.observation-details h3 { overflow-wrap:break-word; }
.observation-row-photo-count { flex:0 0 auto; color:var(--muted); margin-left:16px; font-size:13px; }
.observation-row-indicator { flex:0 0 18px; margin-left:12px; text-align:center; font-size:20px; }
.observation-details { padding:12px 16px 16px; border-top:1px solid var(--border); }
.observation-details > button { width:auto; margin:4px 8px 4px 0; }
.observation-details .photo-upload label { display:inline-block; padding:10px 8px; cursor:pointer; }
@media (max-width:900px) {
 .observation-row-text { flex-wrap:wrap; }
 .observation-row-toggle strong { flex:1 0 100%; order:0; }
 .observation-row-indicator { margin-left:8px; }
 .observation-row-location { flex:1 0 55%; order:2; margin:4px 8px 0 0; font-size:13px; }
 .observation-row-photo-count { order:3; margin:4px 0 0; font-size:12px; }
}
@media (max-width:640px) {
 .observation-row { min-width:0; padding:10px 8px; }
 .observation-thumbnail { width:68px; min-width:68px; max-width:68px; height:68px; flex:0 0 68px; margin-right:10px; }
 .observation-row-toggle { width:auto; flex:1 1 0%; min-width:0; min-height:0; padding:0; flex-wrap:nowrap; align-self:stretch; }
 .observation-row-text { display:block; flex:1 1 0%; min-width:0; }
 .observation-row-toggle strong, .observation-row-location {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  white-space:normal; word-break:normal; overflow-wrap:normal; overflow:hidden; text-overflow:clip;
  min-width:0; margin:0; max-height:36px; font-size:15px; line-height:18px;
 }
 .observation-row-location { margin-top:2px; max-height:32px; font-size:12px; line-height:16px; }
 .observation-row-photo-count { display:block; min-width:0; margin:2px 0 0; font-size:12px; line-height:15px; }
 .observation-row-indicator { flex:0 0 18px; width:18px; margin-left:8px; }
 .observation-details { padding:10px; }
}

/* Extra project-wide columns share the same shrinking text column on phones. */
.observation-row-column { flex:1; min-width:0; margin-left:16px; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.observation-row-open-label { flex:1; min-width:0; font-weight:600; }
@media (max-width:900px) {
 .observation-row-column { flex:1 0 55%; margin:4px 8px 0 0; }
}
@media (max-width:640px) {
 .observation-row-column { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:normal; word-break:normal; max-height:32px; margin:2px 0 0; font-size:12px; line-height:16px; }
 .observation-row-no-photos .observation-row-toggle { min-height:44px; }
}