/* Sign-in notice and submit-button spinner. */

/* A wrong password is routine, not an emergency, so this reads as a hint rather
   than an error: warm amber, soft edges, no shouting. */
.login-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 1.15rem;
    padding: .8rem .95rem;
    border: 1px solid #fcd9a4;
    border-radius: 12px;
    background: #fff9ef;
    color: #7c4a03;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.55;
}

.login-notice i {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: #d68910;
    font-size: .95rem;
}

/* --- submit button --- */

.login-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 44px;
}

.login-submit__spinner {
    display: none;
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin .7s linear infinite;
}

.login-submit.is-loading .login-submit__spinner {
    display: block;
}

/* Keep the button's own footprint steady while it is working, so the card does
   not jump when the label changes. */
.login-submit.is-loading {
    cursor: progress;
}

.login-submit:disabled {
    opacity: .85;   /* still legible - this is a working state, not a dead control */
}

@keyframes login-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .login-submit__spinner {
        animation-duration: 2.4s;
    }
}