/* Accounts: the sign-in area of the header, the account forms and the member profile.

   Theme: every color and radius comes from the custom properties in site.css, and every
   font is inherited from the page, so a community's theme changes these pages too. Need
   a value that has no variable? Add the variable in site.css; do not write the value here.

   Phone first: the rules below are the phone layout, and the min-width block at the end
   adds room on wider screens. Anything tapped is at least 44 px tall, and form fields use
   16 px text so iPhones do not zoom the page. There is no motion here to reduce. */

/* Header: who is signed in, or the way in */
.account-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 15px; }
.account-nav form { margin: 0; display: flex; }
.account-nav-name, .account-nav-link, .account-nav-button { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.account-nav-name { max-width: 100%; color: var(--header-ink); font-weight: 600; overflow-wrap: anywhere; }
.account-nav-name:hover { text-decoration: underline; }
.account-nav-link { padding: 0 4px; border: 0; background: none; color: var(--header-muted); font: inherit; font-weight: 500; cursor: pointer; }
.account-nav-link:hover { color: var(--header-ink); text-decoration: underline; }
.account-nav-button { padding: 0 16px; border-radius: var(--radius-small); background: var(--primary-fill), var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: var(--primary-shadow); }
.account-nav-button:hover { filter: brightness(1.08); }
.account-nav-name:focus-visible, .account-nav-link:focus-visible, .account-nav-button:focus-visible { outline: 2px solid var(--header-ink); outline-offset: 2px; }

/* The card every account page sits in */
.account-card { width: 100%; max-width: 460px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.account-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: var(--tight); }
.account-text { margin: 0; color: var(--muted); font-size: 15px; }
.account-foot { margin: 0; padding-top: 8px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 20px; color: var(--muted); }
.account-foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }

/* Forms */
.account-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 600; }
.field-hint { margin: 0; color: var(--muted); font-size: 14px; }
.field-error { margin: 0; color: var(--danger); font-size: 14px; font-weight: 600; }
.field input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--radius-small); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; transition: border-color var(--ease), box-shadow var(--ease); }
.field input:focus { border-color: var(--accent); box-shadow: var(--field-glow); }
.field input[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.field input:focus-visible, .button:focus-visible, .account-card a:focus-visible, .check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

/* The account forms' own buttons, full width: the same two looks as forum-button
   (threads.css). "button" is the main action, "button button-quiet" another way on. */
.button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radius-small); background: var(--primary-fill), var(--accent); color: var(--on-accent); box-shadow: var(--primary-shadow); font: inherit; font-size: 16px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); }
.button:hover { box-shadow: var(--primary-shadow), var(--elev-2); transform: translateY(-1px); }
.button:active { transform: none; }
.button-quiet { border-color: var(--button-line); background: var(--surface); color: var(--ink); box-shadow: var(--elev-1); }
.button-quiet:hover { border-color: var(--control-line); box-shadow: var(--elev-2); }

/* Messages. The words carry the meaning; the colored edge only helps the eye. */
.notice, .form-error { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-small); background: var(--surface-alt); box-shadow: var(--elev-1); overflow-wrap: anywhere; }
.notice { border-left-color: var(--accent); }
.form-error { border-left-color: var(--danger); color: var(--danger); font-weight: 600; }

/* "Sign in with …" buttons, one per provider the community has switched on */
.provider-buttons { display: flex; flex-direction: column; gap: 12px; }
.provider-buttons form { margin: 0; }
.provider-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.provider-divider::before, .provider-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* Member profile */
.profile-card { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.profile-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.profile-head > div { min-width: 0; }
.profile-avatar { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--band); color: var(--ink); font-size: 24px; font-weight: 700; }
.profile-name { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: var(--tight); overflow-wrap: anywhere; }
.profile-role { display: inline-block; margin-top: 6px; padding: 2px 10px; border: 1px solid var(--ink); border-radius: var(--radius-small); color: var(--ink); font-size: 13px; font-weight: 700; }
.profile-facts { margin: 0; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 14px 40px; }
.profile-facts dt { color: var(--muted); font-size: 14px; }
.profile-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; }

/* Wider than a phone: more air, a bigger name */
@media (min-width: 560px) {
  .account-card { margin-top: 16px; padding: 28px; }
  .profile-card { padding: 28px; gap: 22px; }
  .profile-head { gap: 16px; }
  .profile-avatar { width: 64px; height: 64px; font-size: 26px; }
  .profile-name { font-size: 28px; }
  .profile-facts { gap: 14px 48px; }
}