/* Seasely sign-in pages. Loads AFTER landing.css and reuses its tokens (--navy, --cyan-ink, --soft, font), wordmark (.lp-mark) and buttons (.lp-btn): one visual language, no second colour system.
   Layout: a calm brand panel (the landing's ribbon, one line of positioning) beside one compact form; below 900px only the form remains. */
:root { --field-line: #7A8A9E; --err: #B42318; --err-bg: #FEF1EF; --au-gap: 18px; }
body.au { min-height: 100svh; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.au-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); background: var(--soft); }

/* ---- brand panel */
.au-brand { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 34px clamp(32px, 5vw, 80px) clamp(40px, 7vh, 88px);
  background: radial-gradient(70% 55% at 90% 8%, rgba(125, 227, 225, .4), transparent 70%), radial-gradient(50% 40% at 6% 92%, rgba(39, 211, 255, .18), transparent 70%), linear-gradient(180deg, var(--soft), var(--mist)); }
.au-brand::after { content: ""; position: absolute; z-index: -1; right: -12%; bottom: -18%; width: min(520px, 60%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(39, 211, 255, .16), transparent); pointer-events: none; }
.au-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 40%, #000 62%, transparent 86%); mask-image: linear-gradient(180deg, transparent 12%, #000 40%, #000 62%, transparent 86%); }
.au-mark { font-size: 1.7rem; margin-left: -.02em; }
.au-line { margin: 0; font-size: clamp(2.6rem, 4.7vw, 4.7rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--navy); }
.au-line span { color: var(--cyan-ink); }
.au-brand-sub { margin: 22px 0 0; max-width: 40ch; color: var(--ink-2); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.5; text-wrap: pretty; }
.au-brand-foot { display: grid; gap: 14px; }

/* ---- form panel */
.au-main { display: flex; flex-direction: column; min-width: 0; padding: 26px clamp(24px, 5vw, 80px) 48px; background: radial-gradient(60% 40% at 100% 0%, rgba(125, 227, 225, .12), transparent 70%), var(--soft); }
.au-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.au-mark-sm { display: none; font-size: 1.45rem; }
.au-home { margin-left: auto; color: var(--ink-2); font-size: .94rem; padding: 12px 4px; }
.au-home:hover { color: var(--deep); }
.au-form-wrap { width: 100%; max-width: 440px; margin: auto; padding: 40px 40px 34px; background: #fff; border: 1px solid rgba(14, 34, 63, .08); border-radius: 22px; box-shadow: 0 1px 2px rgba(7, 19, 38, .04), 0 30px 60px -36px rgba(7, 19, 38, .35); position: relative; isolation: isolate; overflow: hidden; }
.au-form-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--navy), var(--cyan-ink) 50%, var(--cyan)); }
@media (prefers-reduced-motion: no-preference) { .au-form-wrap > * { animation: au-in .5s var(--ease) both; } .au-form-wrap > :nth-child(2) { animation-delay: .04s; } .au-form-wrap > :nth-child(n+3) { animation-delay: .08s; } }
@keyframes au-in { from { opacity: 0; transform: translateY(8px); } }

