/* ------------------------------------------------------------------------
   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;
    }
}