/* =============================================================
   Product Master — Sign In  ·  "Aurora" direction
   Single centered card on a soft aurora canvas. Teal→indigo
   gradient accent. A segmented progress rail makes the two-step
   flow visible. Uses the Phoenix template font (inherited) — no
   external font imports.
   ============================================================= */

:root {
    /* Industrial teal → gauge blue theme (matches the rest of the app) */
    --pm-accent-1: #1a7f8e; /* teal */
    --pm-accent-2: #2c6fb3; /* gauge blue */
    --pm-accent-rgb: 26, 127, 142; /* teal, for rgba() shadows/rings */

    --pm-ink: var(--phoenix-emphasis-color, #0f172a);
    --pm-text: var(--phoenix-body-color, #1e293b);
    --pm-muted: var(--phoenix-secondary-color, #64748b);
    --pm-faint: var(--phoenix-tertiary-color, #94a3b8);
    --pm-line: var(--phoenix-border-color, #e6ebf2);
    --pm-field-bg: var(--phoenix-secondary-bg, #f8fafc);
    --pm-card: var(--phoenix-body-bg, #ffffff);
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- canvas ---------- */
html, body {
    height: 100%;
    overflow: hidden;
}

.pm-viewport {
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.75rem, 2.5vh, 1.5rem);
    background: #eef2f8;
    background-image: radial-gradient(40rem 24rem at 12% 8%, rgba(var(--pm-accent-rgb), .14), transparent 60%), radial-gradient(38rem 26rem at 90% 96%, rgba(var(--pm-accent-rgb), .10), transparent 62%), radial-gradient(30rem 20rem at 82% 4%, rgba(var(--pm-accent-rgb), .06), transparent 60%);
    position: relative;
}

    /* faint drifting aurora wash behind the card */
    .pm-viewport::before {
        content: "";
        position: absolute;
        inset: -20%;
        background: radial-gradient(28rem 20rem at 30% 40%, rgba(var(--pm-accent-rgb), .10), transparent 60%), radial-gradient(30rem 22rem at 70% 60%, rgba(var(--pm-accent-rgb), .07), transparent 62%);
        filter: blur(8px);
        animation: aurora 18s var(--ease) infinite alternate;
        pointer-events: none;
    }

@keyframes aurora {
    to {
        transform: translate(3%, -3%) scale(1.06);
    }
}

/* ---------- card ---------- */
.pm-card {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    background: var(--pm-card);
    border-radius: 1.5rem;
    padding: clamp(1.75rem, 4vh, 2.5rem) clamp(1.5rem, 4vw, 2.5rem) clamp(1.75rem, 4vh, 2.25rem);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03), 0 24px 60px -24px rgba(15, 23, 42, .28), 0 8px 24px -16px rgba(var(--pm-accent-rgb), .22);
    opacity: 0;
    transform: translateY(16px) scale(.985);
    animation: cardIn .6s var(--ease) forwards;
}

@keyframes cardIn {
    to {
        opacity: 1;
        transform: none;
    }
}

/* accent hairline along the very top of the card */
.pm-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 1.5rem 1.5rem 0 0;
    background: linear-gradient(90deg, var(--pm-accent-1), var(--pm-accent-2));
}

/* ---------- brand mark ---------- */
.pm-brandline {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: clamp(1.25rem, 3.5vh, 1.9rem);
}

.pm-logo-chip {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    background: #fff;
    border: 1px solid var(--pm-line);
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .2);
    overflow: hidden;
}

    .pm-logo-chip img {
        width: 1.9rem;
        height: auto;
        display: block;
    }

.pm-brandline .pm-brandname {
    font-weight: 800;
    font-size: 1rem;
    color: var(--pm-text);
    letter-spacing: -.01em;
    line-height: 1.1;
}

.pm-brandline .pm-brandsub {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pm-faint);
    margin-top: .1rem;
}

/* ---------- progress rail (the signature) ---------- */
.pm-rail {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: clamp(1.25rem, 3.5vh, 1.9rem);
}

.pm-rail-seg {
    flex: 1;
    height: .3rem;
    border-radius: 1rem;
    background: var(--pm-line);
    overflow: hidden;
    position: relative;
}

    .pm-rail-seg::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--pm-accent-1), var(--pm-accent-2));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .5s var(--ease);
    }

    .pm-rail-seg.active::after {
        transform: scaleX(1);
    }

