/* ============================================================
   Members: contact directory, profile form, manage family
   ============================================================ */

.notice-banner {
  background: #eaf5ea; border: 1px solid #bfe0bf; color: #2f6a2f;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  margin-bottom: var(--space-6); font-weight: 600;
}

/* --- Forms ---------------------------------------------------- */
.member-self {
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-line);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-section);
}
.member-self h2 { font-size: var(--text-lg); margin: 0 0 var(--space-4); }

.member-form__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.member-form .field { display: grid; gap: 0.35rem; }
.member-form .field span {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted); font-weight: 700;
}
.member-form input, .member-form select {
  font: inherit; width: 100%; color: var(--color-text); background: #fff;
  border: 1.5px solid var(--color-surface-line); border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.member-form input:focus-visible, .member-form select:focus-visible {
  outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201,162,74,0.22);
}
.member-form__consent {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-surface-line);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--color-text);
}
.member-form__consent input { margin-top: 3px; }

/* --- Contact directory --------------------------------------- */
.member-contacts { margin-bottom: var(--space-section); }
.member-contacts h2 { font-size: var(--text-lg); margin: 0 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.member-count {
  font-size: var(--text-sm); background: var(--color-gold-soft); color: var(--color-navy-deep);
  border-radius: 999px; padding: 1px 10px; font-weight: 700;
}

.contact-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4);
}
.contact-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-surface-line);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius); padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.contact-card__name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-1); }
.contact-card__parents { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.contact-card__line { margin: 2px 0; font-size: var(--text-sm); }
.contact-card__line a { color: var(--color-navy); text-decoration: none; border-bottom: 1px solid var(--color-gold-soft); }
.contact-card__line a:hover { border-color: var(--color-gold); }
.contact-card__meta { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: var(--space-2); }
.tag-admin {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--color-navy); color: #fff; border-radius: 999px; padding: 1px 7px; vertical-align: middle;
}