/* MyVillage — membership, account, and collection pages.
   Builds on ../styles.css (palette, type, buttons, header, footer).
   Audience rule: big tap targets (48px+), readable type, plain language,
   one choice at a time. */

.members-main { padding-top: 2rem; padding-bottom: 3rem; }
.members-main .doc { max-width: 52rem; }

/* ---------- Cards & panels ---------- */
.panel {
  background: var(--card-bg);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin: 1.4rem 0;
}
.panel-gold { border-color: var(--gold); }
.panel h2 { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }

.notice {
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  font-weight: 600;
}
.notice-good { background: #e7f2e4; border: 2px solid var(--pine); color: var(--pine-dark); }
.notice-warn { background: #fbf0d9; border: 2px solid var(--gold); color: var(--ink); }
.notice-error { background: #f9e3de; border: 2px solid var(--brick); color: var(--brick); }

/* ---------- Forms ---------- */
.big-form label {
  display: block; font-weight: 700; color: var(--pine-dark);
  margin-bottom: 0.35rem;
}
.big-form input {
  width: 100%; min-height: 56px; padding: 0.6rem 0.8rem;
  font-size: 1.05rem; font-family: inherit; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: 10px;
  margin-bottom: 1rem;
}
.big-form input:focus {
  outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--pine);
}
.big-form .btn { width: 100%; border: none; cursor: pointer; font-family: inherit; }
.btn[disabled] { opacity: 0.65; cursor: default; }
button.btn { border: none; cursor: pointer; font-family: inherit; }
.btn-brick { background: var(--brick); color: #fff; }
.btn-brick:hover { background: var(--pine-dark); color: #fff; }
.btn-quiet {
  background: transparent; color: var(--brick); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Founding Member badge ---------- */
.founder-badge {
  display: inline-block; background: var(--gold); color: var(--pine-dark);
  font-family: "Fraunces", Georgia, serif; font-weight: 900; font-size: 1.05rem;
  border: 2px solid var(--pine-dark); border-radius: 999px;
  padding: 0.45rem 1.1rem; margin-bottom: 1.1rem;
}

/* ---------- Welcome page family portrait ---------- */
.family-photo {
  max-width: 420px; width: 100%; height: auto;
  border-radius: var(--radius); border: 2px solid var(--gold);
  margin-bottom: 0.8rem;
}

/* ---------- Account facts ---------- */
.fact-list { margin: 0 0 1.2rem; }
.fact-list div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0.4rem 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line);
}
.fact-list dt { font-weight: 700; color: var(--pine-dark); }
.fact-list dd { margin: 0; }
@media (max-width: 560px) {
  .fact-list div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Membership tiers ---------- */
.tier-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin: 1.6rem 0;
}
.tier-card {
  background: var(--card-bg); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem;
  display: flex; flex-direction: column;
}
.tier-card.featured { border-color: var(--gold); border-width: 3px; }
.tier-card h3 { font-size: 1.45rem; margin-bottom: 0.2rem; }
.tier-price {
  font-family: "Fraunces", Georgia, serif; font-weight: 900;
  font-size: 1.7rem; color: var(--pine); margin: 0.2rem 0;
}
.tier-price .per { font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.tier-alt { font-weight: 700; color: var(--brick); margin: 0 0 0.6rem; }
.tier-card ul { padding-left: 1.25rem; margin: 0 0 1.2rem; }
.tier-card li { margin-bottom: 0.5rem; }
.tier-card .spacer { flex: 1 1 auto; }
.tier-card .btn { width: 100%; }
.tier-now {
  display: inline-block; background: var(--pine); color: #fff; font-weight: 700;
  border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.9rem; margin-bottom: 0.6rem;
}
.checkout-closed {
  background: var(--cream); border: 2px dashed var(--gold);
  border-radius: 12px; padding: 0.9rem 1rem; text-align: center;
  font-weight: 600; margin-bottom: 0.8rem;
}
.checkout-closed strong { color: var(--pine-dark); display: block; font-size: 1.05rem; }
@media (max-width: 860px) {
  .tier-grid { grid-template-columns: 1fr; }
}

/* ---------- Collection page ---------- */
.collection-summary { font-size: 1.1rem; }
.collection-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem;
}
@media (max-width: 860px) { .collection-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .collection-grid { grid-template-columns: 1fr; } }
.collection-card .card-body .btn { margin-top: 0.6rem; }
.remove-btn { min-height: 48px; width: 100%; }
.remove-btn.armed { background: var(--brick); color: #fff; text-decoration: none; border-radius: 10px; }