.pm-rail-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pm-faint);
    white-space: nowrap;
    transition: color .3s var(--ease);
}

    .pm-rail-label.active {
        color: transparent;
        background: linear-gradient(90deg, var(--pm-accent-1), var(--pm-accent-2));
        -webkit-background-clip: text;
        background-clip: text;
    }

/* ---------- steps ---------- */
.pm-step {
    animation: stepIn .42s var(--ease) both;
}

@keyframes stepIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pm-step > * {
    animation: riseIn .5s var(--ease) both;
}

    .pm-step > *:nth-child(1) {
        animation-delay: .04s;
    }

    .pm-step > *:nth-child(2) {
        animation-delay: .10s;
    }

    .pm-step > *:nth-child(3) {
        animation-delay: .16s;
    }

    .pm-step > *:nth-child(4) {
        animation-delay: .22s;
    }

    .pm-step > *:nth-child(5) {
        animation-delay: .28s;
    }

    .pm-step > *:nth-child(6) {
        animation-delay: .34s;
    }

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pm-head {
    margin-bottom: clamp(1.1rem, 3vh, 1.6rem);
}

    .pm-head h3 {
        font-weight: 800;
        font-size: 1.5rem;
        letter-spacing: -.02em;
        color: var(--pm-text);
        margin: 0 0 .3rem;
    }

    .pm-head p {
        margin: 0;
        color: var(--pm-muted);
        font-size: .9rem;
    }

/* ---------- fields ---------- */
.pm-field {
    margin-bottom: clamp(.85rem, 2.2vh, 1.15rem);
}

    .pm-field .form-label {
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .02em;
        color: var(--pm-muted);
        margin-bottom: .4rem;
    }

    .pm-field .form-control {
        height: 2.9rem;
        border-radius: .8rem;
        border: 1px solid var(--pm-line);
        background: var(--pm-field-bg);
        font-size: .95rem;
        transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
    }

        .pm-field .form-control:hover {
            border-color: #cdd6e4;
        }

        .pm-field .form-control:focus {
            border-color: var(--pm-accent-1);
            background: #fff;
            box-shadow: 0 0 0 .2rem rgba(var(--pm-accent-rgb), .18);
        }

.form-icon-container {
    position: relative;
}

    .form-icon-container .form-icon {
        top: 50% !important;
        transform: translateY(-50%);
        margin-top: 0 !important;
        color: var(--pm-faint);
        transition: color .18s var(--ease);
    }

    .form-icon-container:focus-within .form-icon {
        color: var(--pm-accent-1) !important;
    }

.pm-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(1.05rem, 2.8vh, 1.5rem);
}

    .pm-meta .form-check-label {
        font-size: .84rem;
        color: var(--pm-muted);
    }

    .pm-meta a {
        font-weight: 700;
        font-size: .84rem;
        text-decoration: none;
        color: transparent;
        background: linear-gradient(90deg, var(--pm-accent-1), var(--pm-accent-2));
        -webkit-background-clip: text;
        background-clip: text;
    }

        .pm-meta a:hover {
            opacity: .8;
        }

    .pm-meta .form-check-input:checked {
        background-color: var(--pm-accent-1);
        border-color: var(--pm-accent-1);
    }

/* ---------- primary button ---------- */
.pm-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 2.95rem;
    font-weight: 700;
    letter-spacing: .01em;
    border: 0;
    border-radius: .8rem;
    color: #fff;
    background: linear-gradient(120deg, var(--pm-accent-1), var(--pm-accent-2));
    box-shadow: 0 12px 24px -12px rgba(var(--pm-accent-rgb), .5);
    transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
}

    .pm-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px -12px rgba(var(--pm-accent-rgb), .6);
        filter: brightness(1.05);
    }

    .pm-btn:active {
        transform: translateY(0);
    }

    .pm-btn:disabled {
        filter: grayscale(.35) brightness(.97);
        cursor: not-allowed;
        transform: none;
    }

    .pm-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 45%;
        height: 100%;
        background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
        transform: skewX(-20deg);
        transition: left .55s var(--ease);
    }

    .pm-btn:hover::after {
        left: 130%;
    }

.pm-fineprint {
    margin: 1rem 0 0;
    text-align: center;
    font-size: .72rem;
    letter-spacing: .02em;
    color: var(--pm-faint);
}

/* ---------- OTP: six cells with gradient underline ---------- */
.pm-otp-head {
    text-align: center;
    margin-bottom: 1.4rem;
}