.au-h { margin: 0; font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.08; color: var(--navy); text-wrap: balance; }
.au-sub { margin: 8px 0 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.5; }
.au-sub b, .au-email { color: var(--navy); font-weight: 600; }
.au-email { margin: 4px 0 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.au-wide { width: 100%; --h: 52px; margin-top: 4px; }
.au-google { margin-top: 30px; gap: 12px; background: #fff; border-color: rgba(14, 34, 63, .22); box-shadow: 0 1px 2px rgba(7, 19, 38, .05), 0 10px 24px -18px rgba(7, 19, 38, .3); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s, background-color .25s; } .au-g { width: 20px; height: 20px; flex: none; }
@media (hover: hover) and (pointer: fine) { .lp-btn-outline.au-google:hover { background: #fff; color: var(--navy); border-color: var(--cyan-ink); box-shadow: 0 2px 4px rgba(7, 19, 38, .05), 0 16px 32px -18px rgba(7, 146, 184, .45); } }
.lp-btn.au-google:has(.au-g) { padding-right: 22px; }
.au-or { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: var(--ink-2); font-size: .9rem; }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.au-form { display: grid; gap: var(--au-gap); margin-top: 28px; } .au-or + .au-form, .au-alert + .au-form { margin-top: 0; }
.au-sub + .au-form { margin-top: 28px; }
.au-retry { margin: 14px 0 0; font-size: .95rem; }

/* ---- fields */
.au-field label { display: block; margin-bottom: 7px; font-size: .9rem; font-weight: 560; color: var(--navy); }
.au-input { position: relative; }
.au-input input { width: 100%; height: 52px; padding: 0 16px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--soft); border: 1px solid var(--field-line); border-radius: 12px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.au-input input:focus { background: #fff; }
.au-input input:has(+ .au-eye) { padding-right: 76px; }
.au-input input:hover { border-color: var(--ink-2); }
.au-input input:focus { outline: none; border-color: var(--cyan-ink); box-shadow: 0 0 0 3px rgba(39, 211, 255, .38); }
.au-input input:focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 2px; border-radius: 12px; box-shadow: none; }
.au-field.has-err input { border-color: var(--err); }
.au-eye { position: absolute; right: 4px; top: 4px; height: 44px; min-width: 56px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; font-size: .9rem; font-weight: 560; cursor: pointer; }
.au-eye:hover { color: var(--deep); background: rgba(14, 34, 63, .06); } .au-eye:focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 1px; border-radius: 9px; }
.au-eye[hidden] { display: none; }
.au-hint { margin: 7px 0 0; font-size: .88rem; color: var(--ink-2); }
.au-err { margin: 7px 0 0; font-size: .9rem; font-weight: 520; color: var(--err); }
.au-err:not([hidden]) { animation: au-in .25s var(--ease) both; }

/* ---- messages */
.au-alert, .au-notice { margin: 22px 0 0; padding: 13px 16px; border-radius: 12px; font-size: .95rem; line-height: 1.45; }
.au-alert { background: var(--err-bg); color: #8A1C12; } .au-notice { background: var(--mist); color: var(--navy); }
.au-alert + *, .au-notice + * { margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) { .au-alert, .au-notice { animation: au-in .3s var(--ease) both; } }

/* ---- links */
.au-links { margin: 22px 0 0; font-size: .95rem; color: var(--ink-2); } .au-links + .au-links { margin-top: 8px; }
.au-form + .au-links { margin-top: 24px; }
.au-links a, .au-retry a, .au-linkbtn { color: var(--navy); font-weight: 560; text-decoration: underline; text-decoration-color: rgba(14, 34, 63, .35); text-underline-offset: 3px; padding-block: 6px; display: inline-block; }
.au-links a:hover, .au-retry a:hover, .au-linkbtn:hover { color: var(--cyan-ink); text-decoration-color: currentColor; }
.au-linkbtn { background: none; border: 0; padding: 6px 0; font: inherit; font-size: .95rem; font-weight: 560; cursor: pointer; }
.au-linkbtn:focus-visible, .au-links a:focus-visible, .au-home:focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 2px; border-radius: 6px; }
form.au-links { margin-top: 18px; } form.au-links + * { margin-top: 0; }
.au-form form { margin: 0; }

/* ---- small screens: the form only */
@media (max-width: 900px) {
  .au-shell { grid-template-columns: 1fr; } .au-brand { display: none; }
  .au-main { padding-top: 14px; } .au-mark-sm { display: inline-flex; }
  .au-form-wrap { margin: 0 auto; padding: clamp(24px, 8vh, 56px) 0 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; } .au-form-wrap::before { display: none; }
}
@media (max-width: 420px) { .au-main { padding-inline: 20px; } .au-h { font-size: 1.9rem; } }
@media (pointer: coarse) { .au-home, .au-links a, .au-retry a { padding-block: 12px; } }

.au-fine { margin-top: 10px; font-size: .9rem; color: var(--ink-2); } .au-fine a { text-decoration: underline; text-underline-offset: 3px; }