/* The partner sign-in screens, wearing the website's design.
   Sign in, forgotten password, set a new one, waiting to verify, and the
   emailed-code form all share this.

   IT LOADS site.css AND USES .gqv2. That is the whole point, and it is why
   there are no colours, fonts or button styles in this file: the tokens, the
   type scale and .gqv2-btn all come from the website stylesheet unchanged, so
   the door to the panel looks like the site the partner arrived from rather
   than like the panel behind it. Copying the palette here instead would have
   made a second set of numbers to keep in step with the first.

   What is left is only the arrangement these pages need — a centred box on a
   navy field, which no other page has. Prefixed gq-au-, the same way
   partners.css is prefixed gq-pn-.

   The panel itself still wears partner.css. This is deliberately the seam: the
   marketing site and the sign-in are one continuous thing to a partner who has
   just clicked "Sign in", and the tool behind it is allowed to look like a
   tool. */

.gqv2.gq-au {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: linear-gradient(135deg, var(--gq-navy), var(--gq-blue-dark));
    position: relative;
    overflow-x: hidden;
}

/* The same soft light the /partner-with-us hero carries, so arriving here from
   that page does not feel like landing somewhere else. */
.gqv2.gq-au::after {
    content: '';
    position: fixed;
    top: -180px;
    right: -140px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36, 116, 166, .5), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.gqv2 .gq-au-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
}

/* ---- the brand above the card ---- */

.gqv2 .gq-au-brand {
    display: block;
    text-align: center;
    margin-bottom: 22px;
}

/* The real wordmark, masked white — the same SVG and the same aspect ratio the
   site header uses, rather than the panel's text-only "GuestQuest". */
.gqv2 .gq-au-logo {
    display: inline-block;
    width: 168px;
    aspect-ratio: 235.44 / 97.2;
    background-color: #fff;
    -webkit-mask: url('../website/images/gq-logo.svg') no-repeat center / contain;
    mask: url('../website/images/gq-logo.svg') no-repeat center / contain;
}

.gqv2 .gq-au-tagline {
    display: block;
    margin-top: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gq-sky);
}

/* ---- the card ---- */

.gqv2 .gq-au-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px 28px 24px;
    box-shadow: 0 40px 80px -28px rgba(0, 0, 0, .55),
                0 18px 40px -18px rgba(0, 0, 0, .35);
}

.gqv2 .gq-au-head {
    margin-bottom: 18px;
    text-align: center;
}

.gqv2 .gq-au-head h1 {
    font-family: var(--gq-head-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--gq-navy);
    line-height: 1.2;
    margin: 0 0 6px;
}

.gqv2 .gq-au-head p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gq-mist);
}

.gqv2 .gq-au-head strong {
    color: var(--gq-slate);
}

/* A round mark for the pages that are a statement rather than a form. */
.gqv2 .gq-au-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 22px;
    color: var(--gq-blue);
    background: var(--gq-blue-tint);
}

/* ---- fields, matching the sign-up card on the website ---- */

.gqv2 .gq-au-field + .gq-au-field {
    margin-top: 12px;
}

.gqv2 .gq-au-field label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--gq-slate);
    margin-bottom: 5px;
}

/* "Forgotten?" beside the password label rather than under the form, where it
   is read at the moment the question occurs. */
.gqv2 .gq-au-field label a {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gq-blue);
}

.gqv2 .gq-au-field label a:hover {
    text-decoration: underline;
}

.gqv2 .gq-au-input {
    position: relative;
}

.gqv2 .gq-au-input i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px;
    color: var(--gq-mist);
    pointer-events: none;
    transition: color .18s ease;
}

.gqv2 .gq-au-input:focus-within i {
    color: var(--gq-blue);
}

.gqv2 .gq-au-input input {
    width: 100%;
    padding: 12px 14px 12px 38px;
    font-family: var(--gq-font);
    font-size: 14px;
    color: var(--gq-charcoal);
    background: var(--gq-cloud);
    border: 1px solid var(--gq-line);
    border-radius: 12px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.gqv2 .gq-au-input:not(:has(i)) input {
    padding-left: 14px;
}

.gqv2 .gq-au-input input::placeholder {
    color: #9aa6b5;
}

.gqv2 .gq-au-input input:focus {
    outline: none;
    background: #fff;
    border-color: var(--gq-blue);
    box-shadow: 0 0 0 4px rgba(36, 116, 166, .14);
}

/* The emailed six-digit code: spaced and monospaced so a digit read off a
   phone can be checked against the screen without counting characters. */
.gqv2 .gq-au-input input.gq-au-code {
    padding-left: 14px;
    text-align: center;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 8px;
}

.gqv2 .gq-au-input input.gq-au-code::placeholder {
    letter-spacing: 6px;
    font-weight: 400;
}

.gqv2 .gq-au-submit {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    padding: 13px 24px;
}

/* ---- what the last request flashed ---- */

.gqv2 .gq-au-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
}

.gqv2 .gq-au-alert i {
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

.gqv2 .gq-au-alert ul {
    margin: 0;
    padding-left: 16px;
}

.gqv2 .gq-au-alert li + li {
    margin-top: 3px;
}

.gqv2 .gq-au-alert-ok {
    background: #eaf5ee;
    border: 1px solid #cbe5d5;
    color: #2f6b46;
}

.gqv2 .gq-au-alert-bad {
    background: #fdeeea;
    border: 1px solid #f6d2c8;
    color: #a3402a;
}

/* ---- a second way on, under the form ---- */

.gqv2 .gq-au-alt {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--gq-line);
    text-align: center;
    font-size: 12.5px;
    color: var(--gq-mist);
}

.gqv2 .gq-au-alt .gqv2-btn {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
    padding: 11px 20px;
    font-size: 12px;
}

/* Folded away: on the pending page, resending is what almost everybody needs,
   and the address swap must not compete with it for the first click. */
.gqv2 .gq-au-more {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--gq-line);
}

.gqv2 .gq-au-more > summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gq-blue);
    list-style: none;
}

.gqv2 .gq-au-more > summary::-webkit-details-marker {
    display: none;
}

.gqv2 .gq-au-more > summary::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 7px;
    font-size: 10px;
    display: inline-block;
    transition: transform .15s ease;
}

.gqv2 .gq-au-more[open] > summary::before {
    transform: rotate(90deg);
}

.gqv2 .gq-au-note {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--gq-mist);
    margin: 12px 0 14px;
}

/* ---- under the card ---- */

.gqv2 .gq-au-foot {
    margin: 18px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
}

.gqv2 .gq-au-foot a {
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding-bottom: 1px;
}

.gqv2 .gq-au-foot a:hover {
    border-color: #fff;
}

@media (max-width: 480px) {
    .gqv2 .gq-au-card {
        padding: 22px 20px 20px;
    }

    .gqv2 .gq-au-logo {
        width: 140px;
    }
}