*,
*::before,
*::after {
    box-sizing: border-box;
}

button {
    outline: none;
}

.form-wrapper {
    color: black;
}

.forms-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-title {
    font-size: 32px;
    letter-spacing: 1px;
    color: #fff;
}

.forms {
    display: flex;
    align-items: flex-start;
    margin-top: 150px;
}

.form-wrapper {
    animation: hideLayer .3s ease-out forwards;
    pointer-events: none;
}

.form-wrapper.is-active {
    animation: showLayer .3s ease-in forwards;
    pointer-events: unset;
}

@keyframes showLayer {
    50% {
        z-index: 1;
    }
    100% {
        z-index: 1;
    }
}

@keyframes hideLayer {
    0% {
        z-index: 1;
    }
    49.999% {
        z-index: 1;
    }
}
.logo {
    display: block;
    /* This was an <h3> and is a <span> now (a wordmark is not a heading); these two
       carry over the heading reboot metrics the tag change dropped. */
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #7A7878;
    text-align: center;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 27px;
    margin-top: 10px;
    margin-left: 20%;
    font-weight: 400;
}

.logo span {
    color: var(--surface-subtle);
    font-weight: 600;
}

.login-with-google-btn {
    width: 100%;
    transition: background-color .3s, box-shadow .3s;
    padding: 12px 16px 12px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    color: #757575;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    background-image: url('./imgs/google-icon.svg');
    background-size: 27px;
    background-color: white;
    background-repeat: no-repeat;
    background-position: 12px 11px;
}

.login-with-google-btn:hover {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
}

.login-with-google-btn:active {
  background-color: #EEEEEE;
}

.login-with-google-btn:focus {
  outline: none;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #C8DAFC;
}

.login-with-google-btn:disabled {
  filter: grayscale(100%);
  background-color: #EBEBEB;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
  cursor: not-allowed;
}


.google-startup-container {
  position: fixed;
  bottom: 10px;
  right: 20px;
  padding: 10px;
  text-align: center;
  z-index: -1;
}

.NSF-container {
  position: fixed;
  bottom: 100px;
  right: 20px;
  padding: 10px;
  text-align: center;
  z-index: -1;
}

.NSF-logo {
  height: 50px;
  margin-right: 10px;
}

.google-startup-logo {
  height: 30px;
  margin-right: 10px;
}

.google-startup-text {
  font-size: 12px;
}
.switcher {
    pointer-events: auto;
    position: relative;
    cursor: pointer;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    font-family: inherit;
    font-size: 16px;
    letter-spacing: .5px;
    color: #323232;
    background-color: transparent;
    border: none;
    outline: none;
    transform: translateX(0);
    transition: all .3s ease-out;
}

.form-wrapper.is-active .switcher-login {
    color: black;
    transform: translateX(90px);
}

.form-wrapper.is-active .switcher-signup {
    color: black;
    transform: translateX(-90px);
}

.underline {
    position: absolute;
    bottom: -5px;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    width: 100%;
    height: 2px;
}

.underline::before {
    content: '';
    position: absolute;
    top: 0;
    left: inherit;
    display: block;
    width: inherit;
    height: inherit;
    background-color: currentColor;
    transition: transform .2s ease-out;
}

.switcher-login .underline::before {
    transform: translateX(101%);
}

.switcher-signup .underline::before {
    transform: translateX(-101%);
}

.form-wrapper.is-active .underline::before {
    transform: translateX(0);
}

.signup-error {
    /* Pure red is 4.00:1 on white, under 1.4.3. --danger is 7.25:1. */
    color: var(--danger);
    font-size: 14px;
    margin-top: 5px;
}


.form-login {
    animation: hideLogin .3s ease-out forwards;
}

.form-wrapper.is-active .form-login {
    animation: showLogin .3s ease-in forwards;
}

@keyframes showLogin {
    0% {
        background: #fff;
        transform: translate(40%, 10px);
    }
    50% {
        transform: translate(0, 0);
    }
    100% {
        background: #fff;
        transform: translate(35%, -20px);
    }
}

@keyframes hideLogin {
    0% {
        background: #fff;
        transform: translate(35%, -20px);
    }
    50% {
        transform: translate(0, 0);
    }
    100% {
        background: var(--border-color);
        transform: translate(40%, 10px);
    }
}

.form-signup {
    animation: hideSignup .3s ease-out forwards;
}

.form-wrapper.is-active .form-signup {
    animation: showSignup .3s ease-in forwards;
}

