/* ==========================================================================
   StratWitCRM - the pages people see before they are signed in (v2.3.3):
   sign in, forgot password, set a new password, the sign-in code.

   One shell for all four, so moving between them does not feel like leaving
   the site, and the same shell a whitelabel customer's people see on their own
   domain - with their logo and their colour, and none of StratWit's wording.

   Inter Tight is served from this server (assets/fonts, SIL Open Font
   Licence): no font CDN, the same rule the public signup page follows.
   ========================================================================== */

@font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/InterTight-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --auth-cream: #FAF8F3;
    --auth-ink:   #1A1A1A;
    --auth-muted: #5E5A52;
    --auth-line:  #E7E2D8;
    --auth-card:  #FFFFFF;
    /* Set per page from the workspace's own colour - StratWit's, or a
       whitelabel customer's on their domain. */
    --auth-brand: #16558f;
}

body.sw-auth {
    margin: 0;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--auth-ink);
    /* The flat colour is painted FIRST and never removed, so the page looks
       finished in the moment before the artwork arrives on a slow line, and
       looks finished for ever if it never does. */
    background: var(--auth-cream);
    -webkit-font-smoothing: antialiased;
    /* v2.7.1: was overflow: hidden (v2.3.4, for the drifting background),
       which also stopped a phone scrolling to the bottom of the form. The
       background layers are position: fixed, so they never make the page
       scroll; sideways is still clipped, up and down is not. */
    overflow-x: hidden;
    overflow-y: auto;
}

/* ---- the background, and its drift (v2.3.4) -----------------------------
   Two layers behind everything: the artwork, and a soft highlight over it.
   They move in OPPOSITE directions by different amounts as the pointer moves,
   which reads as depth; one layer sliding about on its own just looks loose.

   Each is 6% larger than the window, so a few pixels of travel can never
   expose an edge. The card never moves - only what is behind it.

   --auth-drift-x / y are set by the script in the shell. With no script, no
   pointer, or "reduce motion" turned on, they stay at zero and this is a still
   background. */
body.sw-auth::before,
body.sw-auth::after {
    content: '';
    position: fixed;
    inset: -3%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

body.sw-auth::before {
    background: var(--auth-cream) var(--auth-bg-image, none) center / cover no-repeat;
    transform: translate3d(calc(var(--auth-drift-x, 0px) * 1), calc(var(--auth-drift-y, 0px) * 1), 0);
}

body.sw-auth::after {
    background:
        radial-gradient(60rem 40rem at 12% -10%, rgba(255, 255, 255, .55), transparent 60%),
        radial-gradient(50rem 36rem at 105% 110%, rgba(245, 162, 30, .18), transparent 60%);
    transform: translate3d(calc(var(--auth-drift-x, 0px) * -0.45), calc(var(--auth-drift-y, 0px) * -0.45), 0);
}

/* Somebody who has asked their computer for less movement gets none, whatever
   the script does. */
@media (prefers-reduced-motion: reduce) {
    body.sw-auth::before,
    body.sw-auth::after { transform: none; }
}

.sw-auth-shell {
    width: 100%;
    max-width: 940px;
    background: var(--auth-card);
    border: 1px solid var(--auth-line);
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(26, 26, 26, .04), 0 24px 60px rgba(26, 26, 26, .10);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.sw-auth-side {
    background: var(--auth-brand);
    color: #fff;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.sw-auth-side h2 {
    font-weight: 200;
    font-size: 2.1rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
}
.sw-auth-side p { margin: 0; opacity: .92; line-height: 1.55; }
.sw-auth-side .sw-auth-workspace {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    opacity: .85;
    margin-bottom: 4px;
}

.sw-auth-main { padding: 44px 44px 36px; }

.sw-auth-logo { margin-bottom: 26px; display: flex; align-items: center; gap: 10px; }
.sw-auth-logo img { height: 34px; width: auto; max-width: 190px; }
.sw-auth-logo .sw-auth-mark {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--auth-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .95rem;
}
.sw-auth-logo .sw-auth-name { font-weight: 600; letter-spacing: -0.01em; }

.sw-auth-main h1 {
    font-weight: 300;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.sw-auth-main .auth-sub,
.sw-auth-main .sw-auth-sub { color: var(--auth-muted); margin-bottom: 22px; }

.sw-auth-main .form-label { font-weight: 500; font-size: .9rem; margin-bottom: 6px; }
.sw-auth-main .form-control {
    border-radius: 10px; border-color: var(--auth-line); padding: 11px 14px; font-family: inherit;
}
.sw-auth-main .form-control:focus {
    border-color: var(--auth-ink);
    box-shadow: 0 0 0 3px rgba(245, 162, 30, .25);
}
.sw-auth-main .form-text { color: var(--auth-muted); }

/* The one thing you press is the one orange thing on the page. */
.sw-auth-main .btn-primary,
.sw-auth-main .sw-auth-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; border: 0; border-radius: 999px;
    background: #F5A21E; color: var(--auth-ink);
    font-weight: 600; font-family: inherit; padding: 12px 22px; font-size: 1rem;
    text-decoration: none;
}
.sw-auth-main .btn-primary:hover, .sw-auth-main .btn-primary:focus,
.sw-auth-main .sw-auth-btn:hover, .sw-auth-main .sw-auth-btn:focus {
    background: #D98A0C; color: var(--auth-ink);
}

.sw-auth-main .alert { border-radius: 10px; }
.sw-auth-foot, .sw-auth-main .auth-foot {
    margin-top: 18px; text-align: center; font-size: .9rem; color: var(--auth-muted);
}
.sw-auth-foot a, .sw-auth-main .auth-foot a { color: var(--auth-ink); }

.sw-auth-legal {
    max-width: 940px; width: 100%; margin: 14px auto 0;
    text-align: center; color: var(--auth-muted); font-size: .8rem;
}

.sw-auth-main .ico { width: 18px; height: 18px; vertical-align: -3px; }

/* ---- phones (v2.7.1) --------------------------------------------------------
   The left panel is decoration; on a phone the form is the whole page.

   THIS BLOCK MUST STAY LAST IN THE FILE. Until v2.7.1 it sat ABOVE the main
   .sw-auth-side rule, which has the same specificity and so won: the panel
   was never hidden, and pushed the form below the bottom of the screen.

   Centred with margin: auto rather than the body's align-items, so a form
   taller than the screen starts at the top instead of being cut off there. */
@media (max-width: 860px) {
    body.sw-auth  { align-items: flex-start; padding: 16px 12px; }
    .sw-auth-shell { grid-template-columns: 1fr; max-width: 460px; margin: auto; }
    .sw-auth-side  { display: none; }
    .sw-auth-main  { padding: 32px 24px 28px; }
}