/* Authentication */
.auth-body {
    background: #efe1d0;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(440px, 620px);
    min-height: 100vh;
}

.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding: clamp(32px, 5vw, 72px);
    overflow: hidden;
    background:
        radial-gradient(circle at 76% 20%, rgba(255, 227, 173, .78) 0 8%, transparent 8.2%),
        linear-gradient(155deg, #e9c89d 0%, #d4935f 46%, #a6532c 100%);
    color: #fffaf2;
}

.auth-brand::before,
.auth-brand::after {
    position: absolute;
    right: -13%;
    bottom: 7%;
    width: 75%;
    height: 42%;
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 50%;
    content: "";
    transform: rotate(-11deg);
}

.auth-brand::after {
    right: -5%;
    bottom: -7%;
    width: 88%;
    height: 48%;
}

.auth-brand .brand {
    position: relative;
    z-index: 1;
}

.auth-brand .brand small {
    color: rgba(255, 255, 255, .75);
}

.auth-brand > p {
    position: relative;
    z-index: 1;
    max-width: 360px;
    font-size: clamp(21px, 2.3vw, 33px);
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.03em;
}

.auth-landscape {
    position: absolute;
    inset: 17% 6% 16% 13%;
}

.auth-sun {
    position: absolute;
    top: 6%;
    right: 14%;
    width: clamp(80px, 12vw, 170px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 237, 201, .84);
    box-shadow: 0 0 70px rgba(255, 234, 194, .22);
}

.auth-runner {
    position: absolute;
    left: 2%;
    bottom: 7%;
    color: rgba(255, 250, 242, .82);
    font-size: clamp(44px, 8vw, 108px);
    font-weight: 850;
    line-height: .82;
    letter-spacing: -.075em;
}

.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 48px clamp(28px, 5vw, 76px);
    background: var(--color-surface);
}

.auth-panel > .preview-pill {
    align-self: flex-end;
    margin-bottom: 28px;
}

.auth-card {
    width: min(100%, 430px);
    margin: auto;
}

.auth-card--passwordless {
    min-height: 470px;
}

.auth-card__heading {
    margin-bottom: 28px;
}

.auth-card__heading h1 {
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.22;
    letter-spacing: -.045em;
}

.auth-card__heading p {
    margin-top: 10px;
    color: var(--color-text-muted);
}

.auth-card__heading p b {
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.auth-flow-step {
    animation: auth-step-in .28s ease both;
}

@keyframes auth-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-back-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 38px;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.auth-back-button:hover {
    color: var(--color-primary-dark);
}

.auth-back-button .rs-icon {
    width: 16px;
    height: 16px;
}

.username-availability {
    min-height: 18px;
    transition: color .18s ease;
}

.username-availability.is-checking {
    color: var(--color-text-muted);
}

.username-availability.is-available {
    color: #48614b;
}

.username-availability.is-unavailable {
    color: var(--color-tertiary);
}

.auth-code-field input {
    height: 68px;
    padding-left: 22px;
    font-size: 30px;
    font-weight: 750;
    letter-spacing: .38em;
    text-align: center;
}

.auth-code-field input::placeholder {
    color: #d9d0c7;
}

.auth-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    color: var(--color-text-muted);
    font-size: 11px;
}

.auth-hint .rs-icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

.auth-resend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    margin-top: 12px;
    color: var(--color-text-muted);
    font-size: 11px;
}

.auth-resend .text-button {
    min-height: 38px;
    font-size: 12px;
}

.auth-resend .text-button:disabled {
    cursor: not-allowed;
    color: #b9afa6;
}

.auth-legal,
.auth-switch {
    margin-top: 22px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
}

.auth-switch {
    font-size: 13px;
}

.auth-switch a,
.auth-legal a {
    color: var(--color-primary-dark);
    font-weight: 650;
}