/**
 * NeoYug branding for the MasterStudy authorization screens.
 *
 * Covers the login modal, the "Restore password" step inside it, the
 * standalone /forgot-password/ page, and the new-password screen reached
 * from the reset email (masterstudy-authorization_new-pass).
 *
 * Typography: Poppins throughout, named in `--ny-font` and applied to
 * ELEMENTS ONLY. Pseudo-elements are deliberately excluded, because
 * MasterStudy draws the back arrow and the show-password eye with its
 * `stmlms` icon font on ::before / ::after. Do not add `*::before,
 * *::after` to the font rule or both icons turn into stray letters.
 * Dosis appears on one line per screen and nowhere else, see section 10.
 *
 * Verified against MasterStudy free 3.7.38 / Pro 4.8.23. The three reset
 * templates (restore-password.php, restore-pass-email.php, new-pass.php)
 * are byte-identical to 3.7.16, so this survives the update.
 */

/* --------------------------------------------------------------------- *
 * 1. Scope + tokens
 *
 * MasterStudy's primary button reads `var(--accent-100)`. Redefining that
 * one variable inside our scope rebrands the button with no specificity
 * fight, which is why there is almost no !important below.
 * --------------------------------------------------------------------- */

.masterstudy-authorization,
.masterstudy-authorization-modal {
	--ny-purple: #8d22c3;
	--ny-purple-deep: #261a48;
	--ny-cream: #faf9f6;
	--ny-border: #9c8c80;          /* 3.24:1 on white, clears WCAG 3:1 for controls */
	--ny-border-quiet: #e3dbd4;
	--ny-placeholder: #7a6c72;     /* 4.98:1 on white */
	--ny-ink: #261a48;
	--ny-radius: 10px;

	/* One place to change the typeface. The fallbacks matter: a webfont
	   request can fail or be blocked, and these screens must stay readable
	   when it does. */
	--ny-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* MasterStudy's own token, repointed at the brand purple. */
	--accent-100: var(--ny-purple);
}

/* --------------------------------------------------------------------- *
 * 2. Poppins (v1.5.0)
 *
 * Was `inherit`, which handed the screens whatever the theme happened to
 * set. That is fine on the account page, where the theme is loaded, and
 * meaningless on wp-login.php, where there is no theme at all and inherit
 * resolves to WordPress's own system stack. Poppins is now named, so every
 * screen this plugin touches reads the same whichever document it is in.
 *
 * ELEMENTS ONLY, and this is not a style preference. MasterStudy draws the
 * back arrow and the show-password eye with `font-family: stmlms` on
 * ::before and ::after. Adding *::before, *::after here turns both icons
 * into stray letters. Form controls need naming individually because they
 * do not inherit font-family from an ancestor by default.
 * --------------------------------------------------------------------- */

.masterstudy-authorization,
.masterstudy-authorization-modal {
	font-family: var(--ny-font);
}

.masterstudy-authorization input,
.masterstudy-authorization textarea,
.masterstudy-authorization select,
.masterstudy-authorization button,
.masterstudy-authorization a,
.masterstudy-authorization span,
.masterstudy-authorization label,
.masterstudy-authorization p,
.masterstudy-authorization div,
.masterstudy-authorization li,
.masterstudy-authorization-modal input,
.masterstudy-authorization-modal textarea,
.masterstudy-authorization-modal select,
.masterstudy-authorization-modal button,
.masterstudy-authorization-modal a,
.masterstudy-authorization-modal span,
.masterstudy-authorization-modal label,
.masterstudy-authorization-modal p,
.masterstudy-authorization-modal div,
.masterstudy-authorization-modal li {
	font-family: var(--ny-font);
}

/* --------------------------------------------------------------------- *
 * 3. Panel
 * --------------------------------------------------------------------- */

/*
 * NO BORDER (v1.7.0, Kunal). The wrapper sits inside MasterStudy's own
 * `.masterstudy__login-page` panel, which already draws a white card, so a
 * second outline was a box inside a box. It also read as broken rather than
 * merely redundant: the header sits at the very top of the wrapper, so the
 * border ran straight along the "Sign In" line.
 *
 * Padding stays. It is what holds the fields off the panel edge, and the
 * panel's own padding is not enough on a phone.
 */
