/*
 * KAORI authentication presentation layer.
 * Scope: visual refinement only. Authentication behavior remains in app/access/authentication/.
 */

.kaori-login-shell {
    width: min(1060px, 100%);
    max-width: 1060px;
}

.kaori-login-brand {
    background:
        radial-gradient(circle at 13% 8%, rgb(124 58 237 / 0.22), transparent 34%),
        radial-gradient(circle at 84% 72%, rgb(167 139 250 / 0.11), transparent 32%),
        linear-gradient(145deg, #121019 0%, #171321 48%, #21143A 100%);
}

.kaori-login-brand__ambient {
    background-image:
        linear-gradient(rgb(167 139 250 / 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(167 139 250 / 0.045) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.88), transparent 92%);
}

.kaori-login-brand__acronym {
    max-width: 100%;
    overflow: visible;
    font-size: 8px;
    letter-spacing: 0.045em;
    line-height: 1.35;
    white-space: nowrap;
}

.kaori-login-brand__eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
}

.kaori-login-brand__description {
    font-size: 12px;
}

.kaori-login-brand__footer {
    font-size: 10px;
}

.kaori-login-brand__clarity {
    color: #A78BFA;
}

.kaori-operations-fabric {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgb(167 139 250 / 0.18);
    border-radius: 18px;
    background: rgb(23 17 36 / 0.78);
    box-shadow:
        0 22px 46px rgb(0 0 0 / 0.22),
        0 0 0 1px rgb(124 58 237 / 0.05) inset;
}

.kaori-operations-fabric::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(115deg, transparent 35%, rgb(167 139 250 / 0.055) 50%, transparent 65%);
}

.kaori-login-capability {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.35rem;
    border: 1px solid rgb(167 139 250 / 0.18);
    border-radius: 10px;
    background: rgb(29 24 39 / 0.72);
    color: #EDE9FE;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.kaori-login-capability svg {
    flex: 0 0 auto;
    color: #A78BFA;
}

.kaori-login-form-panel::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    content: "";
    background: linear-gradient(to bottom, transparent, rgb(124 58 237 / 0.22), transparent);
}

.kaori-login-control {
    height: 44px;
    min-height: 44px;
}

.kaori-login-submit {
    height: 44px;
    min-height: 44px;
    background-image: linear-gradient(90deg, #6D28D9 0%, #7C3AED 54%, #8B5CF6 100%);
}

.kaori-login-submit:hover {
    background-image: linear-gradient(90deg, #5B21B6 0%, #6D28D9 54%, #7C3AED 100%);
}


@media (min-width: 1024px) and (max-width: 1120px) {
    .kaori-login-brand__acronym {
        font-size: 7.5px;
        letter-spacing: 0.025em;
    }
}

@media (min-width: 1024px) {
    .kaori-login-shell {
        min-height: 600px;
    }
}

@media (min-width: 1280px) {
    .kaori-login-shell {
        min-height: 610px;
    }

    .kaori-login-brand__description {
        font-size: 13px;
    }
}

@media (max-height: 760px) and (min-width: 1024px) {
    .kaori-login-shell {
        min-height: 560px;
    }

    .kaori-login-brand {
        padding-top: 1.15rem;
        padding-bottom: 1.15rem;
    }

    .kaori-login-form-panel {
        padding-top: 1.15rem;
        padding-bottom: 1.15rem;
    }

    .kaori-login-capabilities {
        margin-top: 0.65rem;
    }
}