/* ── Account Page ──────────────────────────────────── */

.account-section {
  margin-bottom: var(--sp-32);
}

.account-section-title {
  font-family: var(--font-serif);
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--c-black);
  margin-bottom: var(--sp-16);
}

/* ── Profile ── */
.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.profile-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.profile-label {
  font-family: var(--font-sans);
  font-size: var(--text-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.profile-value {
  font-family: var(--font-sans);
  font-size: var(--text-16);
  color: var(--c-black);
}

/* ── Pins list (uses pins.css classes) ── */
/* Remove top border on first item and bottom border on last — the section
   title and page-divider already provide visual separation. */
.account-section .pin-item:first-child { border-top: none; }
.account-section .pin-item:last-child { border-bottom: none; }
/* Remove the extra margin/gap from the pins-count element */
.account-section .pins-count { margin-bottom: 0; }

/* ── Calendar placeholder ── */
.calendar-placeholder {
  padding: var(--sp-20) var(--sp-16);
  border: 1.5px dashed var(--c-border);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--c-muted);
  font-size: var(--text-14);
}

/* ── Danger zone ── */
.danger-zone {
  margin-top: var(--sp-48);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--c-border);
}

.danger-zone-title {
  font-family: var(--font-sans);
  font-size: var(--text-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-12);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-20);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  font-weight: 500;
  color: #c0392b;
  background: none;
  border: 1.4px solid #c0392b;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-danger:hover {
  background: #c0392b;
  color: var(--c-white);
}

/* ── Sign-out button ── */
.btn-signout {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-20);
  font-family: var(--font-sans);
  font-size: var(--text-13);
  font-weight: 500;
  color: var(--c-black);
  background: none;
  border: 1.4px solid var(--c-black);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-signout:hover {
  background: var(--c-black);
  color: var(--c-white);
}