/* ==========================================================================
   FC Login Dialog
   ========================================================================== */

@layer components {

    /* ------------------------------------------------------------------
       <dialog> element reset & positioning
       ------------------------------------------------------------------ */
    .fc-login-dialog {
        background: transparent;
        border: none;
        box-sizing: border-box;
        inline-size: min(560px, calc(100vw - 48px));
        margin: 0;
        max-block-size: calc(100vh - 40px);
        max-inline-size: min(560px, calc(100vw - 48px));
        opacity: 0;
        overflow: visible;
        padding: 0;
        position: fixed;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, calc(-50% - 12px)) scale(0.97);
        transition:
                opacity var(--transition-time) ease-in-out,
                transform var(--transition-time) ease-in-out,
                display var(--transition-time) allow-discrete,
                overlay var(--transition-time) allow-discrete;
        z-index: 10000;
    }

    .fc-login-dialog[open] {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .fc-login-dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
        transition:
                opacity var(--transition-time) ease-in-out,
                display var(--transition-time) allow-discrete,
                overlay var(--transition-time) allow-discrete;
    }

    .fc-login-dialog:not([open])::backdrop {
        opacity: 0;
    }

    /* ------------------------------------------------------------------
       Inner card
       ------------------------------------------------------------------ */
    .fc-login-dialog__inner {
        background-color: var(--color-white);
        border-radius: 16px;
        box-shadow:
                0 2px 4px -1px rgba(0, 0, 0, 0.06),
                0 24px 56px -12px rgba(0, 0, 0, 0.28);
        box-sizing: border-box;
        display: grid;
        gap: var(--size-24);
        max-block-size: calc(100vh - 40px);
        overflow: hidden auto;
        padding: 56px 64px 48px;
        position: relative;
        inline-size: 100%;
    }

    /* ------------------------------------------------------------------
       Top accent bar — brand mark before you even reach the button
       ------------------------------------------------------------------ */
    .fc-login-dialog__accent {
        background: linear-gradient(90deg, var(--color-green), hsl(86 90% 78%), var(--color-green));
        background-size: 200% 100%;
        block-size: 5px;
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute;
    }

    /* ------------------------------------------------------------------
       Close button
       ------------------------------------------------------------------ */
    .fc-login-dialog__close {
        align-items: center;
        background-color: var(--color-gray-95);
        block-size: 32px;
        border-radius: var(--radius-circle);
        color: var(--color-gray-50);
        display: grid;
        inline-size: 32px;
        justify-content: center;
        place-items: center;
        position: absolute;
        inset-block-start: var(--size-24);
        inset-inline-end: var(--size-20);
        transition:
                background-color var(--transition-time) ease-in-out,
                color var(--transition-time) ease-in-out;
    }

    .fc-login-dialog__close:hover,
    .fc-login-dialog__close:focus-visible {
        background-color: var(--color-gray-90);
        color: var(--color-gray-10);
    }

    .fc-login-dialog__close svg {
        display: block;
        inline-size: 18px;
    }

    /* ------------------------------------------------------------------
       Logo mark
       ------------------------------------------------------------------ */
    .fc-login-dialog__logo {
        display: grid;
        place-content: center;
        margin-block-end: var(--size-10);
    }

    .fc-login-dialog__logo-badge {
        align-items: center;
        background: radial-gradient(circle at 32% 28%, hsl(86 90% 82%), hsl(86 70% 90%) 60%, hsl(86 60% 92%));
        block-size: 64px;
        border-radius: var(--radius-circle);
        box-shadow: inset 0 0 0 1px hsl(86 60% 78%);
        color: hsl(86 65% 30%);
        display: grid;
        inline-size: 64px;
        justify-content: center;
    }

    .fc-login-dialog__logo-badge svg {
        inline-size: 30px;
    }

    /* ------------------------------------------------------------------
       Headings
       ------------------------------------------------------------------ */
    .fc-login-dialog__title {
        --title-font-size: var(--size-28);
        color: var(--color-gray-10);
        font-weight: var(--font-weight-bold);
        letter-spacing: -0.01em;
        text-align: center;
    }

    .fc-login-dialog__subtitle {
        color: var(--color-gray-50);
        font-size: var(--size-16);
        font-weight: var(--font-weight-semi-bold);
        letter-spacing: 0.1em;
        margin-block-start: calc(-1 * var(--size-14));
        margin-block-end: var(--size-14);
        text-align: center;
        text-transform: uppercase;
    }

    .fc-login-dialog__subtitle--instruction {
        font-weight: var(--font-weight-medium);
        letter-spacing: 0;
        line-height: 1.5;
        text-transform: none;
    }

    .fc-login-dialog__subtitle--instruction[hidden] {
        display: none;
    }

    /* ------------------------------------------------------------------
       Alert banner
       ------------------------------------------------------------------ */
    .fc-login-dialog__alert {
        border-radius: 4px;
        font-size: var(--size-14);
        padding: var(--size-10) var(--size-16);
    }

    .fc-login-dialog__alert[data-type='error'] {
        background-color: rgba(255, 0, 51, 0.08);
        border: 1px solid rgba(255, 0, 51, 0.3);
        color: var(--color-red);
    }

    .fc-login-dialog__alert[data-type='success'],
    .fc-login-dialog__alert[data-type='info'] {
        background-color: rgba(157, 224, 0, 0.1);
        border: 1px solid rgba(157, 224, 0, 0.4);
        color: hsl(86 70% 30%);
    }

    .fc-login-dialog__alert[hidden] {
        display: none;
    }

    /* ------------------------------------------------------------------
       Form fields
       ------------------------------------------------------------------ */
    .fc-login-dialog__form {
        display: grid;
        gap: var(--size-24);
        margin-block-start: var(--size-16);
    }

    .fc-login-dialog__field {
        display: grid;
        gap: var(--size-12);
    }

    .fc-login-dialog__field label {
        color: var(--color-gray-30);
        font-size: var(--size-16);
        font-weight: var(--font-weight-semi-bold);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .fc-login-dialog__field input {
        background-color: var(--color-gray-95);
        border: 1.5px solid var(--color-gray-85);
        border-radius: 10px;
        box-sizing: border-box;
        color: var(--color-gray-10);
        font-size: var(--size-16);
        inline-size: 100%;
        outline: none;
        padding: 17px var(--size-18) 17px 10px;
        transition:
                background-color var(--transition-time) ease-in-out,
                border-color var(--transition-time) ease-in-out,
                box-shadow var(--transition-time) ease-in-out;
    }

    .fc-login-dialog__field input::placeholder {
        color: var(--color-gray-70);
        font-size: var(--size-16);
    }

    .fc-login-dialog__field input:hover {
        border-color: var(--color-gray-70);
    }

    .fc-login-dialog__field input:focus {
        background-color: var(--color-white);
        border-color: var(--color-green);
        box-shadow: 0 0 0 4px hsl(86 100% 65% / 18%);
    }

    .fc-login-dialog__field input:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .fc-login-dialog__email-request {
        display: grid;
        gap: var(--size-24);
    }

    .fc-login-dialog__email-request[hidden] {
        display: none;
    }

    .fc-login-dialog__resend {
        align-items: center;
        background-color: var(--color-gray-95);
        border: 1px solid var(--color-gray-90);
        border-radius: 10px;
        color: var(--color-gray-45);
        display: flex;
        flex-wrap: wrap;
        font-size: var(--size-14);
        gap: var(--size-12);
        justify-content: space-between;
        padding: var(--size-12) var(--size-16);
    }

    .fc-login-dialog__resend[hidden] {
        display: none;
    }

    .fc-login-dialog__resend-text strong {
        color: var(--color-gray-20);
        font-weight: var(--font-weight-semi-bold);
    }

    .fc-login-dialog__resend-button {
        background: transparent;
        border: 0;
        color: hsl(86 65% 32%);
        cursor: pointer;
        font: inherit;
        font-weight: var(--font-weight-semi-bold);
        padding: 0;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .fc-login-dialog__resend-button:hover,
    .fc-login-dialog__resend-button:focus-visible {
        color: var(--color-gray-10);
    }

    .fc-login-dialog__resend-button:disabled {
        color: var(--color-gray-65);
        cursor: not-allowed;
    }

    .fc-login-dialog__password-wrap {
        display: grid;
        position: relative;
    }

    .fc-login-dialog__password-wrap input {
        padding-inline-end: 48px;
    }

    .fc-login-dialog__password-toggle {
        align-items: center;
        background: transparent;
        border: 0;
        color: var(--color-gray-55);
        cursor: pointer;
        display: grid;
        inline-size: 36px;
        inset-block: 0;
        inset-inline-end: 8px;
        justify-content: center;
        padding: 4px;
        position: absolute;
        transition:
                color var(--transition-time) ease-in-out,
                transform 150ms ease-in-out;
    }

    .fc-login-dialog__password-toggle:hover,
    .fc-login-dialog__password-toggle:focus-visible {
        color: var(--color-gray-20);
    }

    .fc-login-dialog__password-toggle:active {
        transform: scale(0.96);
    }

    .fc-login-dialog__eye-icon {
        font-size: var(--size-16);
        line-height: 1;
    }

    .fc-login-dialog__field-hint {
        color: var(--color-gray-55);
        font-size: var(--size-12);
        line-height: 1.4;
    }

    .fc-login-dialog__field-hint[hidden] {
        display: none;
    }

    .fc-login-dialog__field-error {
        color: var(--color-red);
        font-size: var(--size-12);
        line-height: 1.35;
    }

    .fc-login-dialog__field-error[hidden] {
        display: none;
    }

    .fc-login-dialog__field input.is-error {
        border-color: var(--color-red);
        box-shadow: 0 0 0 4px rgba(255, 0, 51, 0.12);
    }

    .fc-login-dialog__field input.is-valid {
        border-color: var(--color-green);
    }

    .fc-login-dialog__password-strength {
        display: grid;
        gap: 6px;
    }

    .fc-login-dialog__password-strength[hidden] {
        display: none;
    }

    .fc-login-dialog__strength-bar {
        display: grid;
        gap: 5px;
        grid-template-columns: repeat(4, 1fr);
    }

    .fc-login-dialog__strength-segment {
        background-color: var(--color-gray-90);
        block-size: 5px;
        border-radius: 999px;
    }

    .fc-login-dialog__strength-segment.is-filled {
        background-color: var(--color-green);
    }

    .fc-login-dialog__password-strength[data-strength='1'] .fc-login-dialog__strength-segment.is-filled {
        background-color: var(--color-red);
    }

    .fc-login-dialog__password-strength[data-strength='2'] .fc-login-dialog__strength-segment.is-filled,
    .fc-login-dialog__password-strength[data-strength='3'] .fc-login-dialog__strength-segment.is-filled {
        background-color: #f5b642;
    }

    .fc-login-dialog__strength-label {
        color: var(--color-gray-50);
        font-size: var(--size-12);
        font-weight: var(--font-weight-semi-bold);
        text-align: right;
    }

    /* ------------------------------------------------------------------
       Submit button
       ------------------------------------------------------------------ */
    .fc-login-dialog__submit {
        block-size: 50px;
        border-radius: 10px;
        box-shadow: 0 6px 16px -6px hsl(86 100% 45% / 45%);
        font-size: 20px;
        inline-size: 100%;
        justify-content: center;
        margin-block-start: var(--size-16);
        transition:
                background-color var(--transition-time) ease-in-out,
                box-shadow var(--transition-time) ease-in-out,
                transform 150ms ease-in-out;
    }

    .fc-login-dialog__submit:hover,
    .fc-login-dialog__submit:focus-visible {
        box-shadow: 0 10px 22px -6px hsl(86 100% 45% / 55%);
        transform: translateY(-1px);
    }

    .fc-login-dialog__submit:active {
        transform: translateY(0);
    }

    .fc-login-dialog__submit:disabled {
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.6;
        pointer-events: none;
        transform: none;
    }

    .fc-login-dialog__links {
        border-block-start: 1px solid var(--color-gray-90);
        color: var(--color-gray-50);
        font-size: var(--size-14);
        margin: var(--size-10) 0 0;
        padding-block: var(--size-24) var(--size-8);
        text-align: center;
    }

    .fc-login-dialog__link {
        color: var(--color-gray-30);
        font-weight: var(--font-weight-semi-bold);
        text-decoration: none;
    }

    .fc-login-dialog__link:hover,
    .fc-login-dialog__link:focus-visible {
        color: hsl(86 65% 32%);
        text-decoration: underline;
    }

    .fc-login-dialog__links-sep {
        color: var(--color-gray-80);
        padding-inline: 10px;
    }

    /* ------------------------------------------------------------------
       Auth wrap — pushes the whole block to the right.
       ------------------------------------------------------------------ */
    .fc-login-wrap {
        margin-inline-start: auto;
    }

    /* ------------------------------------------------------------------
       Secondary button — outlined pill
       ------------------------------------------------------------------ */
    .button-secondary {
        background-color: transparent;
        border: 2px solid var(--color-gray-70);
        color: var(--color-gray-20);
        transition:
                border-color var(--transition-time) ease-in-out,
                color var(--transition-time) ease-in-out;
    }

    .button-secondary:hover,
    .button-secondary:focus-visible {
        border-color: var(--color-gray-30);
        color: var(--color-gray-10);
    }

    /* ------------------------------------------------------------------
       Upgrade button
       ------------------------------------------------------------------ */
    .button-upgrade {
        background-color: transparent;
        border: 2px solid var(--color-green);
        color: var(--color-green);
        font-weight: var(--font-weight-semi-bold);
        transition:
                background-color var(--transition-time) ease-in-out,
                color var(--transition-time) ease-in-out;
    }

    .button-upgrade:hover,
    .button-upgrade:focus-visible {
        background-color: var(--color-green);
        color: var(--color-black);
    }

    @media (max-width: 30em) {
        .fc-login-dialog {
            inline-size: calc(100vw - 24px);
            max-block-size: calc(100vh - 24px);
            max-inline-size: calc(100vw - 24px);
        }

        .fc-login-dialog__inner {
            max-block-size: calc(100vh - 24px);
            padding: var(--size-40) var(--size-24) var(--size-32);
        }

        .fc-login-dialog__logo-badge {
            block-size: 56px;
            inline-size: 56px;
        }

        .fc-login-dialog__logo-badge svg {
            inline-size: 26px;
        }
    }
}

/* Keep the dialog card padding outside @layer so unlayered component resets
   such as training-report.css cannot zero it out. */
.fc-login-dialog__inner {
    padding: 56px 64px 48px;
}

@media (max-width: 30em) {
    .fc-login-dialog__inner {
        padding: var(--size-40) var(--size-24) var(--size-32);
    }
}

#fc-forgot-step2 .fc-login-dialog__field + .fc-login-dialog__field {
    margin-block-start: 20px;
}

#fc-forgot-reset {
    margin-block-start: 30px;
}

.fc-login-dialog .fc-login-dialog__field input {
    box-sizing: border-box;
    padding-inline-start: 10px;
}

.fc-login-dialog .fc-login-dialog__password-wrap input {
    padding-inline-end: 48px;
}

.fc-login-dialog .fc-login-dialog__password-toggle {
    box-sizing: border-box;
    padding: 4px;
}

.fc-login-dialog .fc-login-dialog__resend {
    padding: var(--size-12) var(--size-16);
}

.fc-login-dialog .fc-login-dialog__resend-button {
    padding: 0;
}