/* The contact page (module S2). Every rule starts with a class that begins with "contact-" (design document 7.2).
   The shared classes are U2's, in style.css; a rule here only places them on this page. Sources: the two boards. */
.contact-page { display: flex; flex-direction: column; gap: 20px; } /* Dashboard-Contact:78 */
.contact-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Dashboard-Contact:149 */
.contact-timeline .card-head { padding: 14px 24px; } /* Dashboard-Contact:147 */
.contact-people .list-row-note, .contact-events .list-row-note { font-size: 13px; } /* Dashboard-Contact:285, :299 */
.contact-events .list-row { flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 12px 20px; } /* Dashboard-Contact:297 */
.contact-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* Member-Contact:40 */
.contact-missing { margin: 0; font-size: 14px; color: #566579; } /* design-system.md 9.2, an empty list */

/* The phone layout: below 872px (design document 7.8). */
@media (max-width: 871.98px) {
  .contact-page { gap: 16px; } /* Member-Contact:25 */
  .contact-head .head-card { gap: 14px; padding: 16px; border-radius: 14px; } /* Member-Contact:26 */
  .contact-head .head-card-top { flex-wrap: nowrap; align-items: flex-start; gap: 12px; } /* Member-Contact:27, one row */
  .contact-head .head-card-text { flex: 1 1 0; } /* Member-Contact:29 */
  .contact-head .head-card-actions { flex: none; } /* Member-Contact:33 */
  .contact-head .detail-sub { font-size: 14px; color: #132a43; } /* Member-Contact:31 */
  .contact-head .fact-value { font-size: 14px; } /* Member-Contact:46 */
  .contact-page .next-step input { width: 22px; height: 22px; } /* Member-Contact:67 */
  .contact-page .tile-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* Member-Contact:57: the tiles fill the row, three while Voice memo is absent (decision 18) */
  .contact-people .list-row-note { font-size: 12px; } /* Member-Contact:78 */
  .contact-filter button { padding: 0 4px; font-size: 13px; } /* Member-Contact:90 */
}