/* Keep real labels visible on focus, typed values and browser autofill. */
.registration-form .signup-floating-field { position: relative; }
.registration-form .signup-floating-field > .form-label {
    position: absolute;
    z-index: 2;
    top: 1.5rem;
    left: .7rem;
    max-width: calc(100% - 1.4rem);
    margin: 0;
    padding: 0 .25rem;
    color: #786d6f;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    pointer-events: none;
    transform: translateY(-50%);
    transition: top .16s ease, font-size .16s ease, color .16s ease;
}
.registration-form .signup-floating-field .form-control { min-height: 3rem; height: 3rem; }
.registration-form .signup-floating-field:has(input:is(:focus, :not(:placeholder-shown), :-webkit-autofill)) > .form-label {
    top: 0;
    color: #8b1118;
    background: #fff;
    font-size: .8rem;
}
.registration-form .username-availability:not(:empty) { min-height: 0; margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) {
    .registration-form .signup-floating-field > .form-label { transition: none; }
}