/* account.css -- My account: a card of the dialog family (e5b.css) with sections one under the other, 
 * Tokens from core.css, no colour of its own. */

.acct-card { box-sizing: border-box; width: min(40rem, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; }
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.acct-head .tfa-title { margin: 0; }
.acct-sec { padding: 12px 0; border-top: 1px solid var(--rule); }
.acct-sec:first-child { border-top: 0; }
.acct-h { margin: 0 0 8px; font-size: calc(var(--ui-fs) * 12 / 13); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.acct-btns { justify-content: flex-start; margin: 4px 0 0; }
.acct-form { margin: 10px 0 0; }

@media (max-width: 700px), (pointer: coarse) and (max-width: 900px) {
  .acct-scrim { align-items: stretch; }
  body.mob .acct-card, .acct-card { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; padding: 14px 16px 28px; }
  .acct-card .dlgbtn { min-height: 48px; padding: 0 16px; font-size: 17px; border-radius: 6px; }
  .acct-card .dlginput, .acct-card .tfa-input { min-height: 48px; padding: 10px 12px; font-size: 17px; border-radius: 6px; }
  .acct-btns .dlgbtn { flex: 1 1 auto; }
}

/* the form of My account (was shared with the two-step card) */
.acct-title { margin: 0 0 10px; font-size: calc(var(--ui-fs) * 15 / 13); font-weight: 600; color: var(--text-strong); }
.acct-label { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: calc(var(--ui-fs) * 12 / 13); color: var(--text-dim); }
.acct-input { width: 100%; box-sizing: border-box; }
.acct-err { margin: 0 0 10px; color: var(--danger-tx); }
.acct-err.ok { color: var(--ok); }
.acct-err[hidden] { display: none; }