/* /account and /reset — sign in, make an account, look after it. (pages/account.js, pages/reset.js) */

.acct-page { display: grid; gap: clamp(18px, 3vw, 28px); padding-bottom: clamp(56px, 9vw, 120px); }
.acct-pair, .acct-grid { display: grid; gap: clamp(18px, 3vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.acct-card h2 { font-size: var(--step-2); margin-bottom: .5em; }
.acct-card > p:last-child, .acct-card form > .row:last-child { margin-bottom: 0; }
.acct-card .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: .3em; }
.acct-card input { min-height: 48px; font-size: max(16px, var(--step-0)); border-width: 2.5px; border-radius: 14px; }
.acct-card input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(255, 90, 90, .18); }
.acct-card .help { margin: 0; font-size: var(--step--1); color: var(--fg-muted); }
.acct-narrow { max-width: 460px; }

.acct-quick { display: grid; justify-items: start; gap: .4em; }
.acct-quick .acct-google { min-height: 44px; }
.acct-quick p { margin: 0; }

.acct-msg { min-height: 1.3em; margin: 0 0 .5em; font-weight: 700; font-size: var(--step--1); color: var(--steam); }
.acct-msg.is-bad { color: var(--bad); }
.acct-msg:empty { min-height: 0; margin: 0; }

.linkish {
  appearance: none; background: none; border: 0; padding: .3em 0; margin-top: .6em;
  font: 700 var(--step--1)/1.3 var(--font-body); color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.linkish:hover { color: var(--molten); }
.acct-forgot { margin-top: .8em; padding-top: .9em; border-top: 2px dashed var(--line); }
.acct-forgot > p.small { margin-top: 0; color: var(--fg-muted); }

.acct-status { color: var(--fg-muted); }
.acct-danger { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)) !important; }
.acct-danger .reset-warn { margin-top: 1em; }