/* Login pages (/login, /login/forgot, /login/reset; apps/site/account/). Builds on site.css (tokens,
   buttons, .contact-form fields) and portal.css (the compact header). */

.account-page { background: var(--bg2); }
.account-page .portal-header { background: var(--bg); }
.account-main { padding: 64px var(--gutter, 16px) 96px; display: flex; justify-content: center; }

.account-card {
  width: 100%; max-width: 460px; padding: 40px;
  background: var(--bg); border-top: 4px solid var(--hi); border-radius: 6px;
  box-shadow: 0 30px 70px rgba(38, 38, 38, .12);
}
.account-card .lbl { color: var(--hi); }
.account-card h1 { font-size: 44px; margin: 10px 0 0; }
.account-card .contact-form { margin-top: 26px; }

.account-text { margin: 18px 0 0; color: var(--fg2); overflow-wrap: anywhere; }
.account-muted { font-size: 14px; color: var(--mut); }
.account-text a, .account-muted a { color: var(--hi-dark); text-decoration: underline; text-underline-offset: 2px; }
.account-back, .account-actions { margin-top: 28px; }

.account-link { font-size: 14px; color: var(--mut); text-decoration: underline; text-underline-offset: 3px; }
.account-link:hover { color: var(--hi); }

.account-notice { margin: 22px 0 0; padding: 12px 16px; background: var(--bg2); border-left: 3px solid #1F6F43; font-size: 14px; font-weight: 600; color: #1F6F43; }
.account-form .form-status { margin: 0; }
.account-form .form-status p { margin: 0; }
.account-form .form-status p + p { margin-top: 4px; }

/* New password: rules tick as they're met (public/js/account.js) */
.pw-rules { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; color: var(--mut); }
.pw-rules li::before { content: "○"; display: inline-block; width: 1.3em; }
.pw-rules li.ok { color: #1F6F43; }
.pw-rules li.ok::before { content: "✓"; font-weight: 700; }
.pw-match { margin: 8px 0 0; min-height: 1.3em; font-size: 13px; }
.pw-match.ok { color: #1F6F43; }
.pw-match.bad { color: var(--mut); }

@media (max-width: 575.98px) {
  .account-main { padding: 28px 16px 56px; }
  .account-card { padding: 32px 20px 28px; }
  .account-card h1 { font-size: 36px; }
  /* Phones: the header button shows only the arrow */
  .account-page .btn-login span { display: none; }
}