@keyframes showSignup {
    0% {
        background: #fff;
        transform: translate(-40%, 10px) scaleY(.8);
    }
    50% {
        transform: translate(0, 0) scaleY(.8);
    }
    100% {
        background-color: #fff;
        transform: translate(-35%, -20px) scaleY(1);
    }
}

@keyframes hideSignup {
    0% {
        background-color: #fff;
        transform: translate(-35%, -20px) scaleY(1);
    }
    50% {
        transform: translate(0, 0) scaleY(.8);
    }
    100% {
        background: var(--border-color);
        transform: translate(-40%, 10px) scaleY(.8);
    }
}

.form fieldset {
    position: relative;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: all .3s ease-out;
}

.form-login fieldset {
    transform: translateX(-50%);
}

.form-signup fieldset {
    transform: translateX(50%);
}

.form-wrapper.is-active fieldset {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .4s ease-in, transform .35s ease-in;
}

.input-block {
    margin-bottom: 20px;
}

.input-block label {
    font-size: 14px;
    /*color: #a1b4b4;*/
    color: black
}

.disclaimer {
    color: #465151;
}

.disclaimer a {
    color: var(--link-color);
}

.input-block input {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 16px;
    line-height: 40px;
    color: #3b4465;
    background: #eef9fe;
    /* Was #cddbef: 1.40:1 against the white card, so the field's boundary was effectively
       invisible -- WCAG 1.4.11 (AA) wants 3:1 for the visual boundary of a form control.
       #7590b6 is the same blue, darkened to 3.27:1 on white / 3.06:1 on the field fill. */
    border: 1px solid #7590b6;
    border-radius: 2px;
}