.masterstudy-authorization__wrapper {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 32px 28px;
}

.masterstudy-authorization__header-title,
.masterstudy-authorization__restore-header-title {
	color: var(--ny-purple-deep);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------- *
 * 4. Fields
 *
 * Height goes 40px -> 48px and font-size 14px -> 16px. The 16px is not
 * cosmetic: iOS Safari auto-zooms the page on focus for any input under
 * 16px, which is what makes the reset screen jump on an iPhone.
 * --------------------------------------------------------------------- */

.masterstudy-authorization__form-input {
	height: 48px;
	padding: 0 16px;
	font-size: 16px;
	color: var(--ny-ink);
	background: #fff;
	border: 1px solid var(--ny-border);
	border-radius: var(--ny-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.masterstudy-authorization__form-input::placeholder {
	color: var(--ny-placeholder);
	opacity: 1;
}

.masterstudy-authorization__form-input:focus,
.masterstudy-authorization__form-input:focus-visible {
	border-color: var(--ny-purple);
	box-shadow: 0 0 0 3px rgba(141, 34, 195, 0.16);
	outline: none;
}

/* Keep a visible ring for keyboard users even where the box-shadow is
   suppressed by a forced-colors or high-contrast mode. */
@media (forced-colors: active) {
	.masterstudy-authorization__form-input:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 1px;
	}
}

.masterstudy-authorization__form-field {
	margin-bottom: 14px;
}

/* Show/hide password eye sits inside the taller field. */
.masterstudy-authorization__form-show-pass {
	color: var(--ny-placeholder);
}

.masterstudy-authorization__form-show-pass:hover {
	color: var(--ny-purple);
}

/* --------------------------------------------------------------------- *
 * 5. Errors
 *
 * MasterStudy renders the error text as HTML into this slot, so it also
 * carries the "no account with that username or email" message and the
 * social-login recovery CTA.
 * --------------------------------------------------------------------- */

.masterstudy-authorization__form-field-error {
	font-size: 13px;
	line-height: 1.45;
	margin-top: 6px;
}

.masterstudy-authorization__form-field-error a {
	color: var(--ny-purple);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------- *
 * 6. Primary action
 *
 * Colour comes from --accent-100 above. This block only handles shape and
 * the hover/active states, which MasterStudy leaves flat.
 * --------------------------------------------------------------------- */

.masterstudy-authorization .masterstudy-button.masterstudy-button_style-primary {
	width: 100%;
	height: 48px;
	border-radius: var(--ny-radius);
	transition: background 0.2s ease, transform 0.1s ease;
}

.masterstudy-authorization .masterstudy-button.masterstudy-button_style-primary:hover {
	background: var(--ny-purple-deep);
}

.masterstudy-authorization .masterstudy-button.masterstudy-button_style-primary:active {
	transform: translateY(1px);
}

.masterstudy-authorization .masterstudy-button.masterstudy-button_style-primary .masterstudy-button__title {
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
}

.masterstudy-authorization__actions {
	margin-top: 20px;
}

/* --------------------------------------------------------------------- *
 * 7. Back control on the restore step
 * --------------------------------------------------------------------- */

.masterstudy-authorization__restore-header {
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.masterstudy-authorization__restore-header-back {
	color: var(--ny-purple);
	cursor: pointer;
}

/* --------------------------------------------------------------------- *
 * 8. Mobile
 * --------------------------------------------------------------------- */

@media (max-width: 560px) {
	.masterstudy-authorization__wrapper {
		padding: 24px 18px;
		border-radius: 14px;
	}
}

/* --------------------------------------------------------------------- *
 * 9. Motion preference
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.masterstudy-authorization *,
	.masterstudy-authorization *::before,
	.masterstudy-authorization *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------- *
 * 10. Dosis, in one place (v1.1.0, base font named in v1.5.0)
 *
 * Section 2 puts every element in Poppins. Dosis is not a second body face
 * here. It is used on the one line per screen that says where you are, so
 * that line reads as a signpost rather than as more copy, and nowhere else.
 *
 * Gated on a body class rather than loaded unconditionally, so the setting
 * that turns the accent off also stops the webfont request.
 * --------------------------------------------------------------------- */

.nya-has-display .masterstudy-authorization__header-title,
.nya-has-display .masterstudy-authorization__restore-header-title {
	font-family: 'Dosis', var(--ny-font);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------- *
 * 11. Remembered method
 *
 * A note, not a warning. It is read from the browser, so it is true only
 * for this device and the copy says exactly that.
 * --------------------------------------------------------------------- */

.nya-hint {
	background: rgba(141, 34, 195, 0.08);
	border-radius: 10px;
	padding: 11px 13px;
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ny-purple-deep);
}

/* --------------------------------------------------------------------- *
 * 12. Recovery message
 *
 * MasterStudy prints server messages into the field-error slot as HTML, so
 * the Google route can be a real control. The slot is styled for one line
 * of red text, which is why everything here resets it.
 * --------------------------------------------------------------------- */

.masterstudy-authorization__form-field-error:has(.nya-msg) {
	color: inherit;
}

.nya-msg {
	display: block;
	background: var(--ny-cream);
	border: 1px solid var(--ny-border-quiet);
	border-radius: 12px;
	padding: 16px;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ny-ink);
	text-align: left;
}

.nya-msg strong {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	color: var(--ny-purple-deep);
}

.nya-addr {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--ny-border-quiet);
	border-radius: 6px;
	padding: 1px 7px;
	font-size: 13px;
}

.nya-cta {
	/* Renders as an <a> when the addon gives us a real OAuth URL and as a
	   <button> when it does not, so this has to sit right either way. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin-top: 14px;
	text-decoration: none;
	background: var(--ny-purple);
	color: #fff;
	border: 0;
	border-radius: var(--ny-radius);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.nya-cta:hover {
	background: var(--ny-purple-deep);
	color: #fff;
	text-decoration: none;
}

.nya-alt {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 10px;
	background: none;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--ny-placeholder);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.nya-alt:hover {
	background: #fff;
	color: var(--ny-purple-deep);
}

.nya-alt--done {
	color: var(--ny-purple-deep);
	cursor: default;
}

/* --------------------------------------------------------------------- *
 * 13. Remember me (v1.7.0)
 *
 * The checkbox and its label were at opposite ends of the row: the box hard
 * left, the words hard right, with the full width of the form between them.
 * MasterStudy's markup is
 *
 *   .masterstudy-authorization__actions
 *     .masterstudy-authorization__actions-remember
 *       .masterstudy-authorization__checkbox  > input + span
 *       .masterstudy-authorization__checkbox-title
 *
 * and the remember block was being stretched to the full row and spreading
 * its two children apart. Pulling it back to its content width and packing
 * the pair to the start puts the label beside the box where it reads as one
 * control, and keeps the whole thing left aligned with the fields above.
 *
 * Two classes deep so these beat MasterStudy's own single-class rules
 * without reaching for !important.
 * --------------------------------------------------------------------- */

.masterstudy-authorization .masterstudy-authorization__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.masterstudy-authorization .masterstudy-authorization__actions-remember {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: auto;
	margin-right: auto;
	text-align: left;
}

.masterstudy-authorization .masterstudy-authorization__checkbox {
	flex: 0 0 auto;
	margin: 0;
}

.masterstudy-authorization .masterstudy-authorization__checkbox-title {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	text-align: left;
	/* The label is a plain span, so it is not clickable on its own. Make the
	   cursor honest about that rather than implying a hit target. */
	cursor: default;
}

/* --------------------------------------------------------------------- *
 * 14. Inline hint under the address field (v1.8.0)
 *
 * Quieter than the recovery panel on purpose. The panel is an answer to
 * something the member did; this is a suggestion offered before they have
 * done anything, and it must not read like an error sitting under a field
 * they have filled in correctly.
 *
 * The --sure variant is the one backed by a real lookup, so it earns the
 * stronger tint. Without the lookup setting on, only the quiet one appears.
 * --------------------------------------------------------------------- */

.nya-inline-hint {
	margin: -6px 0 16px;
	padding: 10px 12px;
	background: var(--ny-cream);
	border-left: 2px solid var(--ny-border-quiet);
	border-radius: 0;
	font-family: var(--ny-font);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ny-placeholder);
}

.nya-inline-hint--sure {
	background: rgba(141, 34, 195, 0.08);
	border-left-color: var(--ny-purple);
	color: var(--ny-purple-deep);
}