/*
 * public/css/social-buttons.css
 *
 * The social sign-in buttons rendered by
 * src/Templates/partials/_social_providers.html.twig.
 *
 * A NEW FILE UNDER A NEW NAME. The 677-line public/css/social-auth.css deleted
 * alongside the retired signup pages is ratcheted shut by
 * ProTrainSignupLegacyRetirementTest, and deliberately so -- reusing that name
 * would quietly reopen a retirement somebody closed on purpose. That file styled six providers by
 * `[data-provider="…"]` with per-brand background colours and hover states.
 * This one does not, deliberately: brand-coloured buttons stacked four deep
 * read as an advertisement rather than a choice, every one of them needs its
 * own contrast-checked focus ring, and each provider's brand guidelines
 * constrain their use. A neutral surface with the official mark is what Google
 * and Microsoft both document as acceptable, and it stays legible in both
 * themes.
 */

.qc-social {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.qc-social__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;

    width: 100%;
    min-height: 44px; /* pointer target floor */
    padding: 0.625rem 1rem;

    font: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    color: #1f2937;

    background: #ffffff;
    border: 1px solid #d5dae2;
    border-radius: 10px;
    cursor: pointer;

    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.qc-social__btn:hover:not(:disabled) {
    background: #f7f9fc;
    border-color: #b9c2ce;
}

/* Visible focus that does not depend on the brand colour. */
.qc-social__btn:focus-visible {
    outline: 2px solid #1a56db;
    outline-offset: 2px;
}

.qc-social__btn:disabled,
.qc-social__btn.is-busy {
    opacity: 0.6;
    cursor: progress;
}

/*
 * The provider somebody was handed over with, after verifying their email
 * (auth/_signin_card.html.twig's `promote` parameter -- see
 * src\Services\Auth\AuthGatewayState). EMPHASIS ONLY: the button is already in
 * the list, every other provider is still beside it, and the password form is
 * still below. A border and a tint, not a brand colour -- see this file's
 * header for why none of these buttons carry one.
 */
.qc-social__btn.is-promoted {
    border-color: var(--primary-light, #7c44b2);
    box-shadow: 0 0 0 3px rgba(94, 37, 148, 0.12);
}

.qc-social__btn.is-promoted:hover:not(:disabled) {
    border-color: var(--primary-color, #5e2594);
}

.qc-social__mark {
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.qc-social__mark svg {
    width: 100%;
    height: 100%;
    display: block;
}

.qc-social__label {
    /* Truncate rather than wrap: "Continue with Microsoft" on a 320px screen
       must stay one line so the four buttons keep a consistent height. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "or sign in with your password" rule. */
.qc-social__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;

    font-size: 0.8125rem;
    color: #6b7280;
}

.qc-social__divider::before,
.qc-social__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e3e7ee;
}

/* Notices above the form (neutral connect prompt, callback errors). */
.qc-login-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;

    margin-bottom: 1rem;
    padding: 0.75rem 0.875rem;

    font-size: 0.875rem;
    line-height: 1.45;
    border-radius: 8px;
    border: 1px solid transparent;
}

.qc-login-notice i {
    margin-top: 0.15em;
    flex: 0 0 auto;
}

.qc-login-notice--info {
    color: #1e40af;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.qc-login-notice--error {
    color: #9f1239;
    background: #fff1f2;
    border-color: #fecdd3;
}

.qc-login-notice a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.qc-login-notice a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/*
 * REMOVED 2026-08-06: an @media (prefers-color-scheme: dark) block.
 *
 * IT MADE THE FAILED-SIGN-IN MESSAGE UNREADABLE. On a machine whose OS prefers
 * dark it set `.qc-login-notice--error { color: #fecdd3 }` — pale pink, chosen
 * to sit on a dark crimson panel. But the auth pages are a committed LIGHT
 * design: auth_base.html.twig puts no `data-theme` on <html> and auth-login.css
 * contains no dark rules at all, so the surrounding page stayed white and the
 * notice kept its light `background: #fff1f2`. Pale pink text on pale pink
 * background: the error was rendered, announced to screen readers, and
 * invisible to everyone else — precisely when the user most needed to read it.
 *
 * The same block turned the four provider buttons near-black (#1f2530) on that
 * same white page.
 *
 * THE RULE. An OS preference is not this application's theme. Where a surface
 * is themeable, follow `data-theme` on <html> (resp_base.js writes it from
 * localStorage and the header toggle — see public/css/protrain-signup.css for
 * that shape). Where a surface deliberately commits to one look, as the auth
 * pages do, the component commits with it. Reacting to the OS instead is how a
 * component ends up dark while everything around it is light.
 *
 * If the auth surface gains a dark theme later, add it here under
 * `[data-theme="dark"]` at the same time as the rest of the page — not before.
 */

/* ==========================================================================
   Dark theme
   ==========================================================================

   The block removed on 2026-08-06 keyed off @media (prefers-color-scheme: dark)
   and themed ONLY this file, while the card around it stayed light -- so a
   failed sign-in rendered pale pink on pale pink. This one keys off
   [data-theme="dark"], which auth_base sets on <html> for the WHOLE surface at
   once, so the notice and the card it sits in can never disagree again.

   That is the condition the removal comment set for bringing dark back: "add it
   here under [data-theme="dark"] at the same time as the rest of the page --
   not before." auth-login.css and auth-gateway.css now carry their halves.
   ========================================================================== */

[data-theme="dark"] .qc-social__btn {
    /* Provider marks are full-colour SVG designed for a light chip. Keeping the
       button surface light-on-dark-card (rather than inverting it) is what those
       brand assets are actually approved for, and it keeps the buttons reading
       as third-party rather than as our own. A slightly dimmed white avoids the
       glare of #fff against a #171226 card. */
    color: #1f2937;
    background: #ededf2;
    border-color: #3d3357;
}

[data-theme="dark"] .qc-social__btn:hover:not(:disabled) {
    background: #ffffff;
    border-color: #56497a;
}

[data-theme="dark"] .qc-social__btn:focus-visible {
    /* #1a56db is too dark to read as a ring against a dark card. */
    outline-color: #93c5fd;
}

[data-theme="dark"] .qc-social__divider {
    color: #b3a9c6;
}

[data-theme="dark"] .qc-social__divider::before,
[data-theme="dark"] .qc-social__divider::after {
    background: #2c2440;
}

/* Surface AND text, changed together. #bfdbfe on #16233a = 9.6:1;
   #fecaca on #2a1618 = 9.1:1. */
[data-theme="dark"] .qc-login-notice--info {
    color: #bfdbfe;
    background: #16233a;
    border-color: #2c4a7c;
}

[data-theme="dark"] .qc-login-notice--error {
    color: #fecaca;
    background: #2a1618;
    border-color: #7f2a26;
}