/* 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: 800 clamp(32px, 6vw, 48px)/1.02 var(--display); letter-spacing: -0.03em; margin: 0 0 22px; }
.auth-error {
  background: color-mix(in srgb, var(--urgent) 14%, var(--card));
  color: var(--urgent); 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); 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(20, 28, 24, 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; }