/* Sign-up, sign-in, link screens and settings (templates/accounts/*).
   References: design/screens/sign-up.html, sign-in-phone.html, check-email-phone.html,
   verify-phone.html, link-expired-phone.html, settings.html. */

form { display: grid; gap: var(--wc-space-4); }

/* Sign up: form card and "What you get" panel */
.signup { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--wc-space-8); align-items: stretch; padding-block: var(--wc-space-8) var(--wc-space-16); }
.signup__form { display: grid; gap: var(--wc-space-4); padding: var(--wc-space-8); }
.signup__form h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); }
.signup__names { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wc-space-4); }
.signup__aside { display: grid; align-content: start; gap: var(--wc-space-4); padding: var(--wc-space-8); }
.signup__aside h2 { color: var(--wc-graph-paper); }
.signup__list { display: grid; gap: var(--wc-space-4); list-style: none; padding: 0; }
.signup__list li { display: flex; gap: var(--wc-space-3); align-items: flex-start; }
.signup__n { flex-shrink: 0; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; font-family: var(--wc-font-label); font-weight: 700; font-size: 0.85rem; color: var(--wc-spy-pond); }
.signup__n--1 { background: var(--wc-bubbler); }
.signup__n--2 { background: var(--wc-lantern); }
.signup__n--3 { background: var(--wc-bunsen); }

/* Small centered card (sign in, check email, verify, expired) */
.auth { display: grid; justify-items: center; gap: var(--wc-space-4); padding-block: var(--wc-space-8) var(--wc-space-16); }
.auth__card { width: min(100%, 28rem); display: grid; gap: var(--wc-space-4); padding: var(--wc-space-8) var(--wc-space-6); }
.auth__card h1 { font-size: 2.25rem; }
.auth__note { text-align: center; max-width: 28rem; }

/* Settings */
.settings { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--wc-space-6) var(--wc-space-8); padding-block: var(--wc-space-12) var(--wc-space-16); }
.settings__head { grid-column: 1 / -1; display: grid; gap: var(--wc-space-2); }
.settings__nav { display: grid; align-content: start; gap: var(--wc-space-2); position: sticky; top: var(--wc-space-4); }
.settings__nav a { font-weight: 700; color: var(--wc-text); text-decoration: none; padding-block: var(--wc-space-2); }
.settings__nav a:hover { color: var(--wc-link); }
.settings__sections { display: grid; gap: var(--wc-space-6); max-width: 44rem; }
.settings__sections .card { display: grid; gap: var(--wc-space-4); padding: var(--wc-space-6); }
.settings__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wc-space-4); }
.settings__actions { display: flex; flex-wrap: wrap; gap: var(--wc-space-3); }
.settings__danger { border-color: var(--wc-bunsen-deep); }
.btn { justify-self: start; }
.btn--block { justify-self: stretch; }

@media (max-width: 52rem) {
  .signup { grid-template-columns: minmax(0, 1fr); padding-block: var(--wc-space-4) var(--wc-space-12); }
  .signup__form, .signup__aside { padding: var(--wc-space-6); }
  .signup__names, .settings__row { grid-template-columns: minmax(0, 1fr); }
  .settings { grid-template-columns: minmax(0, 1fr); padding-block: var(--wc-space-8) var(--wc-space-12); }
  .settings__nav { position: static; display: flex; flex-wrap: wrap; gap: var(--wc-space-4); }
}