/* Scoped to this page only: the site stylesheet is loaded for the colour
   variables and the Arabic fonts, nothing here touches its classes. */
.login-wrap
{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-column
{
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* .logo and .logo-mark/.logo-name come from testing.css, so the mark keeps
   the same green tile and font as the one in the site header. */
.login-logo { justify-content: center; }

/* Scaled up from the header's 34px tile, this page has the room. */
.login-logo .logo-mark
{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    padding-right: 7px;
    font-size: 28px;
}

.login-logo .logo-name { font-size: 2rem; }

/* The logo starts hidden behind the login box and springs up into place. The
   card sits above it on the z axis and has an opaque background, so the logo is
   invisible until it clears the card's top edge. 76px is the logo's own height
   plus the 18px column gap, which is what it takes to be fully covered. The
   overshoot in the curve is what makes it read as a jump rather than a slide. */
@keyframes login-logo-jump
{
    from { transform: translateY(76px); }
    to   { transform: translateY(0); }
}

.login-logo
{
    position: relative;
    z-index: 0;
    animation: login-logo-jump 0.6s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

/* Added by the template when a login error is showing. Listed on all three
   selectors so it keeps working whichever element the animation moves to. */
.login-logo-static,
.login-logo-static .logo-mark,
.login-logo-static .logo-name { animation: none; }

/* Honour the system setting for people who get motion sickness. */
@media (prefers-reduced-motion: reduce)
{
    .login-logo { animation: none; }
}

.login-card
{
    position: relative;
    z-index: 1;
    width: 100%;
    background-color: var(--color-timeline);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 28px 24px;
}

.login-card h1
{
    font-family: var(--font-arabic-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.login-field { margin-bottom: 14px; }

.login-field label
{
    display: block;
    font-family: var(--font-arabic-primary);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.login-field input
{
    width: 100%;
    padding: 10px 12px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 0.95rem;
}

.login-field input:focus
{
    outline: none;
    border-color: var(--color-accent);
}

.login-button
{
    width: 100%;
    margin-top: 6px;
    padding: 11px;
    background-color: var(--color-button);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-family: var(--font-arabic-primary);
    font-size: 0.95rem;
    cursor: pointer;
}

.login-button:hover { background-color: var(--color-button-hover); }

.login-error
{
    font-family: var(--font-arabic-primary);
    font-size: 0.85rem;
    color: #e58f8f;
    background-color: rgba(229, 143, 143, 0.1);
    border: 1px solid rgba(229, 143, 143, 0.35);
    border-radius: 6px;
    padding: 9px 12px;
    margin-bottom: 16px;
    text-align: center;
}