/* Booklet contacts (Nov 2026): the public /booklet-contacts page and the dashboard card.
   Every rule is .bkc- prefixed. tokens.css adds margin-top to "li + li", so every list laid
   out as a grid resets it, or later items sit lower. */

.bkc-search { margin: var(--space-5) 0 var(--space-4); max-width: 28rem; }
.bkc-search .input { width: 100%; }
.bkc-search__none { margin-top: var(--space-2); }

.bkc-state { font-size: var(--step-1); margin: var(--space-6) 0 var(--space-3); }

.bkc-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.bkc-grid > li, .bkc-people > li { margin-top: 0; }

.bkc-district { padding: var(--space-4); }
.bkc-district__name { font-size: var(--step-1); margin: 0; }
.bkc-district__sub { margin: 2px 0 0; font-size: var(--step--1); }

.bkc-people { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }

.bkc-person {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--line, rgba(0,0,0,.08));
}
.bkc-people > .bkc-person:first-child { padding-top: 0; border-top: 0; }
.bkc-person__who { display: flex; flex-direction: column; min-width: 0; }
.bkc-person__name { font-weight: 600; overflow-wrap: anywhere; }
.bkc-person__tag { align-self: flex-start; margin-top: 2px; }
.bkc-person__number { color: var(--ink-muted); font-size: var(--step--1); white-space: nowrap; }
.bkc-person__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.bkc-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.bkc-btn svg { width: 16px; height: 16px; }

.bkc-help { margin-top: var(--space-6); }

/* Dashboard card */
.bkc-card__title { margin: 0; font-size: var(--step-1); }
.bkc-card__lede { margin: var(--space-2) 0 0; }
.bkc-card__more { margin: var(--space-4) 0 0; }