/* Work Tracking — the four anonymous account screens (Login, SignUp, ForgotPassword,
   ResetPassword). New in the standalone product; QHRM owned the login page before.

   Layout is a two-pane split declared here and framed by LoginLayout.razor: a gradient
   brand panel on the left, the form on the right. Everything colour-wise comes from the
   shell tokens in _PbLayout.css, so the screen belongs to the product rather than to
   QHRM — except inside the brand panel, which is deliberately dark in BOTH themes and
   therefore hard-codes its own light-on-dark palette.

   Loaded after _PbStyles.css, so the #pbApp overrides below win on equal specificity. */

/* ══ Split shell ══════════════════════════════════════════════ */
.pb-shell.pb-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100svh;   /* mobile browsers: keep the URL bar out of the maths */
}

/* ══ Brand panel ══════════════════════════════════════════════ */
.pb-auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 44px 52px;
    color: #eaecff;
    background: linear-gradient(158deg, #171a3a 0%, #232a86 46%, #3d55e0 100%);
    isolation: isolate;
}

/* Two soft blooms and a hairline grid. Purely decorative: it gives the flat gradient
   somewhere for the eye to land without adding an image to download. */
.pb-auth-glow {
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        radial-gradient(38% 34% at 78% 16%, rgba(125,123,255,.55) 0%, transparent 70%),
        radial-gradient(44% 40% at 12% 88%, rgba(45,212,164,.28) 0%, transparent 72%);
    filter: blur(6px);
}

.pb-auth-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
            mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}

/* Width-driven, like the sidebar lockup — the artwork is ~3.95:1 so height follows.
   Only the white variant is used here; the panel is dark in both themes. */
.pb-auth-logo { width: 194px; max-width: 60%; line-height: 0; }
.pb-auth-logo img { width: 100%; height: auto; display: block; }

.pb-auth-pitch { max-width: 30rem; }

.pb-auth-headline {
    margin: 0 0 14px;
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.pb-auth-lede {
    margin: 0 0 30px;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(234,236,255,.76);
}

.pb-auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.pb-auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(234,236,255,.74);
}

.pb-auth-points strong { color: #ffffff; font-weight: 600; }

.pb-auth-ico {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #ffffff;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.16);
}

.pb-auth-foot { font-size: 12px; color: rgba(234,236,255,.5); }

/* ══ Form pane ════════════════════════════════════════════════ */
.pb-auth-main {
    position: relative;
    display: flex;
    background: var(--surface);
}

.pb-auth-theme {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
}

/* The wrapper centres whatever form the page renders; the pane itself is the surface,
   so nothing here draws card chrome on a wide screen. */
/* #pbApp carries two in-app defaults that do not belong on an account screen: a --bg
   fill, which would grey out the pane and flatten the inputs sitting on it, and a
   calc(100vh - 53px) min-height reserving a topbar this layout never renders. */
#pbApp.pb-login-wrap {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
}

.pb-login-card { width: 100%; max-width: 384px; }

/* The folded-away lockup — only shown once the brand panel is gone (see the media query). */
.pb-login-mark { display: none; width: 176px; margin: 0 0 28px; line-height: 0; }
.pb-login-mark img { width: 100%; height: auto; display: block; }
.pb-login-mark .pb-mark-dark { display: none; }
.pb-shell.pb-dark .pb-login-mark .pb-mark-light { display: none; }
.pb-shell.pb-dark .pb-login-mark .pb-mark-dark { display: block; }

.pb-auth-title {
    margin: 0 0 7px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
}

.pb-auth-sub {
    margin: 0 0 26px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-2);
}

/* ── Fields ─────────────────────────────────────── */
#pbApp .pb-login-card .pb-field { margin-bottom: 16px; }

#pbApp .pb-login-card .pb-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

#pbApp .pb-login-card .pb-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text);
}

#pbApp .pb-login-card .pb-field-aux {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    text-decoration: none;
}

#pbApp .pb-login-card .pb-field-aux:hover { color: var(--accent); text-decoration: underline; }

/* Taller than the in-app inputs on purpose: this is the only thing on the screen and
   these are the two hardest fields in the product to type on a phone. */
#pbApp .pb-login-card .pb-input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: border-color .14s, box-shadow .14s, background .14s;
}

#pbApp .pb-login-card .pb-input::placeholder { color: var(--text-3); }

#pbApp .pb-login-card .pb-input:hover { border-color: var(--border-2); }

#pbApp .pb-login-card .pb-input:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-soft);
}

/* Password reveal — sits inside the field's padding box. tabindex=-1 in the markup keeps
   it out of the tab run between the password and the submit button. */
#pbApp .pb-login-card .pb-input-wrap { position: relative; }
#pbApp .pb-login-card .pb-input-wrap .pb-input { padding-right: 42px; }

#pbApp .pb-login-card .pb-reveal {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: color .12s, background .12s;
}

#pbApp .pb-login-card .pb-reveal:hover { color: var(--text); background: var(--surface-3); }
#pbApp .pb-login-card .pb-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Default state is "password hidden", so the eye shows with a slash through it;
   pressing the button flips to the plain eye. */
.pb-reveal .pb-eye-off { display: inline; }
.pb-reveal[aria-pressed="true"] .pb-eye-off { display: none; }

/* ── Remember me ────────────────────────────────── */
#pbApp .pb-login-card .pb-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

#pbApp .pb-login-card .pb-check input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ── Submit ─────────────────────────────────────── */
#pbApp .pb-login-card .pb-login-submit,
#pbApp .pb-login-card button[type=submit],
#pbApp .pb-login-card .pb-btn.pri {
    width: 100%;
    height: 44px;
    margin-top: 20px;
    padding: 0 16px;
    justify-content: center;
    font-size: 14px;
    border-radius: 10px;
}

#pbApp .pb-login-card .pb-login-alt {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--text-2);
    text-align: center;
}

#pbApp .pb-login-card a { color: var(--accent); font-weight: 500; }

/* ── Alert ──────────────────────────────────────── */
#pbApp .pb-login-card .pb-alert.err,
.pb-alert.err {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid var(--danger-soft);
    background: var(--danger-soft);
    color: var(--danger-text);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 18px;
}

.pb-alert.err svg { flex-shrink: 0; margin-top: 1px; }

.pb-shell.pb-dark .pb-alert.err { border-color: rgba(241,103,92,.34); }

/* ══ Folded layout ════════════════════════════════════════════
   Below 960px the brand panel would squeeze the form to nothing, so it collapses to a
   short header strip: the gradient and the lockup survive, the pitch does not. */
@media (max-width: 960px) {
    .pb-shell.pb-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

    .pb-auth-brand {
        padding: 26px 24px;
        gap: 0;
        justify-content: center;
        min-height: 96px;
    }

    .pb-auth-brand::after { display: none; }
    .pb-auth-pitch, .pb-auth-foot { display: none; }
    .pb-auth-logo { width: 168px; }
    #pbApp.pb-login-wrap { padding: 40px 24px 56px; }
}

/* Under 560px the strip is redundant — the lockup moves into the form column and the
   whole screen becomes one column of content. */
@media (max-width: 560px) {
    .pb-auth-brand { display: none; }
    .pb-shell.pb-auth { grid-template-rows: 1fr; }
    #pbApp.pb-login-wrap { align-items: flex-start; padding: 52px 20px 40px; }
    .pb-login-mark { display: block; }
    .pb-auth-title { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    #pbApp .pb-login-card .pb-input,
    #pbApp .pb-login-card .pb-reveal { transition: none; }
}