/* Layout overrides on top of Basecoat. Components come from vendor/basecoat.min.css. */
.page { max-width: 920px; margin: 0 auto; padding: 2rem 1rem 4rem; display: grid; gap: 1rem; }
.page-header h1 { margin-bottom: 0.25rem; }
.muted { color: var(--muted-foreground, #6b7280); }

.controls-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.control { display: flex; align-items: center; gap: 0.5rem; }
.control-buttons { display: flex; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
#search { max-width: 220px; }

#progress-wrap { display: flex; align-items: center; gap: 0.75rem; }

.pair-card { margin-bottom: 0.75rem; }
.pair-card > header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pair-actions { margin-left: auto; display: flex; gap: 0.5rem; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.person dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; font-size: 0.9rem; }
.person dt { color: var(--muted-foreground, #6b7280); }
.person dd { margin: 0; overflow-wrap: anywhere; }
.person .btn-sm-outline { margin-top: 0.7rem; text-decoration: none; }
.signals { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pair-card.decided { opacity: 0.55; }
@media (max-width: 640px) { .pair-grid { grid-template-columns: 1fr; } }

#connect-card { display: grid; gap: 0.75rem; justify-items: start; }
#connect-card p { margin: 0; max-width: 60ch; }
#sync-bar .controls-grid { align-items: center; }
#sync-status { margin-left: auto; }