/*
 * "Continue with Google / Facebook" — Include/inc_social_login.php
 *
 * Self-contained on purpose. The same markup is dropped into three different design
 * systems ( the hn-* homepage card, the .eduui login card, the au-* sign-up form ), so
 * nothing here inherits from any of them beyond the font: everything else is stated.
 *
 * Colours are stated as literal values rather than brand tokens for the same reason —
 * a token that exists on one of those three pages and not the others would render the
 * buttons differently depending on where you found them.
 *
 * EVERY BORDER HERE IS WRITTEN TWO CLASSES DEEP, and that is not a style choice.
 * redesign-ui.css carries
 *
 *     .eduui *, .eduui :after, .eduui :before { box-sizing: border-box; border: 0 solid #e9ecef }
 *
 * which is specificity (0,1,0) — the same as a bare class — and it is loaded AFTER this
 * file, so on every .eduui page it wins the tie and zeroes the lot. The login card is
 * .eduui, so this block had no button outline and no divider rules there at all; the
 * spinner, once it mattered, was invisible for the same reason. One extra class puts
 * them back everywhere without touching the reset, which other things rely on.
 */

/* No outer margin of its own. The block now leads the card, and every host page
   ( the homepage sheet, /login/, the sign-up form ) already owns the gap above it;
   a margin-top here was only ever right when this sat at the very bottom. */
.oex-social {
    margin: 0;
}

/* Caption sitting on a rule, UNDER the buttons — it separates the two ways in rather
   than introducing the second one. The rule is drawn with a border on the
   pseudo-elements rather than a background line behind the text, so it never shows
   through a translucent card. */
.oex-social-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 16px;
    color: #8a8aa3;
    font-size: 12.5px;
    line-height: 1.2;
}

.oex-social .oex-social-divider::before,
.oex-social .oex-social-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid #e2e5ea;
}

.oex-social-divider > span {
    flex: 0 0 auto;
}

/* One provider per row, full width, at every size.

   They sat side by side in half-width chips while this block was an afterthought at the
   bottom of the card. Now that it is the first thing on it, the pair is the primary way
   in and is sized like one: a half-width chip reads as a secondary control, and it left
   no room for the mark and the label to breathe on a 352px phone. Full width also means
   the two buttons and the sign-in button below them share one edge-to-edge column, so
   the eye runs straight down the card instead of stepping in and out of a two-up row. */
.oex-social-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

@media (max-width: 400px) {
    .oex-social .oex-social-btn { gap: 8px; padding: 10px 12px; font-size: 14.5px; }
}

/* 50px and radius 12 to match the fields and the sign-in button underneath: the three
   of them are one column, and a button 4px shorter than the field below it reads as a
   different kind of thing. The 1px border and the single-pixel shadow are the whole
   decoration — a provider button carries a brand mark already, and anything more
   competes with the tenant's own CTA for the loudest thing on the card. */
.oex-social .oex-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px 16px;
    border: 1px solid #dedee8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 16, 46, .05);
    color: #1f2430;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.oex-social-btn:hover,
.oex-social-btn:focus {
    background: #fbfbfd;
    border-color: #c4c4d4;
    box-shadow: 0 2px 6px rgba(16, 16, 46, .08);
    color: #1f2430;
    text-decoration: none;
}

.oex-social-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* The label is allowed to shrink and clip before the icon does, so a narrow card never
   produces a button with no mark on it.

   min-width:0 is what makes that true rather than merely intended: a flex item defaults
   to min-width:auto, which refuses to shrink below its own text — so a long label ( and
   "Signing you in…" is longer than "Google", as is every translation of it ) pushes the
   spinner out of the button instead of ellipsising itself. */
.oex-social-btn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The mark is inline SVG ( SocialAuth::getProviderMark ), so the sizing is on the
   element itself and there is no colour to state here: Google's G is four colours and
   must stay that way. The font-size and the two colour rules below it are what is left
   for a provider that has no SVG on file and falls back to an icon-font glyph. */
