/*
 * "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 ROW, the providers sharing it equally.

   This was one-per-row until now, and the reason given was that a half-width chip reads
   as a secondary control and leaves the mark no room to breathe. The first half of that
   stopped being true when the block moved to the TOP of the card: what makes these read
   as the primary way in is that they come first and the password form comes second, not
   that they are 376px wide. The second half was a consequence of the 19px mark, which is
   the thing actually fixed below.

   What the row buys is the 60px it gives back. Measured in the app on a 412x805 WebView,
   the sheet is capped at 92dvh minus the 120px the native bar covers — 621px — and the
   card is 624px tall, so the sign-in button was clipped by its own container and the
   primary action on the screen was half a word. Stacking two 50px buttons to say
   "Google" and "Facebook" is the most expensive 110px on the card.

   flex rather than a two-column grid, because the provider count is not fixed:
   SocialAuth::getProviders() answers with whichever are configured AND carrying
   credentials, so a tenant can have one or two today and the set is meant to grow.
   `flex: 1 1 0` with `min-width: 0` gives equal columns at any count — one provider
   still fills the width, exactly as before. */
.oex-social-buttons {
    display: flex;
    gap: 10px;
}

.oex-social .oex-social-btn {
    flex: 1 1 0;
    min-width: 0;
}

/* A THIRD PROVIDER TURNS THESE INTO MARKS, and that is a designed state rather than
   something to discover. Two buttons share 376px comfortably; three share 119px each,
   which leaves ~85px beside a 26px mark and ellipsises "Facebook" at EVERY width,
   including a tablet. Measured, not guessed. So past two the label goes and the mark —
   which is the thing that identifies the button anyway — gets the room.

   The name stays in the accessible tree: the button keeps its text for a screen reader
   and only stops painting it. `:has()` is unsupported on an old Android System WebView,
   where this simply does not apply and the labels ellipsise exactly as they do now —
   the fallback is the current behaviour, not a broken one. */
.oex-social-buttons:has(> :nth-child(3)) .oex-social-btn-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.oex-social-buttons:has(> :nth-child(3)) .oex-social-btn {
    gap: 0;
}

/* Narrow phones: the label is what gives, never the mark. Below 360px two buttons are
   ~165px each and "Facebook" beside a 26px mark is the tight one, so the gap and the
   padding close up first — the ellipsis on the label is the last resort and it is
   already in place. */
@media (max-width: 400px) {
    .oex-social .oex-social-btn { gap: 7px; padding: 10px 8px; font-size: 14px; }
}

/* 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: 23px;
    line-height: 1;
}

/* 26px, up from 19px. A provider mark is a LOGO — it is recognised before it is read,
   and at 19px in a 50px button Google's four colours and Facebook's f were a smudge the
   eye had to go looking for.

   Measured in the app's own WebView with the labels in place: at 412 / 393 / 384 / 360
   and 320 CSS px the pair stays on one row, neither label ellipsises and the document
   never overflows horizontally. 320 is an iPhone SE and below anything this ships to,
   so the mark does not need to shrink at any width. */
svg.oex-social-btn-icon {
    width: 26px;
    height: 26px;
    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;
    }
}