/* ------------------------------------------------------------------------
   Sign-in and password screens.

   A separate file rather than a <style> block in each template, because both
   pages need the same rules and duplicating them inline is how two screens
   quietly drift apart.

   Every colour, radius and duration below comes from tokens.css. No raw hex
   values, per the rule stated at the top of that file: that is what keeps a
   rebrand a one-file change.

   These pages deliberately do NOT use layout.html. That fragment renders the
   sidebar, merchant block and notification badge, none of which mean anything
   to somebody who has not signed in.
   ------------------------------------------------------------------------ */

/* --- Split shell -------------------------------------------------------
   Brand panel on the left, form on the right. One grid declaration, and a
   single media query collapses it to one column on small screens.
   ---------------------------------------------------------------------- */

.auth {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    font-family: var(--font-primary);
    color: var(--text-body);
}

/* --- Left: brand panel ------------------------------------------------- */

.auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    /* On a column flex container these two axes are the other way round from
       what the names suggest, which is the mistake this file used to contain.
       justify-content works down the column (vertical), align-items works
       across it (horizontal). Only the first was set, so the content block
       centred vertically but stayed pinned to the left edge — leaving a wide
       band of empty navy to its right on a large monitor. */
    justify-content: center;
    align-items: center;
    padding: 56px 64px;
    background: var(--fv-navy);
    color: var(--fv-white);
    overflow: hidden;
}

/* Thin gold rule down the seam between the panels. */
.auth__brand::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom,
                var(--fv-yellow) 0%,
                var(--fv-gold) 45%,
                rgba(254, 198, 1, 0) 100%);
}

/* width:100% as well as max-width, so the block is a predictable 420px rather
   than shrink-to-fit. A shrink-to-fit box would be as wide as its longest
   line, so the headline, the paragraph and the bullets would each start at a
   slightly different place as the copy changed. A fixed width gives every line
   the same left edge. */
.auth__brand-inner {
    position: relative;   /* above the bloom */
    width: 100%;
    max-width: 420px;
}

/* The logo, substantially larger than before.
   clamp() scales it with the viewport instead of stepping at breakpoints:
   112px on a small screen, up to 168px on a wide one. The source image is
   1788px square, so it stays sharp on any display. */
.auth__logo {
    display: block;
    width: clamp(112px, 13vw, 168px);
    height: auto;
    margin-bottom: 36px;
}

.auth__headline {
    margin: 0 0 14px 0;
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.2;
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    color: var(--fv-white);
}

.auth__blurb {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fv-slate-400);
}

.auth__points {
    margin: 34px 0 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 13px;
}

.auth__points li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    color: var(--fv-slate-200);
}

.auth__points i {
    flex-shrink: 0;
    width: 20px;
    color: var(--fv-gold);
}

/* --- Right: form panel ------------------------------------------------- */

.auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: var(--surface-subtle);
}

.auth__form-wrap {
    width: 100%;
    max-width: 392px;
}

/* Shown only when the brand panel is hidden on narrow screens, so the page
   never loses its identity entirely. */
.auth__logo-compact {
    display: none;
    width: 84px;
    height: auto;
    margin: 0 auto 26px auto;
}

.auth__title {
    margin: 0 0 7px 0;
    font-size: 25px;
    font-weight: var(--weight-bold);
    color: var(--text-heading);
    letter-spacing: -0.01em;
}

.auth__subtitle {
    margin: 0 0 28px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* --- Fields ------------------------------------------------------------ */

.auth__field {
    margin-bottom: 17px;
}

.auth__field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

/* Wrapper so an icon can sit inside the input's box. */
.auth__control {
    position: relative;
}

.auth__control i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--fv-slate-400);
    pointer-events: none;   /* never swallow a click meant for the field */
    transition: color var(--motion-fast) var(--ease);
}

/* Extends .input from app.css rather than restyling it: same height and
   radius as every other field in the portal, plus room for the icon. */
.auth__control .input {
    height: 46px;
    padding-left: 38px;
}

.auth__control .input:focus {
    /* A ring rather than a thicker border, so focus does not shift layout. */
    box-shadow: 0 0 0 3px rgba(15, 23, 42, .10);
}

.auth__control .input:focus + i,
.auth__control .input:not(:placeholder-shown) + i {
    color: var(--fv-navy);
}

.auth__hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* --- Submit ------------------------------------------------------------ */

.auth__submit {
    width: 100%;
    height: 46px;
    justify-content: center;
    margin-top: 8px;
    font-size: 15px;
    background: var(--fv-navy);
    color: var(--fv-white);
    border-radius: var(--radius-input);
}