.oex-social-btn-icon {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1;
}

svg.oex-social-btn-icon {
    width: 19px;
    height: 19px;
    display: block;
}

.oex-social-btn--google i.oex-social-btn-icon {
    color: #4285f4;
}

.oex-social-btn--facebook i.oex-social-btn-icon {
    color: #1877f2;
}

/* ---------------------------------------------------------------------------
   Signing in, said on the button.

   A social sign-in is a long wait with two halves, and until this the second half had
   nothing to show for it at all. While somebody is in the popup or the phone's Google
   sheet they are not looking at this page — but the moment the provider hands back,
   they are, and what follows is ours: resolve the account, establish the session, run
   completeLogin, redirect. Seconds, with the page still painted exactly as they left it.

   So the button holds ONE state from the click until the page moves, and it is built to
   be read at a glance from across that whole stretch:

     the spinner   replaces the provider mark rather than joining it, so the button does
                   not change width and the row does not reflow;
     the label     says what is happening instead of which provider it was — by the time
                   somebody is reading this they know which button they pressed, and what
                   they want to know is whether it took;
     the bar       is the part that says "still", not merely "yes". A spinner and a
                   sentence are both compatible with a page that died three seconds ago;
                   something crossing the button is not.

   The other provider dims rather than staying inviting. Two sign-ins at once is not a
   thing anybody wants, and a live-looking button next to a working one is an invitation
   to press it and start over.
   --------------------------------------------------------------------------- */

.oex-social-btn .oex-social-btn-spin {
    display: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, .15);
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: oex-social-spin .8s linear infinite;
}

.oex-social-btn.is-busy {
    /* NOT dimmed. A working button that is faded reads as a disabled one, which is the
       exact misreading this is here to prevent — the fade belongs on the sibling. */
    position: relative;
    overflow: hidden;
    pointer-events: none;
    background: #f8f9fb;
    border-color: #b9c0c9;
}

.oex-social-btn.is-busy .oex-social-btn-icon { display: none; }
.oex-social-btn.is-busy .oex-social-btn-spin { display: block; }

/* The bar. Clipped by the button's own overflow, so it follows the rounded corners
   without a second radius to keep in step. */
.oex-social-btn.is-busy::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    height: 2px;
    background: #6b7280;
    animation: oex-social-sweep 1.15s ease-in-out infinite;
}

.oex-social-btn--google.is-busy::after   { background: #4285f4; }
.oex-social-btn--facebook.is-busy::after { background: #1877f2; }

/* The provider nobody chose, while the other one is working. */
.oex-social-btn.is-idle {
    pointer-events: none;
    opacity: .45;
}

@keyframes oex-social-spin {
    to { transform: rotate(360deg); }
}

@keyframes oex-social-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}

/* prefers-reduced-motion: the movement is decoration, but the busy state is information
   — so the animation stops and both marks stay visibly changed. The bar becomes a full
   underline, which is a state rather than a motion. */
@media (prefers-reduced-motion: reduce) {
    .oex-social-btn .oex-social-btn-spin { animation: none; border-top-color: #6b7280; }

    .oex-social-btn.is-busy::after {
        width: 100%;
        animation: none;
    }
}

/* The same wait, on the button that finishes a social sign-up ( the role step ). Its
   host page owns the button, so only the spinner is borrowed. */
[data-oex-social-submit] .oex-social-inline-spin {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -3px;
    animation: oex-social-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    [data-oex-social-submit] .oex-social-inline-spin { animation: none; }
}

@media (prefers-color-scheme: dark) {
    /* Only applied where the host page has actually opted into a dark ground. Both
       auth layouts render light today, so this is here for the card that ends up on a
       dark template rather than a theme this block imposes. */
    .hn-body[data-hn-theme="dark"] .oex-social-btn,
    .oex-social[data-oex-social-dark="1"] .oex-social-btn {
        background: #1f2430;
        border-color: #39404f;
        color: #e8eaf0;
    }
}