.input-block input:disabled {
    background: var(--surface-subtle);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* The browser default placeholder grey lands ~4.30:1 on the #eef9fe fill, just under 1.4.3. */
.input-block input::placeholder {
    color: #616a73;
    opacity: 1;
}

.form-wrapper.is-active .form [type='submit'] {
    opacity: 1;
    transform: translateX(0);
    /* `all .4s` here is what a hover actually got -- this rule outranks the base one --
       so the button took a measured ~380ms to finish changing colour. The .4s belongs to
       the form's reveal (opacity/transform), not to hover, so name the properties instead
       of transitioning everything. Colour moves at the 0.12s components.css uses for
       interactive state (`.btn`, `.dropdown-item`); the reveal is untouched. */
    transition: opacity .4s ease-in, transform .4s ease-in,
                background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn-login {
    color: #a7e245;
    background: #a7e245;
    transform: translateX(-30%);
}

.btn-signup {
    color: #a7e245;
    background: #fbfdff;
    box-shadow: inset 0 0 0 2px #a7e245;
    transform: translateX(30%);
}

.form {
    overflow: hidden;
    min-width: 260px;
    margin-top: 50px;
    padding: 30px 25px;
    border-radius: 5px;
    transform-origin: top;
}

/* Lauren's "Update styling on Login page" card: the Sign In button should be blue with
   a hover, per the style guide. It had no background of its own at all -- the grey was
   #efefef, the browser's default for <input type=submit> -- so it read as a secondary
   control while being the page's primary action. styleguide.css .button is the spec:
   brand navy with a white label, going to #f2f2f2 with a navy label on hover. Every
   standalone auth page shares this selector, so sign in, sign up, both forgot pages and
   complete profile move together. */
.form [type='submit'] {
    opacity: 0;
    display: block;
    min-width: 120px;
    /* The 120px min-width was the only thing holding the label off the pill's edge, so
       it worked for "Sign In" (33px a side) and not for anything longer -- "Recover
       Username" fell back to the browser's 6px default. Zero vertical padding because
       the 1px it used to carry is now the border: 40px line-height + 2px border keeps
       the height at 42px. */
    padding: 0 28px;
    margin: 30px auto 10px;
    font-size: 18px;
    line-height: 40px;
    border-radius: 25px;
    background: var(--brand-primary);
    color: var(--text-inverse);
    /* The hover is a light fill, so the button needs an edge of its own to stay a
       button; at rest it is the same navy as the fill and invisible. */
    border: 1px solid var(--brand-primary);
    /* <input type=submit> gets the arrow cursor, not the hand, in Chrome. */
    cursor: pointer;
    transition: opacity .3s ease-out, transform .3s ease-out,
                background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* styleguide.css .button:hover -- #f2f2f2 behind a navy label, 11.87:1. The style
   guide's matching `outline: 2px solid var(--border-color)` focus rule is deliberately
   NOT taken: #e6e6e6 is 1.2:1 on white and would fail 1.4.11, and this file already
   restores the shared --focus-ring at the bottom. */
/* Busy for one request (#72): the button keeps focus and ignores a second press. */
.form [type='submit'][aria-busy="true"] {
    opacity: 0.65;
    cursor: progress;
}

.form [type='submit']:hover {
    background: #f2f2f2;
    border-color: var(--neutral-300);
    color: var(--brand-primary);
}

/* A press that looks identical to a hover leaves you unsure the click landed. */
.form [type='submit']:active {
    background: var(--neutral-200);
    border-color: var(--neutral-400);
    color: var(--brand-primary);
}

button:focus {
    outline:0;
}

/* ============================================================================
   Login redesign (Ben, 2026-07): centered Hein Scholar logo on top, a single
   centered form with Sign In / Sign Up tabs above it. Removes the navy banner,
   the gray inactive-form "backside" card (was the sliding animation), and the
   NSF/SBIR/Google footer logos.
   ============================================================================ */
/* Anchor to a fixed top offset (not vertically centered) so the logo + card top edge
   stays put whether the short login or the taller signup form is active. */
.forms-section {
    min-height: 100vh;
    justify-content: flex-start;
    padding: 7vh 1rem 3rem;
}

.auth-logo-link {
    display: block;
    margin-bottom: 2rem;
}
.auth-logo {
    display: block;
    /* Widened to roughly match the card/input width so it fills the space horizontally.
       Source is Hein-Scholar-Logo-Rectangle-Large.png (2928x567, transparent), so it stays crisp
       at this size and can go larger without softening. */
    width: 470px;
    max-width: 88vw;
    height: auto;
}

.auth-card {
    width: fit-content;
    max-width: 92vw;
    margin: 0 auto;
    padding: 2rem 1.25rem 2.25rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(18, 49, 80, 0.08);
}

/* Tabs: a centered row above the form (the forms no longer carry their own tab). */
.auth-tabs {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 0.75rem;
}
.auth-tabs .switcher {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0 0 6px;
    transform: none !important;
    /* Was #7a7a7a: 4.29:1 on white, under the 4.5:1 that WCAG 1.4.3 (AA) wants for
       normal text. --text-muted is 4.69:1 and is the palette's existing muted token. */
    color: var(--text-muted);
}
.auth-tabs .switcher.is-active {
    color: #000;
    font-weight: 600;
}
.auth-tabs .switcher .underline::before { transform: translateX(-101%); }
.auth-tabs .switcher.is-active .underline::before { transform: translateX(0); }

/* Stack the two forms: the active one is in normal flow (sizes the card), the
   inactive one is an absolute overlay that's simply hidden — no slide, no gray. */
/* The card sizes to whichever form is active (login is simple, signup is richer),
   and stays centered. */
.forms {
    position: relative;
    display: block;
    margin: 0 auto;
    width: fit-content;
    max-width: 100%;
}
/* Only the active form renders — the inactive one is display:none (not a transparent
   overlay), so switching can't leave a wider/taller half-faded form spilling past the
   card, and the card can't clip the select2 dropdowns. */
.form-wrapper {
    display: none;
    animation: none !important;
}
/* Fade/slide in the incoming form only. The outgoing form is display:none instantly, so
   there's no crossfade overlap to overflow the card. */
.form-wrapper.is-active {
    display: block;
    animation: authFormIn .28s ease both !important;
}
@keyframes authFormIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Both forms use the signup width so the card stays a constant size when toggling. */
.form-wrapper-login,
.form-wrapper-signup,
.form-wrapper-page { width: 520px; max-width: 92vw; }
.form-login,
.form-signup,
.form-wrapper.is-active .form-login,
.form-wrapper.is-active .form-signup {
    animation: none !important;
    background: transparent !important;
    transform: none !important;
}
/* The form carried a big 50px top margin + 30px top padding (old sliding layout);
   drop it so the fields sit right under the tabs. */
.form {
    margin-top: 0;
    padding-top: 1rem;
}

/* ============================================================================
   WCAG 2.2 AA (Siteimprove card "Sign In", 2026-08-05)
   ============================================================================ */

/* 2.5.8 Target Size (Minimum), AA. The two "Forgot ..." links were bare <a>s in
   stacked <div>s: ~19px tall boxes about 23px apart, so neither the 24x24 size rule
   nor the 24px spacing rule held. Giving each a 24px-tall box satisfies the size
   rule outright -- they are far wider than 24px already.
   Now under the Sign In button, one at each edge per Lauren's mockup (2026-08-19),
   in the secondary link style -- same treatment as .auth-back below. */
.auth-help-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.auth-help-links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* "Missing your institution?" under the institution select, on both the sign-up
   tab and complete profile. Same 2.5.8 Target Size problem as the help links: an
   inline anchor's box is exactly its 16px line of text. Height only -- the
   underline spans the text horizontally, so this cannot reintroduce the overhang. */
.input-block > a[data-toggle='modal'] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* Not flagged by Siteimprove (it can't see a suppressed outline), but 2.4.7 Focus
   Visible is AA and this file kills the shared focus ring three times over:
   `button { outline: none }` (:7), `.switcher { outline: none }` (:179) and
   `button:focus { outline: 0 }` (:406). auth.css loads after components.css, so that
   last one beats the `button:focus-visible` ring defined there by source order at
   equal specificity. Restore it here, at the end of the file, for the same reason.
   :focus-visible, so mouse clicks stay ring-free -- only keyboard focus shows it. */
.auth-tabs .switcher:focus-visible,
.auth-help-links a:focus-visible,
.forms-section a:focus-visible,
.form input:focus-visible,
.form select:focus-visible,
.form button:focus-visible,
.form [type='submit']:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Two mutually exclusive options, so they should read as two equal choices. Bootstrap
   sizes a btn-group's children to their content, which happened to be near-even for
   "Legal Scholars" / "Law Students" (51/49) and is not for "Author" / "Journal Editor"
   (45/55) -- the wider half reads as the bigger option. .account-button is otherwise
   only styled in landing.css, which the auth pages do not load, so this is scoped to
   the form to leave that page's three-button demo group alone. */
.form .btn-group > .account-button {
    flex: 1 1 0;
}

/* Account Type is a button pair, not an input, so its name is carried by a <span>
   (see auth.html) rather than a <label>. Match the sibling labels' typography. */
.input-block-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 14px;
    color: black;
}


/* Reflow (WCAG 1.4.10): the auth card poked 11px past a 320px viewport. Media-scoped;
   desktop untouched. */
@media (max-width: 991.98px) {
    .forms-section {
        padding-left: 8px;
        padding-right: 8px;
    }
    .form-wrapper,
    .form {
        min-width: 0;
        max-width: 100%;
    }
}


/* ============================================================================
   Standalone auth pages (Lauren's "Update UI for Forgot Username" card 2026-08-17,
   then her "Styling on Google Sign Up page" card 2026-08-18)
   Forgot username / forgot password / set a new password / complete your profile
   are this same card with different content, so they extend user_auth/auth_card.html
   and load this file. Only the parts sign-in has no equivalent of live here:
   sign-in's visible title is the logo and its h1 is .sr-only, while these pages
   have a real heading.
   ============================================================================ */
.auth-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand-primary);
    text-align: center;
}

.auth-lede {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

/* Password rules on the confirm step. These were a bare <ul> nudged with
   transform: translate(-25px) and pinned to 300px, which left them sitting 1px
   from the card edge while every other control sat at 26px -- outdented 25px on
   the left and 7px short on the right, and fixed-width so they never tracked
   the card. */
.auth-hints {
    margin: 0 0 20px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
}

.auth-back {
    display: block;
    /* 2.5.8 Target Size, same reason as .auth-help-links above. */
    min-height: 24px;
    margin-top: 4px;
    text-align: center;
}

/* Every text link on the auth forms is the style guide's secondary link (Lauren,
   2026-08-19): 14px/24px, #2b54b9, normal weight, always underlined, brand navy on
   hover. Both hexes in the spec are existing tokens. The :hover block is
   load-bearing: the global `a:hover` (components.css) sets text-decoration: none
   and would strip the underline the moment you point at any of these. */
.auth-back,
.auth-help-links a,
.auth-lede a,
.disclaimer a,
.form .error a,
.input-block > a[data-toggle='modal'] {
    font-size: 14px;
    line-height: 24px;
    color: var(--link-color-strong);
    font-weight: 400;
    text-decoration: underline;
}

.auth-back:hover,
.auth-help-links a:hover,
.auth-lede a:hover,
.disclaimer a:hover,
.form .error a:hover,
.input-block > a[data-toggle='modal']:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* The modal links wrap their text in <small>, which would shrink it below the
   spec's 14px -- the anchor's own size is the spec size. */
.input-block > a[data-toggle='modal'] small {
    font-size: inherit;
}

/* The recovery forms' bare .error takes its look from components.css (Field errors). */