/**
 * Nextend Social Login — restyled to the site's own controls.
 *
 * Nextend ships each provider in that vendor's brand skin: Google on white,
 * Twitter on #4ab3f4 with the 2012 bird. On a #09090B ground that puts two
 * saturated slabs under the form's primary button, in two different fonts.
 * They are rebuilt here as the site's secondary control so the pair reads as
 * one column with a clear first choice.
 *
 * TWO SPECIFICITY RULES, both learned the hard way — read before editing:
 *
 * 1. Nextend's most specific selectors are (0,3,1) / (0,3,2), NOT the generic
 *    ones. Matching those weights ties, and its stylesheet loads later, so it
 *    wins. Every rule here is deliberately one class heavier. Checking only
 *    `div.nsl-container .nsl-button-default` is what shipped black-on-black
 *    Google text: the per-provider skin rule repainted it.
 *
 * 2. The container class DIFFERS BY SURFACE — `nsl-container-block` on
 *    /register/, /login/ and the popup; `nsl-container-block-fullwidth` on
 *    /adlog/; `-inline` and `-grid` exist too. Layout is therefore scoped to
 *    `.nsl-container` itself, never to one variant, or a surface silently
 *    keeps Nextend's own layout.
 *
 * Scoped to .nsl-*, Nextend's own namespace, so nothing here reaches the rest
 * of the site.
 */

/* Layout — every container variant. Doubled to clear (0,3,1). */

/* Nextend gives `.nsl-container-inline` a -5px margin to offset the per-button
   margins it also sets. We remove those margins, so the negative one is left
   pulling the block 10px wider than its parent. */
div.nsl-container.nsl-container {
	margin: 0;
}

div.nsl-container.nsl-container .nsl-container-buttons.nsl-container-buttons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
}

div.nsl-container.nsl-container .nsl-container-buttons a[data-plugin="nsl"] {
	display: block;
	margin: 0;
	width: 100%;
	max-width: none;
}

/* The provider colour is an INLINE style attribute, so !important is the only
   thing that can beat it — the same case as JetEngine's inline opacity on the
   vote button. Confined to that one declaration. */
div.nsl-container .nsl-button.nsl-button.nsl-button-default {
	background-color: #27272A !important;
	border: 1px solid #3F3F46;
	border-radius: 40px;
	box-shadow: none;
	color: #FFFFFF;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background-color .15s ease, border-color .15s ease;
}

div.nsl-container .nsl-button.nsl-button.nsl-button-default:hover {
	background-color: #32323A !important;
	border-color: #52525B;
}

div.nsl-container div.nsl-container-buttons a[data-plugin="nsl"]:focus-visible .nsl-button.nsl-button-default {
	outline: 2px solid #6DF4AD;
	outline-offset: 2px;
}

/* Match the primary CTA's type exactly: Inter 14/600, uniform weight. Nextend
   gives Roboto Medium 400 and Helvetica 400 — the two buttons do not even
   agree with each other, let alone with the form. Colour is stated here as
   well as on the button, so a per-provider rule aimed at the label itself
   cannot repaint it the way the Google skin rule did. */
div.nsl-container .nsl-button-default.nsl-button-default div.nsl-button-label-container {
	margin: 0;
	padding: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	flex: 0 0 auto;
	text-align: center;
	color: #FFFFFF;
}

div.nsl-container .nsl-button-default div.nsl-button-label-container b {
	font-weight: inherit;
}

div.nsl-container .nsl-button .nsl-button-svg-container {
	padding: 0;
	flex: 0 0 auto;
}

div.nsl-container .nsl-button .nsl-button-svg-container svg {
	height: 18px;
	width: 18px;
}

/* X, not the 2012 bird. Nextend renders Twitter on data-skin="legacy" with the
   old bird inline; this build ships no X skin at all (it has skin rules for
   apple/facebook/google/slack/spotify/tiktok and none for twitter), so the
   mark cannot be changed in its settings. Masking the container swaps the
   glyph without touching plugin files, so an update cannot undo it. */
div.nsl-container .nsl-button-twitter .nsl-button-svg-container svg {
	display: none;
}

div.nsl-container .nsl-button-twitter .nsl-button-svg-container {
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-image: var(--dtl-x-mark);
	mask-image: var(--dtl-x-mark);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* 84%, not contain: the X path fills its viewBox edge to edge while
	   Google's G carries internal padding, so at equal box sizes the X renders
	   ~18% heavier. Scaling the glyph rather than the box keeps the icon gap
	   and baseline identical across providers. */
	-webkit-mask-size: 84%;
	mask-size: 84%;
}

div.nsl-container {
	--dtl-x-mark: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/%3E%3C/svg%3E');
}