/*
 * Signing in with Microsoft: the sign-in page's Microsoft button, and the pages a colleague sees after Microsoft
 * (waiting for approval, connect an existing account, and the other outcomes: S3, S7, S9). Loaded before
 * infinitel-portal.css, so rules that meet its !important ones are scoped tightly.
 */

/* ---- sign in: Microsoft first, the portal password second ---- */
.inf-auth-form .btn.inf-auth-microsoft,
.inf-auth-form .btn.inf-auth-secondary {
    width: 100%;
    min-height: 56px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px !important;
}
.inf-auth-form .btn.inf-auth-microsoft svg { flex: none; }
.inf-auth-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 24px;
    color: var(--inf-ink-muted);
    font-size: 14px;
    white-space: nowrap;
}
.inf-auth-or::before, .inf-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--inf-line); }

/* ---- the colleague pages ---- */
.inf-auth-pitch .inf-auth-pitch-title {
    margin: 0;
    color: var(--inf-on-dark);
    font-size: clamp(38px, 3.6vw, 56px);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: -.04em;
}
.inf-auth-pitch .inf-auth-pitch-title span { display: block; }

.inf-auth-form.inf-join > .inf-lede:empty { display: none; }
.inf-auth-form.inf-join > .inf-eyebrow { display: block; margin-bottom: 28px; }

.inf-join-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eef7f8;
    color: var(--inf-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 24px;
}
.inf-auth-form h1.inf-join-h {
    margin: 0;
    font-size: 38px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -.03em;
    color: var(--inf-ink);
    text-wrap: balance;
}
.inf-join-p {
    margin: 18px 0 0;
    color: var(--inf-ink-muted);
    font-size: 16.5px;
    line-height: 1.6;
    text-wrap: pretty;
}
.inf-join-note {
    margin: 24px 0 0;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--inf-surface);
    font-size: 15px;
    line-height: 1.6;
}
.inf-join-note p { margin: 0; color: var(--inf-ink-muted); }
.inf-join-note p.inf-join-note-h { margin-bottom: 6px; color: var(--inf-ink); font-weight: 500; }

.inf-join-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.inf-join-actions form { margin: 0; }
.inf-auth-form .btn.inf-join-btn {
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    font-size: 15.5px !important;
}
.inf-auth-form .btn.inf-join-wide { width: 100%; }
.inf-auth-form .inf-join-end { display: block; margin-top: 32px; }
.inf-auth-form a.btn.inf-join-end { display: flex !important; }

.inf-join-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--inf-ink) !important;
    font-family: inherit;
    font-weight: 500;
    font-size: 15px;
    text-decoration: underline;
    text-decoration-color: var(--inf-line-strong);
    text-underline-offset: 5px;
    cursor: pointer;
}
/* The sign-in pages' link style (ink, underlined), the same as Forgotten your password? and Create an account. */
.inf-join-link:hover { text-decoration-color: var(--inf-ink); }
.inf-join-link:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: 2px; border-radius: 4px; }
.inf-join-centre { display: flex; justify-content: center; margin-top: 12px; }
.inf-join-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin-top: 12px; }

.inf-join-form { margin-top: 30px; }
.inf-join-form .form-group:last-of-type { margin-bottom: 26px; }
.inf-join .alert { margin: 24px 0 0; }

@media (max-width: 991.98px) {
    .inf-auth-form h1.inf-join-h { font-size: 30px; }
    .inf-join-icon { width: 48px; height: 48px; margin-bottom: 20px; }
    .inf-join-icon svg { width: 22px; height: 22px; }
}
/* phones: Check again and Sign out stack, full width (S7) */
@media (max-width: 575.98px) {
    .inf-join-actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .inf-join-actions form, .inf-auth-form .inf-join-actions .btn.inf-join-btn { width: 100%; }
    .inf-join-actions .inf-join-link { width: 100%; justify-content: center; }
}

/* two-step set-up for a colleague who has just joined: the key folds away under the code (S9) */
.inf-auth-key { margin: -6px 0 6px; font-size: 15px; }
.inf-auth-key summary {
    display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
    color: var(--inf-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--inf-line-strong); text-underline-offset: 5px;
}
.inf-auth-key summary::-webkit-details-marker { display: none; }
.inf-auth-key summary:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: 2px; border-radius: 4px; }
.inf-auth-key .inf-auth-secret { margin: 6px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--inf-surface); }