.pm-otp-badge {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: .9rem;
    display: inline-grid;
    place-items: center;
    margin-bottom: .85rem;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(120deg, var(--pm-accent-1), var(--pm-accent-2));
    box-shadow: 0 10px 22px -10px rgba(var(--pm-accent-rgb), .5);
    animation: badgeFloat 3s var(--ease) infinite alternate;
}

@keyframes badgeFloat {
    to {
        transform: translateY(-4px);
    }
}

.pm-otp-head h4 {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pm-text);
    margin: 0 0 .3rem;
}

.pm-otp-head p {
    margin: 0;
    color: var(--pm-muted);
    font-size: .86rem;
}

    .pm-otp-head p b {
        color: var(--pm-text);
        font-weight: 700;
    }

.pm-otp-cells {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .6rem;
    margin: 0 auto 1.5rem;
    max-width: 19rem;
}
/* underline style: a soft-top slot with a thick baseline that fills on input */
.pm-otp-cell {
    aspect-ratio: 1 / 1.05;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pm-text);
    background: var(--pm-field-bg);
    border: 0;
    border-bottom: 2.5px solid var(--pm-line);
    border-radius: .55rem .55rem .2rem .2rem;
    caret-color: var(--pm-accent-2);
    transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
    -moz-appearance: textfield;
    appearance: textfield;
}

    .pm-otp-cell::-webkit-outer-spin-button,
    .pm-otp-cell::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .pm-otp-cell::placeholder {
        color: transparent;
    }

    .pm-otp-cell:hover:not(:focus) {
        background: #fff;
        border-bottom-color: color-mix(in srgb, var(--pm-accent-2) 45%, var(--pm-line));
    }

    .pm-otp-cell:focus {
        outline: none;
        background: #fff;
        border-bottom-color: var(--pm-accent-2);
        box-shadow: 0 3px 0 -1px rgba(var(--pm-accent-rgb), .35), 0 8px 16px -12px rgba(var(--pm-accent-rgb), .5);
    }
    /* filled: white slot, solid accent baseline, digit in accent */
    .pm-otp-cell.filled {
        background: #fff;
        border-bottom-color: var(--pm-accent-2);
        color: var(--pm-accent-2);
    }
/* full code: baselines light up together */
.pm-otp-cells.complete .pm-otp-cell {
    background: #fff;
    border-bottom-color: var(--pm-accent-2);
    box-shadow: 0 4px 12px -8px rgba(var(--pm-accent-rgb), .55);
    animation: seat .3s var(--ease) both;
}

    .pm-otp-cells.complete .pm-otp-cell:nth-child(1) {
        animation-delay: 0s;
    }

    .pm-otp-cells.complete .pm-otp-cell:nth-child(2) {
        animation-delay: .04s;
    }

    .pm-otp-cells.complete .pm-otp-cell:nth-child(3) {
        animation-delay: .08s;
    }

    .pm-otp-cells.complete .pm-otp-cell:nth-child(4) {
        animation-delay: .12s;
    }

    .pm-otp-cells.complete .pm-otp-cell:nth-child(5) {
        animation-delay: .16s;
    }

    .pm-otp-cells.complete .pm-otp-cell:nth-child(6) {
        animation-delay: .20s;
    }

@keyframes seat {
    50% {
        transform: translateY(-3px);
    }

    100% {
        transform: none;
    }
}

.pm-otp-cells.error {
    animation: shake .4s var(--ease) both;
}

    .pm-otp-cells.error .pm-otp-cell {
        border-bottom-color: #ef4444;
    }

@keyframes shake {
    10%, 90% {
        transform: translateX(-2px);
    }

    20%, 80% {
        transform: translateX(4px);
    }

    30%, 50%, 70% {
        transform: translateX(-6px);
    }

    40%, 60% {
        transform: translateX(6px);
    }
}

.pm-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--pm-muted);
    text-decoration: none;
    transition: color .16s var(--ease);
}

    .pm-back:hover {
        color: var(--pm-accent-2);
    }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    .pm-card, .pm-step, .pm-step > *, .pm-viewport::before,
    .pm-otp-badge, .pm-otp-cells.complete .pm-otp-cell, .pm-rail-seg::after {
        animation: none !important;
        transition: none !important;
    }

    .pm-btn::after {
        transition: none;
    }

    .pm-rail-seg.active::after {
        transform: scaleX(1);
    }
}