/* fsq-auth.css - the standalone authentication surface (COMPLIANCE #186, pattern EX-900; no shell, no top bar, no sidebar).
   Markup: /_ui/components/auth/_incAuthStart.cfm ... _incAuthEnd.cfm. Used by sign-in, signed-out, forgot-password and reset-password.
   Loaded through the optional variables.fsqHeadCss hook of /_ui/shell/_incHead.cfm, i.e. just before fsq-brand.css (brand stays last).

   Layout and proportions are patterned on mERP's login (centered 420px column, 16px card radius, top-anchored on phones);
   the CSS is FSQ-owned, nothing is included or linked from mERP (OD-01/OD-04).
   Rules (OD-12 / OD-13 / OD-14):
   - Everything is scoped under .fsq-auth (the page <main>) or .fsq-auth-body (the <body>), so nothing leaks into shell pages.
   - Brand colour comes ONLY from the fsq-brand.css tokens (--fsq-*). The canvas gradient is neutral grey (not brand colour);
     text greys are the V5 neutrals (interior style guide s7/s16: body #2c3a52, secondary #54627e, dark #e9edf5 / #9aa7bd);
     semantic colours are the V5 pairs.
   - Touch floor 44px (buttons and inputs 48px, language links 44px). Visible focus ring from --fsq-focus.
   - Motion: every animation, and every "starts hidden" state, lives ONLY inside prefers-reduced-motion: no-preference.
     Under reduce nothing animates and nothing starts hidden.
   - Dark mode: [data-merp-theme="dark"]. fsq-global.css already gives the card, inputs, labels and alerts their dark colours
     (with !important), so those are not repeated here.
   Entrance timeline (ends about 1.55s): lockup (fsqLockupIn in fsq-brand.css, 0 - 0.95s), tagline .50s, company .60s,
   card .75s, footer 1.05s; signed-out check icon 1.00s. */

/* The shell reserves 70px for a fixed top bar (fsq-global.css) and app.css adds 40px at the bottom; this surface needs neither.
   fsq-shell.css sets body padding-top from --merp-topnav-h/--merp-chiprow-h with !important, so zero those variables here
   (no !important needed; found by the #186 visual check: a 114px white band above the canvas). */
.fsq-auth-body { --merp-topnav-h: 0px; --merp-chiprow-h: 0px; padding-top: 0; padding-bottom: 0; margin: 0; }

