/* 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; }
}
/* Error pages: the pig on its own instead of the text logo. */
.auth-logo .auth-pig { max-width: 260px; }

/* The small print under every logged-out page (a link to the Copyright page). */
.auth-foot { margin: 0; }

/* Long pages (Copyright): one column of text with the small logo on top. */
.auth-doc { display: block; max-width: 680px; margin: 0 auto; }
.auth-doc .auth-logo { justify-content: flex-start; margin-bottom: 32px; }
.auth-doc .auth-logo img { width: 112px; }
.auth-doc .auth-panel { max-width: none; gap: 28px; }
.doc-section { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.doc-section h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.doc-section p, .doc-section ol, .doc-section dl { margin: 0; }
.doc-section ol, .doc-section ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc-section ul { margin: 0; }
.doc-updated { margin: -16px 0 0; font-size: 14px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc-table th, .doc-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc-table th { color: var(--muted); font-weight: 600; }
.agent { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; }
.agent dt { color: var(--muted); }
.agent dd { margin: 0; overflow-wrap: anywhere; }