/* Logged-out pages (log in, request an account, password reset, error pages): the layout only.
   Colours, fonts, buttons and fields come from theme.css, which these pages load first. */

/* Two columns: the logo, then the heading and form. They wrap into one column on narrow screens. */
.auth {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 48px 96px; padding: 48px 24px;
}
.auth-logo { flex: 1 1 320px; max-width: 460px; display: flex; justify-content: center; }
.auth-logo img { width: 100%; max-width: 420px; height: auto; display: block; }
.auth-panel { flex: 1 1 320px; max-width: 400px; display: flex; flex-direction: column; gap: 32px; }
.auth-panel h1 { margin: 0; font-size: 56px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form h2 { margin: 0 0 4px; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.auth-form > p { font-size: 15px; }
.auth-form > .note { margin-top: -6px; }
.auth-form .btn-primary { margin-top: 8px; }
.auth .btn { display: flex; }
.quiet-link { align-self: center; font-size: 15px; padding: 10px; }

.auth-aside { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 24px; }
.aside-title { font-size: 17px; font-weight: 700; }
.note { font-size: 13px; color: var(--muted); }

/* Phones: one column, a small logo on top. */
@media (max-width: 720px) {
  .auth { align-content: flex-start; justify-content: flex-start; gap: 28px; padding: 28px 16px 40px; }
  .auth-logo { flex: none; justify-content: flex-start; }
  .auth-logo img { width: 112px; }
  .auth-panel { flex-basis: 100%; max-width: 440px; gap: 28px; }
  .auth-panel h1 { font-size: 40px; }
}