/* Sign in and sign up. Two columns on a wide screen: the form, and a reason to fill it in. */

.auth-main {
  max-width: 1040px; margin: 0 auto;
  padding: 46px max(16px, env(safe-area-inset-right, 0px)) 70px max(16px, env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: start;
}
@media (max-width: 860px) { .auth-main { grid-template-columns: 1fr; gap: 34px; padding-top: 30px; } }
.auth-col { min-width: 0; max-width: 420px; }
.auth-main h1 {
  font: 500 clamp(34px, 6.4vw, 52px)/1.0 var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.028em; margin: 0 0 22px; text-wrap: balance;
}
.auth-error {
  background: color-mix(in srgb, var(--urgent) 14%, var(--card));
  color: var(--urgent-ink); border-radius: 14px; padding: 11px 14px; font-size: 14.5px; margin: 0 0 4px;
}
.auth-note {
  background: color-mix(in srgb, var(--ok) 15%, var(--card));
  color: var(--ok-ink); border-radius: 14px; padding: 11px 14px; font-size: 14.5px; margin: 0 0 4px; line-height: 1.5;
}
.auth-lede { font-size: 16px; color: var(--ink-soft); line-height: 1.55; margin: -8px 0 22px; max-width: 42ch; }
.auth-hint { font: 400 12.5px/1.4 var(--mono); color: var(--ink-soft); margin: 6px 0 0; }
.auth-fine { font-size: 13px; color: var(--ink-soft); margin: 26px 0 0; max-width: 42ch; line-height: 1.5; }

.auth-aside { min-width: 0; }
@media (max-width: 860px) { .auth-aside { order: -1; } }
.auth-thread {
  background: var(--card); border: 1px solid var(--rule); border-radius: 26px; padding: 18px;
  display: flex; flex-direction: column; gap: 9px; box-shadow: 0 18px 40px -30px rgba(15, 26, 46, 0.5);
}
.auth-msg { max-width: 86%; padding: 11px 16px; border-radius: 21px; font-size: 15.5px; line-height: 1.42; }
.auth-msg.you { align-self: flex-end; background: var(--bubble-you); color: var(--bubble-you-ink); border-bottom-right-radius: 7px; }
.auth-msg.dog { align-self: flex-start; background: var(--bubble-dog); border-bottom-left-radius: 7px; }
.auth-aside p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin: 16px 2px 0; max-width: 40ch; }
.auth-help { margin: 20px 0 0; font-size: 14px; color: var(--ink-soft); }
.auth-help a { color: var(--brand); }