/* layout.css — page scaffolding. Patient pages are a single vertical column
   capped at a phone-width container (§54.10, 375px primary). */
.home, .page {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-8);
}

.home-head { padding: var(--space-2) 0 var(--space-4); }
.home-head h1 { font-size: var(--font-size-6); }

.page-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-4);
}
/* 44px touch target for the back link (the primary nav control on every page). */
.page-head .back {
  font-size: var(--font-size-4);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
}

.metric-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-grid);
}
.metric-row:last-child { border-bottom: 0; }
.metric-row strong { font-size: var(--font-size-5); }

.bottom-nav {
  display: flex; justify-content: space-around;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-grid);
}
.bottom-nav a {
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  flex: 1;
  text-align: center;
}

/* Clinician desktop layout (§54.7 left-main + right-column, not card mosaic). */
.clinic-shell { max-width: 1100px; margin: 0 auto; padding: var(--space-5); }
.clinic-detail { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5); }
@media (max-width: 768px) {
  .clinic-detail { grid-template-columns: 1fr; }
}