/* Today and Contacts (module S1). Only what design-system.md leaves without a class name, under names that
   begin with "contacts-" (7.2). Every value is copied from the board line named at the end of the rule. */

/* Both pages: one column of blocks inside #page. */
.contacts-page { min-width: 0; display: flex; flex-direction: column; gap: 20px; } /* Dashboard-Today:78 */
.contacts-page-phone { gap: 16px; } /* Member-Today:28 */
.contacts-page-phone .section { gap: 8px; } /* Member-Today:52 */

/* Today's event card, desktop. */
.contacts-today-count { font-size: 14px; color: #566579; } /* Dashboard-Today:99 */
.contacts-today-off { font-size: 13px; color: #566579; } /* not drawn: the muted text of Dashboard-Today:96 */

/* Today's event card, phone. */
.contacts-today-event-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* Member-Today:30 */
.contacts-today-event-link { min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 2px; color: #102c4a; text-decoration: none; } /* Member-Today:31 */
.contacts-today-event-title { font-size: 17px; font-weight: 700; } /* Member-Today:32 */
.contacts-today-event .btn-row .btn-primary { padding: 0 12px; } /* Member-Today:41 */

/* Today's next steps, desktop: the contact's name. The columns are U2's .cols-today. */
.contacts-today-step-cell { min-width: 0; font-weight: 600; overflow-wrap: anywhere; } /* Dashboard-Today:127: inherits 15px and wraps */
.contacts-today-contact { min-width: 0; font-size: 14px; font-weight: 600; color: #102c4a; text-decoration: none; } /* Dashboard-Today:155 */

/* Today's next steps, phone: one row, and the red "Overdue" heading. */
.contacts-today-step { min-height: 64px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 14px; } /* Member-Today:55 */
.contacts-today-tick { flex: none; min-height: 44px; display: flex; align-items: center; cursor: pointer; } /* Member-Today:56 */
.contacts-today-tick input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: #102c4a; } /* Member-Today:56 */
.contacts-today-step + .contacts-today-step { border-top: 1px solid #dce2e9; } /* Member-Today:89 */
.contacts-today-step-text { flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; color: inherit; text-decoration: none; } /* Member-Today:83 */
.contacts-today-late { color: #bd293d; } /* Member-Today:53 */

/* Contacts: the search field of the desktop, and the phone's filters above the card. */
.contacts-search { flex: 1 1 240px; max-width: 340px; } /* Dashboard-Contacts:88 */
.contacts-filters { display: flex; align-items: center; gap: 8px; } /* Member-Contacts:30 */
.contacts-filters .select { flex: 1 1 0; min-width: 0; } /* Member-Contacts:31 */
.contacts-filters .chips { flex: none; flex-wrap: nowrap; } /* Member-Contacts:38 */
.contacts-filters .chip { white-space: nowrap; } /* Member-Contacts:38 */
.contacts-page-phone .select.filter { height: 44px; font-size: 15px; } /* Member-Contacts:31 */
.contacts-rows > .list-row:first-child { border-top: 0; } /* Member-Contacts:40: the first row has no rule under the card's border */

/* New and Edit contact. */
.contacts-name { display: flex; flex-direction: column; gap: 6px; } /* Dashboard-New-Contact:26 */
.contacts-next { display: flex; flex-direction: column; gap: 8px; } /* Dashboard-New-Contact:64 */
.contacts-photo { display: flex; flex-direction: column; gap: 6px; } /* not drawn: the gap of a field, Dashboard-New-Contact:38 */
.contacts-details[hidden] { display: none; } /* "More details" closed: .field-cols would otherwise keep display: grid */
.contacts-wide { grid-column: 1 / -1; } /* Dashboard-New-Contact:93 */

/* The contact picker. */
.contacts-picker { display: flex; flex-direction: column; gap: 10px; } /* Contact-Picker:20 */
.contacts-picker .search { color: #102c4a; } /* Contact-Picker:21 */
.contacts-picker .search svg { left: 14px; } /* Contact-Picker:22 */
.contacts-picker .search .input { height: 48px; padding: 0 14px 0 40px; border: 2px solid #102c4a; } /* Contact-Picker:23 */
.contacts-picker .chip-removable { padding: 0 4px 0 12px; } /* Contact-Picker:26 */