/*
 * "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.
 */

.oex-social {
    margin-top: 20px;
}

/* Caption sitting on a rule. 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-bottom: 14px;
    color: #6b7280;
    font-size: 13px;
    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;
}

/* Two providers sit side by side at EVERY width; one fills the width.

   They used to stack below 380px, on the reasoning that "Facebook" plus its icon could not
   fit in half of a small phone without truncating. Measured rather than assumed, it fits
   with room to spare: a 352px phone leaves ~288px inside the card, so each button is 139px
   and the widest label needs about 62px of the ~87px left after the padding, icon and gap.
   The breakpoint was costing every common Android phone a stacked pair — two full-width
   buttons where the design has one row — for a case that does not arrive until the
   viewport is narrower than any phone still sold.

   What is real at that size is that the default padding is generous, so it tightens below
   400px instead of giving up the row. */
.oex-social-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.oex-social-buttons.is-single {
    grid-template-columns: minmax(0, 1fr);
}

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

.oex-social .oex-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #d7dbe0;
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    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: #f8f9fb;
    border-color: #b9c0c9;
    color: #1f2937;
    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;
}

.oex-social-btn-icon {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1;
}

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

.oex-social-btn--facebook .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;
    }
}