/**
 * Auth modal: .mk-auth (templates/components/auth-modal.php, auth-panel.php,
 * auth-login.php, auth-register.php…) in a modal (modal.css).
 * Tokens: theme.json `auth`, `color.auth`.
 *
 * Google / Apple: two equal buttons in a row, gap 24, padding 12, 1px border
 * and icon 24 in #E3ACAF, radius 4 (inactive until connected), the terms
 * line under them caption, centred, 12 above. "— or with
 * e-mail —" caption #BCB8B7, centred, 24 above and below. Register intro
 * body-small #17100E, 24 below. Fields 12 apart; "Forgot your password?"
 * 8 under them; terms 28 above and below; button full width, 24 above and
 * 12 below; switch line body-small, centred.
 */

.mk-auth [hidden] {
	display: none;
}

.mk-auth__intro {
	margin-block: 0 var(--wp--custom--auth--intro-gap);
	color: var(--wp--custom--color--auth--text);
	font-family: var(--wp--custom--text--body-small--font-family);
	font-size: var(--wp--custom--text--body-small--font-size);
	font-weight: var(--wp--custom--text--body-small--font-weight);
	line-height: var(--wp--custom--text--body-small--line-height);
	letter-spacing: var(--wp--custom--text--body-small--letter-spacing);
}

.mk-auth__social {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--auth--social-gap);
}

.mk-auth__provider {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: var(--wp--custom--auth--social-padding);
	border: var(--wp--custom--border-width--thin) solid
		var(--wp--custom--color--auth--social);
	border-radius: var(--wp--custom--auth--social-radius);
	background: none;
	color: var(--wp--custom--color--auth--social);
	text-decoration: none;
	cursor: pointer;
}

.mk-auth__provider:disabled {
	cursor: not-allowed;
}

.mk-auth__provider .mk-icon {
	inline-size: var(--wp--custom--auth--social-icon-size);
	block-size: var(--wp--custom--auth--social-icon-size);
}

.mk-auth__provider:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

.mk-auth__social-terms {
	margin-block: var(--wp--custom--auth--field-gap) 0;
	color: var(--wp--custom--color--auth--text);
	font-family: var(--wp--custom--text--caption--font-family);
	font-size: var(--wp--custom--text--caption--font-size);
	font-weight: var(--wp--custom--text--caption--font-weight);
	line-height: var(--wp--custom--text--caption--line-height);
	letter-spacing: var(--wp--custom--text--caption--letter-spacing);
	text-align: center;
}

.mk-auth__separator {
	margin-block: var(--wp--custom--auth--separator-margin);
	color: var(--wp--custom--color--auth--separator);
	font-family: var(--wp--custom--text--caption--font-family);
	font-size: var(--wp--custom--text--caption--font-size);
	font-weight: var(--wp--custom--text--caption--font-weight);
	line-height: var(--wp--custom--text--caption--line-height);
	letter-spacing: var(--wp--custom--text--caption--letter-spacing);
	text-align: center;
}

.mk-auth__fields {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--auth--field-gap);
}

.mk-auth__forgot,
.mk-auth__switch,
.mk-auth__error,
.mk-auth__done {
	font-family: var(--wp--custom--text--body-small--font-family);
	font-size: var(--wp--custom--text--body-small--font-size);
	font-weight: var(--wp--custom--text--body-small--font-weight);
	line-height: var(--wp--custom--text--body-small--line-height);
	letter-spacing: var(--wp--custom--text--body-small--letter-spacing);
}

.mk-auth__forgot {
	margin-block: var(--wp--custom--auth--link-gap) 0;
}

.mk-auth__terms {
	margin-block: var(--wp--custom--auth--terms-margin);
}

.mk-auth__error {
	margin-block: var(--wp--custom--auth--field-gap) 0;
	color: var(--wp--custom--color--field--error);
}

.mk-auth .mk-auth__submit {
	display: flex;
	inline-size: 100%;
	margin-block: var(--wp--custom--auth--button-margin-top)
		var(--wp--custom--auth--button-margin-bottom);
}

.mk-auth__done {
	margin-block: 0 var(--wp--custom--auth--button-margin-bottom);
	color: var(--wp--custom--color--auth--text);
}

.mk-auth__switch {
	margin: 0;
	color: var(--wp--custom--color--auth--text);
	text-align: center;
}

/* Honeypot: out of sight and out of the tab order. */
.mk-auth__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}