/* Ported from emsy (Laravel) resources/views/auth/login.blade.php at
   5cc6bd9 — the <style> block, with its Blade comments removed. Values are
   unchanged; every colour resolves through /css/tokens.css. */
/* D-210: the sign-in button's white text at AA — the gradient starts at the brand purple, not #8B6BF7 (3.79:1). */
:root { --gradient-cta: linear-gradient(135deg, var(--emsy-purple), var(--emsy-purple-deep)); }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
        min-height: 100%;
        font-family: var(--font-sans);
        background: var(--emsy-white);
        color: var(--text-strong);
        /* No overflow:hidden. It was here to stop the decorative panel bleeding,
           and it stopped the PAGE moving instead — in any direction, on every
           device. On a phone with the keyboard open that left the top of the
           form cut off and unreachable. The panel clips itself below, which is
           the only thing the kit's root overflow:hidden is actually for. */
    }

    /* ── Full screen wrapper ── */
    .login-wrap {
        display: flex;
        width: 100%;
        position: relative;
        /* min-height, not height: the box grows with its content, so a short
           screen scrolls instead of clipping.

           And dvh, with vh underneath for browsers that lack it. iOS Safari
           counts the toolbar in 100vh, so a "full height" box is taller than
           what you can see — the bottom of it sits under the toolbar, and with
           the old fixed height there was no way to scroll to it. dvh is the
           height actually on screen and shrinks when the keyboard opens. */
        min-height: 100vh;
        min-height: 100dvh;
        background: var(--emsy-white);
    }

    /* The mint→lavender wash behind both columns, 420 tall — removed (D-172): the Product Reference's sign-in is on a
       white ground since 07 Oct 2026. The element stays, empty, so the phone layout keeps its spacing. */
    .auth-wash {
        position: absolute; inset: 0; height: 420px;
        background: transparent;
        pointer-events: none;
    }

    /* ── Left side — the panel and its gutter ── */
    .login-left-bg {
        width: 50%;
        display: flex;
        align-items: stretch;
        padding: 20px;
        position: relative;
    }

    .login-left {
        flex: 1;
        border-radius: 32px;
        padding: clamp(24px, 3vw, 40px);
        position: relative;
        /* The one place the kit's root overflow:hidden belongs: clipping the
           two glows to the panel's rounded corners. */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: var(--emsy-purple-faint);
    }

    /* Owner, 12 Oct: the panel moves as the upsell card does (app-content.css, D-182) — two soft meshes of the same
       colours drifting under the words, slow, and still where the visitor asks for less motion. */
    .login-left { isolation: isolate; border: 1px solid var(--emsy-purple-mid); }
    .login-left::before, .login-left::after {
        content: '';
        position: absolute; z-index: -1; inset: -60% -30%;
        pointer-events: none;
        filter: blur(42px); opacity: .8;
        will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0);
    }
    .login-left::before {
        background:
            radial-gradient(38% 46% at 18% 30%, color-mix(in srgb, var(--emsy-purple-soft) 55%, transparent) 0%, transparent 70%),
            radial-gradient(34% 40% at 78% 24%, color-mix(in srgb, var(--tint-blue-fg) 26%, transparent) 0%, transparent 70%),
            radial-gradient(40% 44% at 62% 82%, color-mix(in srgb, var(--emsy-purple) 34%, transparent) 0%, transparent 72%);
        animation: login-mesh-a 22s ease-in-out infinite alternate;
    }
    .login-left::after {
        background:
            radial-gradient(36% 42% at 82% 70%, color-mix(in srgb, var(--tint-peach-soft-bg) 90%, transparent) 0%, transparent 70%),
            radial-gradient(32% 38% at 30% 78%, color-mix(in srgb, var(--emsy-purple-light) 95%, transparent) 0%, transparent 70%),
            radial-gradient(30% 36% at 50% 20%, color-mix(in srgb, var(--tint-mint) 70%, transparent) 0%, transparent 70%);
        animation: login-mesh-b 28s ease-in-out infinite alternate;
    }
    @keyframes login-mesh-a {
        0%   { transform: translate3d(-6%, -4%, 0) rotate(0deg) scale(1); }
        50%  { transform: translate3d(5%, 3%, 0) rotate(8deg) scale(1.08); }
        100% { transform: translate3d(-2%, 6%, 0) rotate(-6deg) scale(1.03); }
    }
    @keyframes login-mesh-b {
        0%   { transform: translate3d(5%, 4%, 0) rotate(0deg) scale(1.05); }
        50%  { transform: translate3d(-6%, -2%, 0) rotate(-9deg) scale(0.98); }
        100% { transform: translate3d(3%, -5%, 0) rotate(5deg) scale(1.1); }
    }
    @media (prefers-reduced-motion: reduce) { .login-left::before, .login-left::after { animation: none; } }

    .left-logo { display: flex; align-items: center; gap: 10px; position: relative; }
    .left-logo-mark {
        width: 40px; height: 40px;
        background: var(--emsy-purple); border-radius: 13px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; padding: 8px; overflow: hidden;
    }
    .left-logo-mark svg { width: 100%; height: 100%; fill: var(--emsy-white); }
    /* D-179/D-180 (owner): the wordmark half as large again, "by Synco" closer under it — as the app's sidebar. */
    .left-logo-name { display: block; height: 20px; width: auto; } /* D-180: the design system's drawn wordmark */
    .left-logo-tag { font-size: 10px; line-height: 1; color: var(--text-muted); margin-top: -3px; }
    .left-logo > .left-logo-mark + div, .auth-logo > .auth-logo-mark + div { transform: translateY(3px); } /* D-183: 3px lower, as the sidebar */

    /* D-173 (owner): the block sits in the middle of the panel, its lines still ranged left; the logo stays top left. */
    .left-content { position: relative; margin: auto; max-width: 400px; width: 100%; text-align: left; }

    .left-pill {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 7px 14px; border-radius: 999px;
        background: var(--emsy-white);
        border: 1px solid var(--emsy-purple-mid);
        color: var(--emsy-purple);
        font-size: 12.5px; font-weight: 500;
    }
    .left-pill i, .left-pill iconify-icon { width: 13px; height: 13px; }

    .left-headline {
        font-size: clamp(28px, 3vw, 40px);
        font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
        margin: 22px 0 16px;
    }
    .left-headline span { color: var(--emsy-purple); white-space: nowrap; }

    .left-lead { font-size: 15px; color: var(--text-body); line-height: 1.6; margin: 0; }

    .left-features { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
    .left-feature {
        display: flex; align-items: center; gap: 12px;
        background: var(--emsy-white); border-radius: 16px; padding: 10px 12px;
        font-size: 13.5px; color: var(--text-heading);
    }
    .left-feature-icon {
        width: 34px; height: 34px; border-radius: 11px;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .tint-blue  { background: var(--topbar-role-synco-bg); color: var(--topbar-role-synco-fg); }
    .tint-mint  { background: var(--topbar-role-owner-bg); color: var(--topbar-role-owner-fg); }
    .tint-peach { background: var(--tint-peach-soft-bg); color: var(--tint-peach-soft-fg); }

    .left-footer { position: relative; font-size: 12px; color: var(--text-muted); }

    /* ── Right panel ── */
    .login-right {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px;
        position: relative;
        /* Deliberately NOT overflow-y: auto. An inner scroller that also
           centres its child overflows in both directions, and the half above
           the top edge cannot be scrolled to — measured at -110px on a 320px
           tall screen, which is the heading and the email field gone. The
           document scrolls now, and centring is safe because the wrapper grows
           rather than being pinned to the viewport. */
    }

    .login-form-wrap { width: 100%; max-width: 380px; }

    .login-mobile-logo { display: none; }
    .auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
    .auth-logo-mark {
        width: 40px; height: 40px;
        background: var(--emsy-purple); border-radius: 13px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; padding: 8px; overflow: hidden;
    }
    .auth-logo-mark svg { width: 100%; height: 100%; fill: var(--emsy-white); }
    .auth-logo-name { display: block; height: 20px; width: auto; }
    .auth-logo-tag { font-size: 10px; line-height: 1; color: var(--text-muted); margin-top: -3px; }

    .form-title { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 8px; }
    .form-subtitle { font-size: 14px; color: var(--text-body); line-height: 1.5; margin: 0 0 30px; }

    .alert-error {
        background: var(--danger-bg); border: 1px solid var(--notice-danger-border); border-radius: 14px;
        padding: 11px 14px; font-size: 13px; color: var(--danger-fg);
        margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
    }
    .alert-error i, .alert-error iconify-icon { width: 14px; height: 14px; flex-shrink: 0; }

    .field { margin-bottom: 16px; }
    .field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-heading); margin-bottom: 6px; }
    .field-wrap { position: relative; }
    .field input {
        width: 100%; min-height: 48px; padding: 13px 16px;
        border: 1px solid transparent; border-radius: 14px;
        font-size: 14px; font-family: inherit; color: var(--text-strong);
        background: var(--emsy-purple-faint);
        transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
        outline: none;
    }
    .field input:focus {
        background: var(--emsy-white);
        border-color: var(--emsy-purple);
        box-shadow: var(--ring-focus-violet);
    }
    .field input.has-error { border-color: var(--danger); }
    .field-error { font-size: 12px; color: var(--danger-strong); margin-top: 5px; }
    .field input.with-icon { padding-right: 50px; }
    .field-icon {
        position: absolute; right: 6px; top: 4px;
        width: 40px; height: 40px;
        cursor: pointer; color: var(--text-body); background: none; border: none;
        display: flex; align-items: center; justify-content: center;
    }
    .field-icon i, .field-icon iconify-icon { width: 17px; height: 17px; }

    .field-meta {
        display: flex; align-items: center; justify-content: space-between;
        margin: -2px 0 22px;
    }
    .remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-body); cursor: pointer; }
    .remember input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--emsy-purple); cursor: pointer; }
    .forgot { font-size: 13px; color: var(--emsy-purple); text-decoration: none; font-weight: 500; }
    .forgot:hover { text-decoration: underline; }

    /* The committing button: a gradient pill with the arrow in its own disc. */
    .btn-login {
        width: 100%; min-height: 48px;
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 5px 5px 5px 18px;
        border: none; border-radius: 999px;
        background: var(--gradient-cta); color: var(--emsy-white);
        box-shadow: var(--shadow-cta);
        font-size: 14px; font-weight: 500; font-family: inherit;
        cursor: pointer;
    }
    a.btn-login { text-decoration: none; justify-content: center; padding: 5px 18px; }
    .btn-login-arrow {
        width: 38px; height: 38px; border-radius: 50%;
        background: rgba(255,255,255,.22);
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .btn-login-arrow i, .btn-login-arrow iconify-icon { width: 16px; height: 16px; }

    .form-divider {
        display: flex; align-items: center; gap: 12px;
        margin: 24px 0; color: var(--text-muted); font-size: 12px;
    }
    .form-divider::before, .form-divider::after {
        content: ''; flex: 1; height: 1px; background: var(--border-shell-hairline);
    }

    .social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    /* D-172: Google only (Apple is not offered), so the one pill takes the row. */
    .social-row.social-one { grid-template-columns: 1fr; }
    .social-btn {
        min-height: 48px; padding: 12px 18px;
        display: flex; align-items: center; justify-content: center; gap: 10px;
        border: 1px solid var(--emsy-purple-mid); border-radius: 999px;
        background: var(--emsy-white); color: var(--text-strong);
        font-size: 14px; font-weight: 500; font-family: inherit;
        cursor: pointer; text-decoration: none;
        transition: background var(--dur-base), border-color var(--dur-base);
    }
    .social-btn:hover { background: var(--emsy-purple-faint); border-color: var(--emsy-purple); }
    .social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    /* The Apple glyph is a single path with no brand colour of its own. */
    .social-btn.apple svg { fill: var(--text-strong); }

    .form-footer { text-align: center; font-size: 13px; color: var(--text-body); margin-top: 28px; }
    .form-footer a { color: var(--emsy-purple); font-weight: 500; text-decoration: none; }
    .form-footer a:hover { text-decoration: underline; }
    /* D-174: a form's button drawn as the footer's link (Sign out on the 2FA pages: a POST, so a button). */
    .form-footer .link-button { background: none; border: 0; padding: 0; min-height: 0; font: inherit; color: var(--emsy-purple); font-weight: 500; cursor: pointer; }
    .form-footer .link-button:hover { text-decoration: underline; }

    @media (max-width: 768px) {
        .login-left-bg { display: none; }
        /* auth-gutter: 24px */
        .login-right { width: 100%; padding: 78px 24px 40px; }
        .login-mobile-logo { display: block; }
        /* Owner, 11 Oct: the mark and wordmark centred over the centred title. */
        .login-mobile-logo .auth-logo { justify-content: center; }

        /* The kit's wash is shorter on a phone: 360, not the desktop's 420. */
        .auth-wash { height: 360px; }

        /* Centred, and one step down from the desktop's 30px. */
        .form-title { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; text-align: center; }
        .form-subtitle { font-size: 13.5px; color: var(--text-body); line-height: 1.5; text-align: center; margin: 8px 0 28px; }

        .field input { min-height: 46px; padding: 12px 14px; border-radius: var(--radius-14);
                       background: var(--emsy-purple-faint); border: 1px solid transparent; }
        .field input:focus { background: var(--emsy-white); border-color: var(--emsy-purple); box-shadow: var(--ring-focus-violet); }
        /* The eye disc is 40px in a control that is now 46, not 48. */
        .field-icon { top: 3px; }

        .field-meta { margin: -4px 0 18px; }
        .form-divider { margin: 22px 0; }
        .form-footer { margin-top: 26px; }
    }
    ::placeholder { opacity: 0.5 !important; }

/* D-224: a second footer line (Privacy policy) sits close under the first. */
.form-footer + .form-footer { margin-top: 8px; }
/* D-224: the privacy policy — reading text in the sign-in frame. */
.legal h3 { font-size: 15px; font-weight: 600; color: var(--text-strong, inherit); margin: 22px 0 6px; }
.legal p, .legal li { font-size: 13.5px; line-height: 1.6; color: var(--text-body); }
.legal p { margin: 0 0 8px; }
.legal ul { margin: 0 0 8px; padding-left: 18px; }
.legal li { margin-bottom: 4px; }
.legal a { color: var(--emsy-purple); }