/* =========================================================================
   login.css — login.php and register.php.
   Two columns: the form on pure black, a brand panel on surface-1. On the
   form side green appears only on the primary button, the input focus ring
   and the checked checkbox, with no gradients, glows or shadows. The brand
   panel's animated visual (auth-visual.css) is the one place with depth,
   soft light and an indigo accent.
   ========================================================================= */

body.login-page {
    background: var(--bg-base);
    /* responsive.css sets overflow-x: hidden on html and body, which turns the
       body into its own scroll container and breaks position: sticky on the
       brand panel. clip hides the overflow without creating one. */
    overflow-x: clip;
}

.login {
    display: grid;
    grid-template-columns: 48fr 52fr;
    min-height: 100vh;
}

/* --- Form column --- */
.login__form-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    background: var(--bg-base);
}

.login__form {
    width: 100%;
    max-width: 400px;
}

.login__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: 40px;
    margin-bottom: var(--space-12);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

/* The shared brand-mark partial paints its default bolt in the accent. The
   login page keeps green for the three interactive things only, so the
   default mark is neutral here. An uploaded logo is shown as it is. */
.login__logo .sidebar__brand-mark {
    width: 40px;
    height: 40px;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
}

.login__logo img {
    height: 40px !important;
}

.login__title {
    margin: 0;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--text-primary);
}

.login__subtitle {
    margin: var(--space-2) 0 0;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
}

.login__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-6);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.login__notice .material-symbols-rounded {
    font-size: 20px;
    flex-shrink: 0;
}

.login__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.login__label,
.login__form .field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
}

/* --- Inputs --- */
.login__input,
.login__form .input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-primary);
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

.login__input::placeholder,
.login__form .input::placeholder {
    color: var(--text-disabled);
}

.login__input:hover,
.login__form .input:hover {
    border-color: #3d3d3d;
}

.login__input:focus,
.login__form .input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.login__input:disabled {
    background: var(--surface-1);
    color: var(--text-disabled);
    cursor: not-allowed;
}

.login__input.is-error,
.login__input.is-error:hover {
    border-color: #ff5c5c;
}

.login__input.is-error:focus {
    border-color: #ff5c5c;
    box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.25);
}

.login__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    margin: 6px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #ff5c5c;
}

.login__error .material-symbols-rounded {
    font-size: 16px;
    flex-shrink: 0;
}

.login__resend {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: underline;
}

.login__form .field {
    margin: 0;
}

.login__hint,
.login__form .field__hint {
    margin: 6px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Eye button inside a password field. */
.login__pw {
    position: relative;
}

.login__pw .login__input {
    padding-right: 48px;
}

.login__pw-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard);
}

.login__pw-toggle:hover {
    color: var(--text-primary);
}

.login__pw-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.login__pw-toggle .material-symbols-rounded {
    font-size: 20px;
}

/* Password length bar (sign-up): fills toward the minimum, red until it is met, then green. */
.login__meter-track {
    position: relative;
    height: 4px;
    margin-top: var(--space-2);
    background: var(--surface-3);
    border-radius: 2px;
}

.login__meter-fill {
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--text-disabled);
    transition: width var(--duration-base) var(--ease-standard),
                background var(--duration-base) var(--ease-standard);
}

.login__meter[data-state="short"] .login__meter-fill { background: #ff5c5c; }
.login__meter[data-state="short"] [data-pw-label] { color: #ff5c5c; }
.login__meter[data-state="ok"] .login__meter-fill { background: var(--accent); }
.login__meter[data-state="ok"] [data-pw-label] { color: var(--accent-text); }

/* The password field itself follows the same rule. */
.login__input.is-short,
.login__input.is-short:hover {
    border-color: #ff5c5c;
}

.login__input.is-short:focus {
    border-color: #ff5c5c;
    box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.25);
}

.login__input.is-ok,
.login__input.is-ok:hover {
    border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .login__meter-fill { transition: none; }
}

/* Several errors and notices above the fields (sign-up). */
.login__errors {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.login__errors .login__error,
.login__errors .login__notice {
    margin: 0;
}

.login__errors .login__error {
    font-size: 0.8125rem;
}

.login__notice a {
    color: var(--text-primary);
    text-decoration: underline;
}

.login__notice strong {
    color: var(--text-primary);
    font-weight: 600;
}

.login__notice--ok .material-symbols-rounded {
    color: var(--status-success);
}

/* --- Options row --- */
.login__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.login__remember {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.login__check {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

.login__check:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.5l3 3 6-7' fill='none' stroke='%2303130a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}

.login__check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.login__forgot {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.login__forgot:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* --- Primary button --- */
.login__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 48px;
    margin-top: var(--space-6);
    padding: 0;
    background: var(--btn-primary);
    border: 0;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-on-accent);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
}

a.login__submit {
    text-decoration: none;
}

.login__submit:hover {
    background: var(--btn-primary-hover);
    color: var(--text-on-accent);
}

.login__submit:active {
    background: var(--btn-primary-active);
}

.login__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.login__submit .material-symbols-rounded {
    font-size: 20px;
}

.login__submit:disabled:not(:has(.spinner)) {
    background: var(--surface-3);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* Loading: forms.js swaps the label for a spinner plus text. Here the text
   is dropped (font-size 0) and only the 18px spinner shows, in on-accent. */
.login__submit:has(.spinner) {
    font-size: 0;
    gap: 0;
    cursor: progress;
}

.login__submit .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(3, 19, 10, 0.3);
    border-top-color: var(--text-on-accent);
}

/* --- Legal and switch-account text --- */
.login__legal {
    margin: var(--space-6) 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.login__legal a,
.login__switch a {
    color: var(--text-primary);
    text-decoration: underline;
}

.login__switch {
    margin: var(--space-6) 0 0;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.login__switch-extra {
    display: block;
    margin-top: var(--space-2);
}

/* --- Brand panel --- */
.login__panel {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    padding: var(--space-12);
    background: var(--surface-1);
    border-left: 1px solid var(--border);
}

.login__card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background-color: #0c0c10;
    border: 1px solid var(--border-strong);
    border-radius: 32px;
    /* A faint indigo light from the top; the visual draws its own grid. */
    background-image: radial-gradient(120% 70% at 70% 0%, rgba(99, 102, 241, 0.08), transparent 60%);
}

/* The visual takes the room the copy does not need, so it is the focal
   point at every panel size (auth-visual.css scales to this box). */
.login__visual {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-6) var(--space-6) 0;
}

.login__copy {
    flex: none;
    position: relative;
    padding: var(--space-6) var(--space-12) var(--space-12);
    max-width: 560px;
}

.login__headline {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    text-wrap: balance;
}

.login__support {
    margin: var(--space-3) 0 0;
    max-width: 30em;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Narrower desktops: give the visual more of the panel. */
@media (max-width: 1280px) {
    .login__panel {
        padding: var(--space-6);
    }

    .login__visual {
        padding: var(--space-4) var(--space-4) 0;
    }

    .login__copy {
        padding: var(--space-4) var(--space-8) var(--space-8);
    }

    .login__headline {
        font-size: 1.625rem;
    }

    .login__support {
        font-size: 0.9375rem;
    }
}

/* Pagination dots: only rendered when there are two or more slides. */
.login__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.login__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
}

.login__dot.is-active {
    width: 24px;
    border-radius: 4px;
    background: var(--text-primary);
}

/* --- Below 960px: single centered column, no panel --- */
@media (max-width: 960px) {
    .login {
        grid-template-columns: minmax(0, 1fr);
    }

    .login__panel {
        display: none;
    }

    .login__form-col {
        padding: var(--space-6);
    }
}