.fsq-auth {
    --fsq-auth-ink: #2c3a52;          /* V5 body text; 8.67:1 on the darkest canvas grey #e0e0e0 */
    --fsq-auth-muted: #54627e;        /* V5 secondary text; 6.13:1 on white, 4.64:1 on #e0e0e0 */
    --fsq-auth-ok-bg: var(--bs-success-bg-subtle);
    --fsq-auth-ok-fg: var(--bs-success-text-emphasis);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem 0;
    overflow-x: clip;                 /* the lockup's scale-in entrance briefly widens the page at 375px (#186 visual check) */
    background: #f5f5f5;
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
    color: var(--fsq-auth-ink);
}
[data-merp-theme="dark"] .fsq-auth {
    --fsq-auth-ink: #e9edf5;          /* V5 dark title colour */
    --fsq-auth-muted: #9aa7bd;        /* V5 dark muted text */
    --fsq-auth-ok-bg: #14321f;        /* V5 dark success chip pair */
    --fsq-auth-ok-fg: #86efac;
    background: var(--merp-clr-body-bg, #15171c);
}
@supports (background: color-mix(in srgb, red, blue)) {
    [data-merp-theme="dark"] .fsq-auth {
        background: linear-gradient(135deg, var(--merp-clr-body-bg, #15171c) 0%, color-mix(in srgb, var(--merp-clr-body-bg, #15171c) 78%, #000) 100%);
    }
}

.fsq-auth-wrap {
    width: 100%;
    max-width: 420px;
    padding: 0 1rem;
    text-align: center;
}

/* Lockup: geometry stays exactly as fsq-brand.css sets it; only the spacing around it is adjusted. */
.fsq-auth .fsq-lockup { margin: 0 auto; }

/* Random tagline (own line beneath the lockup). Space is reserved so nothing jumps. */
.fsq-auth-tagline {
    max-width: 380px;
    min-height: 2.4rem;
    margin: .75rem auto 0;
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 300;
    letter-spacing: .04rem;
    color: var(--fsq-auth-ink);
    overflow-wrap: break-word;
}

/* Company slot (only rendered for a configured company host): secondary to the lockup */
.fsq-auth-company {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    margin-top: .75rem;
}
.fsq-auth-company img { max-height: 40px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
.fsq-auth-company-name { font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--fsq-auth-ink); overflow-wrap: break-word; max-width: 100%; }
.fsq-auth-company-tagline { font-size: .875rem; line-height: 1.3; color: var(--fsq-auth-muted); overflow-wrap: break-word; max-width: 100%; }

/* Card */
.fsq-auth-card {
    margin-top: 1.5rem;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
}
.fsq-auth-card .card-body { padding: 2rem; }
[data-merp-theme="dark"] .fsq-auth-card { border: 1px solid; }   /* colour comes from fsq-global.css (.card border-color) */

.fsq-auth-title { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--fsq-auth-ink); }
.fsq-auth-lede { margin: 0 0 1.25rem; font-size: .95rem; line-height: 1.45; color: var(--fsq-auth-muted); }
.fsq-auth .form-label { font-weight: 600; font-size: .9rem; }
.fsq-auth .form-text { font-size: .85rem; }

/* Inputs: V5 touch spec (48px, 1rem), 12px radius */
.fsq-auth .form-control {
    min-height: 48px;
    padding: .6rem .9rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    /* Field edge must meet WCAG 1.4.11 (3:1): the inherited light-grey border was 1.30:1 (#186 verifier D1). Neutral grey, not brand.
       #7C8698 on the white card = 3.67:1. The focus state below still switches to the brand focus colour. */
    border-color: #7C8698;
}
/* Dark: fsq-global.css sets the dark field border (#3D414B, 1.35:1) with !important, so this scoped override needs it too.
   #7A8396 = 3.61:1 on the dark field #2A2D35 and 4.2:1 on the dark card. Focus keeps the brand focus token. */
[data-merp-theme="dark"] .fsq-auth .form-control { border-color: #7A8396 !important; }
[data-merp-theme="dark"] .fsq-auth .form-control:focus { border-color: var(--fsq-focus) !important; }

/* Buttons: 48px pill; the brand fill/hover comes from fsq-brand.css (.btn-primary) */
.fsq-auth .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    min-width: 44px;
    padding: .6rem 1.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .02rem;
    white-space: normal;
}

/* Alerts: V5 pairs in light mode (fsq-global.css supplies the dark colours); 10px radius as on mERP's login */
.fsq-auth .alert { border-radius: 10px; font-size: .95rem; line-height: 1.45; }
.fsq-auth .alert-danger { --bs-alert-bg: #fdecec; --bs-alert-color: #b4322b; --bs-alert-border-color: #f2c6c2; }
.fsq-auth .alert-success { --bs-alert-bg: #e7f6ed; --bs-alert-color: #2e7d4f; --bs-alert-border-color: #cfe9da; }

/* Links inside the card */
.fsq-auth-links { margin: 1rem 0 0; text-align: center; }
.fsq-auth-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; }

/* Signed-out card */
.fsq-auth-center { text-align: center; }
.fsq-auth-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--fsq-auth-ok-bg);
    color: var(--fsq-auth-ok-fg);
    font-size: 2rem;
    line-height: 1;
}

/* Footer: copyright + EN / ES switch (the standalone page has no top bar, so the language switch lives here) */
.fsq-auth-footer { margin-top: 1.5rem; font-size: .875rem; color: var(--fsq-auth-muted); }
.fsq-auth-copy { margin: 0 0 .25rem; }
.fsq-auth-lang { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .25rem; }
.fsq-auth-lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 .9rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    color: var(--fsq-logo-sub);       /* deep teal on the light canvas, light teal on the dark one (brand tokens) */
}
.fsq-auth-lang a:hover { text-decoration: underline; }
.fsq-auth-lang a[aria-current="true"] {
    background: var(--fsq-selected-bg);
    color: var(--fsq-selected-fg);
    text-decoration: none;
    cursor: default;
}

/* Focus: always visible, brand focus tokens (teal in light, light teal in dark) */
.fsq-auth a:focus-visible,
.fsq-auth .btn:focus-visible,
.fsq-auth .form-control:focus-visible {
    outline: 3px solid var(--fsq-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 .25rem var(--fsq-focus-halo);
}

/* Phones: top-anchored so the on-screen keyboard does not cover the card; tighter card padding and tagline */
@media (max-width: 576px) {
    .fsq-auth { align-items: flex-start; padding-top: 8vh; }
    .fsq-auth-card .card-body { padding: 1.5rem; }
    .fsq-auth-tagline { max-width: 330px; font-size: 1rem; letter-spacing: .02rem; }
    .fsq-auth-title { font-size: 1.35rem; }
}

/* Motion: only when the person has not asked for reduced motion. Start states (opacity 0) exist only here. */
@media (prefers-reduced-motion: no-preference) {
    .fsq-auth-tagline { animation: fsqAuthTaglineIn .6s cubic-bezier(0.22, 1, 0.36, 1) .5s both; }
    .fsq-auth-company { animation: fsqAuthFadeUp .5s ease-out .6s both; }
    .fsq-auth-card    { animation: fsqAuthFadeUp .5s ease-out .75s both; }
    .fsq-auth-footer  { animation: fsqAuthFadeUp .5s ease-out 1.05s both; }
    .fsq-auth-check   { animation: fsqAuthPopIn .5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both; }
    .fsq-auth .btn    { transition: background-color .2s ease, border-color .2s ease, transform .15s ease; }
    .fsq-auth .btn:hover  { transform: translateY(-1px); }
    .fsq-auth .btn:active { transform: none; }
}
@keyframes fsqAuthFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fsqAuthTaglineIn { from { opacity: 0; transform: scale(1.22); } to { opacity: 1; transform: scale(1); } }
@keyframes fsqAuthPopIn { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }