/* Account pages (register, login, forgot, referral landing). Built on content.css; no new colours. */
@import url("content.css");

.acct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 64px; align-items: start; }
.acct__copy { display: grid; gap: 20px; }
.acct__copy .lede { font-size: 19px; }
.acct__points { display: grid; gap: 10px; margin-top: 8px; }
.acct__points li { position: relative; padding-left: 22px; color: var(--vx-ink-2); }
.acct__points li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; background: var(--vx-brand); transform: rotate(45deg); }

.acct--invite { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
.acct__media video { display: block; }
.acct__panel > :not(.module__head) { padding: 0 var(--vx-pad); }
.acct__panel { padding-bottom: 24px; }
.acct__panel .module__head { margin-bottom: 22px; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field input { width: 100%; min-height: 46px; padding: 0 14px; border: var(--vx-hair) solid var(--vx-line-2); background: var(--vx-deep);
  color: var(--vx-ink); font: 400 var(--vx-fs-readout)/1 var(--vx-font-mono); border-radius: 0; transition: border-color var(--vx-t-fast); }
.field input:hover { border-color: var(--vx-ink-3); }
.field input:focus { outline: none; border-color: var(--vx-ice); }
.field input:disabled { color: var(--vx-ink-3); }
.field__hint { font-size: var(--vx-fs-small); line-height: 1.45; color: var(--vx-ink-3); }
.field--code input { text-transform: uppercase; letter-spacing: 0.12em; }
.form .btn--solid { min-height: 50px; font-size: var(--vx-fs-label); }
.form .btn:disabled { opacity: 0.55; cursor: progress; }
.form__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--vx-fs-small); }
.form__links a { color: var(--vx-ink-2); text-underline-offset: 3px; text-decoration-color: var(--vx-line-2); }
.form__links a:hover { color: var(--vx-ink); }
.form__fine { font-size: 13px; line-height: 1.5; color: var(--vx-ink-3); }
.form__fine a { color: var(--vx-ink-2); }

.msg { min-height: 1.5em; font: 500 var(--vx-fs-small)/1.5 var(--vx-font-mono); color: var(--vx-ink-2); }
.msg:empty { min-height: 0; margin-top: -18px; }
.msg[data-tone="error"] { color: var(--vx-threat-ink); }

.done { display: grid; gap: 14px; color: var(--vx-ink-2); }
.done b { color: var(--vx-ink); font-weight: 600; }
.done .btn { justify-self: start; }

@media (max-width: 900px) {
  .acct { grid-template-columns: 1fr; gap: 32px; }
  .acct__copy .acct__media { display: none; }
}