/* ==========================================================================
   dissolveX landing — Sign-in and free-trial popup (auth_popup.js)
   The dialog is only a frame: what it shows is the page's own card — form on
   the left, product showcase on the right — styled by static/css/login.css,
   loaded when a popup first opens. Its widths follow the pages: the sign-in
   card is up to 960px wide and the trial card up to 1040px; below 880px both
   pages drop the showcase and narrow the card to 440px and 480px, and so
   does the popup.
   ========================================================================== */

.dx-auth-dialog {
    position: fixed;
    width: min(960px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: #0f172a;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.dx-auth-dialog[data-kind="trial"] {
    width: min(1040px, calc(100% - 32px));
}

.dx-auth-dialog[open] {
    animation: dx-auth-in 0.24s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.dx-auth-dialog::backdrop {
    background: rgba(11, 43, 32, 0.42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.dx-auth-dialog[open]::backdrop {
    animation: dx-auth-fade 0.24s ease-out both;
}

@keyframes dx-auth-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes dx-auth-fade {
    from { opacity: 0; }
}

/* The card fills the frame. On its page it is a pane of glass over the
   page's mint background; here the page behind is dimmed, so the glass is
   given that mint to sit on instead, as one solid colour: the card reads the
   same as it does on its page. */
.dx-auth-dialog .auth-card {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #f7fcfa;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(15, 57, 43, 0.18), 0 4px 14px rgba(15, 23, 42, 0.05);
}

/* The showcase list's bullets are small green dots on the pages; login.css
   draws them with a rule scoped to the pages' <body>, so it is repeated here
   with the same values. */
.dx-auth-dialog [class*="-check-icon"] {
    width: 8px !important;
    height: 8px !important;
    background: #10b981 !important;
    color: transparent !important;
    font-size: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16) !important;
    flex-shrink: 0 !important;
    margin-top: 6px !important;
    display: inline-block !important;
    border: none !important;
}

.dx-auth-dialog [class*="-check-icon"] svg {
    display: none;
}

/* Loading: a card-shaped placeholder the size the card will be. */
.dx-auth-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    border-radius: 20px;
    background: #f7fcfa;
    box-shadow: 0 24px 60px rgba(15, 57, 43, 0.18), 0 4px 14px rgba(15, 23, 42, 0.05);
}

.dx-auth-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(16, 185, 129, 0.2);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: dx-auth-spin 0.8s linear infinite;
}

@keyframes dx-auth-spin {
    to { transform: rotate(360deg); }
}

/* Close — in the card's top-right corner, clear of the showcase window. It
   stays there while a tall card (the trial form on a phone) scrolls under
   it; the negative bottom margin lays it over the card instead of above. */
.dx-auth-close {
    position: sticky;
    top: 12px;
    z-index: 2;
    display: flex;
    margin: 12px 12px -46px auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(15, 57, 43, 0.14);
    border-radius: 50%;
    background: #ffffff;
    color: #0b2b20;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 57, 43, 0.06);
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

@media (hover: hover) and (pointer: fine) {
    .dx-auth-close:hover {
        background: #eaf6f0;
        border-color: rgba(16, 185, 129, 0.38);
    }
}

.dx-auth-close:active {
    transform: scale(0.94);
}

.dx-auth-close:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
}

/* Reserve the close button's full width plus a gap. On phones the back link
   has its own row (login.css), so neither action can overlap the logo. */
.dx-auth-dialog .reset-top-action {
    box-sizing: border-box;
    padding-right: 36px;
}

@media (max-width: 880px) {
    .dx-auth-dialog .reset-top-action {
        padding-right: 40px;
    }
}

/* Icons in the form use the app's sprite classes (the sprite is copied in). */
.dx-auth-dialog .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.dx-auth-dialog .icon-sm {
    width: 14px;
    height: 14px;
}

.dx-auth-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.dx-auth-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The on-screen keyboard is up (auth_popup.js): the dialog sits at the top of
   the part of the screen still visible and is no taller than it; its content
   scrolls inside. --dx-vv-* are that visible area's top and height. */
.dx-auth-dialog.is-keyboard {
    inset: calc(var(--dx-vv-top, 0px) + 8px) 0 auto 0;
    margin: 0 auto;
    max-height: calc(var(--dx-vv-height, 100dvh) - 16px);
    animation: none;
}

/* iOS Safari zooms the page into any field under 16px when it is focused,
   which pushes the popup around on top of the keyboard. On touch screens the
   fields are 16px (0.9rem on the page), so it does not. */
@media (pointer: coarse) {
    .dx-auth-dialog input.auth-input {
        font-size: 16px;
    }
}

/* The pages go to one column here (login.css); the frame follows. */
@media (max-width: 880px) {
    .dx-auth-dialog {
        width: min(440px, calc(100% - 24px));
        max-height: calc(100dvh - 24px);
    }

    .dx-auth-dialog[data-kind="trial"] {
        width: min(480px, calc(100% - 24px));
    }

    .dx-auth-loading {
        min-height: 360px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dx-auth-dialog[open],
    .dx-auth-dialog[open]::backdrop {
        animation-duration: 1ms;
    }

    .dx-auth-spinner {
        animation-duration: 2s;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .dx-auth-dialog::backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(11, 43, 32, 0.6);
    }
}