.auth__submit:hover {
    background: var(--fv-navy-800);
}

/* Press feedback, and a visible focus ring for keyboard users. */
.auth__submit:active {
    transform: translateY(1px);
}

.auth__submit:focus-visible {
    outline: 2px solid var(--fv-gold);
    outline-offset: 2px;
}

/* --- Messages ----------------------------------------------------------
   Both use a left border rather than a full tint: it reads as a status
   marker instead of competing with the form for attention.
   --------------------------------------------------------------------- */

.auth__message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.5;
}

.auth__message i {
    flex-shrink: 0;
    margin-top: 1px;
}

.auth__message--error {
    background: var(--state-danger-bg);
    border-left: 3px solid var(--fv-danger);
    color: var(--text-body);
}

.auth__message--error i {
    color: var(--fv-danger);
}

.auth__message--notice {
    background: var(--state-success-bg);
    border-left: 3px solid var(--fv-success);
    color: var(--text-body);
}

.auth__message--notice i {
    color: var(--fv-success);
}

/* --- Footer ------------------------------------------------------------ */

.auth__foot {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* "Sign out instead" on the password screen. A form, because logout is a
   CSRF-protected POST and a link cannot carry the token. */
.auth__escape {
    margin-top: 18px;
    text-align: center;
}

.auth__escape button {
    background: none;
    border: none;
    padding: 5px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.auth__escape button:hover {
    color: var(--text-heading);
}

/* --- Narrow screens ----------------------------------------------------
   Below 860px the brand panel is dropped rather than stacked. Stacking put
   a tall navy block above the form and pushed the fields off-screen on a
   phone, which is worse than losing the decoration.
   --------------------------------------------------------------------- */

@media (max-width: 860px) {
    .auth {
        grid-template-columns: 1fr;
    }

    .auth__brand {
        display: none;
    }

    .auth__logo-compact {
        display: block;
    }

    .auth__panel {
        padding: 32px 20px;
        background: var(--surface-card);
    }
}

/* Respect a reduced-motion preference: drop the press transform. */
@media (prefers-reduced-motion: reduce) {
    .auth__submit:active {
        transform: none;
    }
}

/* ========================================================================
   FvOnboard additions
   ------------------------------------------------------------------------
   Everything above this line is the merchant portal's auth.css, copied
   unchanged so the two sign-in screens cannot drift. Nothing above is edited
   here: when the portal's copy changes, this file is replaced from it and
   this block is re-appended.

   Three things differ on this side, and each needs a rule rather than an
   edit upstream.
   ======================================================================== */

/* ---- 1. Let the page be as tall as it needs ---------------------------
   style.css pins html and body to height:100% with overflow:hidden, so the
   app shell scrolls its own content pane and the window never scrolls. That
   is right for every screen behind the login and wrong for this one: the
   .auth grid is min-height:100vh, and below 860px the form is taller than
   the viewport. With the window unable to scroll, the sign-in button would
   sit below the fold with no way to reach it.

   Scoped to the class on <body> in login.html so no other screen is
   affected.
   --------------------------------------------------------------------- */
body.auth-page,
html:has(body.auth-page) {
    height: auto;
    min-height: 100%;
    overflow: auto;
}

/* ---- 2. A self-sufficient button --------------------------------------
   In the portal .auth__submit is a modifier: the element also carries .btn,
   which supplies the box (inline-flex, height, padding, border, weight,
   transition) from app.css. There is no app.css here, and Bootstrap's .btn
   is the thing this migration is working away from, so the box is declared
   here instead.

   The values are copied from the portal's .btn so the two buttons are the
   same object, not two buttons that happen to look similar.
   --------------------------------------------------------------------- */
.auth__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: inherit;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease),
                border-color var(--motion-fast) var(--ease),
                transform var(--motion-fast) var(--ease);
}

/* An <a>, not a <button>: OAuth begins with a GET to the authorization
   endpoint. Anchors inherit no colour, so it is set explicitly and kept on
   hover — the default link blue would arrive on top of navy otherwise. */
.auth__submit,
.auth__submit:hover,
.auth__submit:focus {
    color: var(--fv-white);
}

/* ---- 3. The Microsoft mark --------------------------------------------
   Four squares in Microsoft's own colours. They are not ours to restyle:
   the brand guidelines require the mark unaltered, and a merchant
   recognises it faster than they read the label. It is the one piece of
   colour left on this page, which is the point — everything competing with
   it has gone.
   --------------------------------------------------------------------- */
.auth__msmark {
    display: inline-flex;
    flex-shrink: 0;
}