/* Families tab (#/families, #/families/<id>). Look C · Studio Line: reuses
   the tokens and parts in studio.css (card, avatar, chip, btn, seg, sheet,
   filters, .leads list); only the family rows and the family page are new. */

/* ---------- the list ---------- */
.fam { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 2fr) 120px 150px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 2px dotted var(--line); }
.fam.no-money { grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 2fr) 150px; }
.fam:last-child { border-bottom: 0; }
.fam .name { display: block; font-weight: 800; font-size: 15px; color: var(--ink); text-decoration: none; }
.fam .name:hover { text-decoration: underline; }
.fam .name span { font-weight: 600; font-size: 13px; color: var(--ink3); }
.fam .note { font-size: 13px; color: var(--ink2); margin-top: 2px; }
.fam .mems { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fam .mem { font-size: 14px; }
.fam .mem .pk { font-size: 12px; color: var(--ink2); }
.fam .bal { font-size: 14px; font-weight: 700; text-align: right; }
.fam .acts { display: flex; gap: 8px; justify-content: flex-end; }
.fam-due { color: var(--warn); font-weight: 800; }
.fam-on { background: var(--mint); color: var(--teal-dd); }
.fam-paused { background: var(--note-bg); color: var(--note); }
.fam-no { background: var(--warn-bg); color: var(--warn); }
.fam-renew { background: var(--note-bg); color: var(--note); }
.fam-warn { color: var(--warn); font-weight: 800; }

/* ---------- one family ---------- */
.fam-back { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; margin: -6px 0 6px -6px; font-weight: 800; text-decoration: none; }
.fam-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.fam-members, .fam-sidecol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fam-card { padding: 18px 20px 12px; }
.fam-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }
.fam-card-head h2 { margin: 0; font-size: 22px; }
.fact { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 2px dotted var(--line); flex-wrap: wrap; }
.fact .k, .fact-block .k { width: 150px; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--ink2); }
.fact .v { flex: 1; min-width: 0; font-size: 14px; }
.fact-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fact-block { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 2px dotted var(--line); }
.fact-block > .btn { align-self: flex-start; }
.fam-contact { display: flex; align-items: center; gap: 10px; }
.fam-contact b { font-weight: 800; }
.fam-med { white-space: pre-wrap; font-weight: 700; color: var(--warn); }
.fam-side { padding: 20px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.fam-side h2 { margin: 0; font-size: 22px; }
.fam-balance { font-size: 15px; font-weight: 700; color: var(--ink2); }
.fam-balance .d { font-size: 30px; }
.fam-sale { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 2px dotted var(--line); }
.fam-pay { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.fam-check { flex-direction: row !important; align-items: center; gap: 10px !important; font-weight: 600; }
.fam-check input { width: 20px; height: 20px; accent-color: var(--teal); }

@media (max-width: 1180px) {
  .fam { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.4fr) 110px; }
  .fam.no-money { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.4fr); }
  .fam .acts { grid-column: 2 / -1; justify-content: flex-start; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .fam, .fam.no-money { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 12px; padding: 14px 0; }
  .fam > :nth-child(n+3) { grid-column: 2; }
  .fam .bal { text-align: left; }
  .fam .acts { justify-content: flex-start; }
  .fam-detail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fam-card { padding: 16px 14px 10px; }
  .fact .k, .fact-block .k { width: 100%; }
  .h1row .right { margin-left: 0; }
}

/* ---------- consent forms: photo of the signed paper, Drive link ---------- */
.fam-photo { position: relative; cursor: pointer; }
.fam-photo:focus-within { outline: 3px solid var(--teal); outline-offset: 2px; }
.fam-form-img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; border: 2px solid var(--line); border-radius: 12px; background: #fff; -webkit-touch-callout: none; user-select: none; }