/**
 * ReportedIP Hive — Two-Factor Authentication Styles.
 *
 * Follows the ReportedIP Design System (rip-* prefix).
 * Used on both the wp-login.php challenge page and admin 2FA settings.
 *
 * @package   ReportedIP_Hive
 * @author    Patrick Schlesinger <ps@cms-admins.de>
 * @copyright 2025-2026 Patrick Schlesinger
 * @license   GPL-2.0-or-later
 * @since     1.3.0
 */

/* ==========================================================================
   Bulletproof scope locks.
   2FA UI runs in three hostile contexts (admin, wp-login, frontend) where
   themes / plugins inject CSS via wp_head() / login_enqueue_scripts /
   wp_enqueue_scripts. The rules below pin the visual primitives that themes
   most commonly override (font, hidden state, list bullets, link colors).
   Pair with wizard.css which locks the `.rip-wizard-page` body chrome.
   ========================================================================== */

body.rip-2fa-onboarding .rip-2fa-step[hidden],
body.rip-wizard-page .rip-2fa-step[hidden] {
	display: none !important;
}

body.rip-2fa-onboarding .rip-2fa-step,
body.rip-wizard-page .rip-2fa-step {
	width: 100%;
}

body.rip-2fa-onboarding ul,
body.rip-2fa-onboarding ol,
body.rip-2fa-onboarding li {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.rip-2fa-onboarding a:not(.rip-button) {
	color: var(--rip-primary, #4F46E5);
	text-decoration: none;
}

body.rip-2fa-onboarding a:not(.rip-button):hover,
body.rip-2fa-onboarding a:not(.rip-button):focus-visible {
	color: var(--rip-primary-dark, #3730A3);
	text-decoration: underline;
}

body.rip-2fa-onboarding a.rip-button--primary,
body.rip-2fa-onboarding a.rip-button--primary:hover,
body.rip-2fa-onboarding a.rip-button--primary:focus-visible {
	color: #fff;
	text-decoration: none;
}

body.rip-2fa-onboarding img,
body.rip-2fa-onboarding svg {
	max-width: 100%;
	height: auto;
}

body.login-action-reportedip_2fa .rip-2fa-challenge,
body.login-action-reportedip_2fa .rip-2fa-challenge *,
body.login-action-reportedip_2fa_reset .rip-2fa-challenge,
body.login-action-reportedip_2fa_reset .rip-2fa-challenge * {
	font-family: var(--rip-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

body.login-action-reportedip_2fa .rip-2fa-challenge__panel[hidden],
body.login-action-reportedip_2fa .rip-2fa-challenge__phase[hidden],
body.login-action-reportedip_2fa .rip-2fa-challenge [hidden],
body.login-action-reportedip_2fa_reset .rip-2fa-challenge__panel[hidden],
body.login-action-reportedip_2fa_reset .rip-2fa-challenge__phase[hidden],
body.login-action-reportedip_2fa_reset .rip-2fa-challenge [hidden] {
	display: none !important;
}

/* ==========================================================================
   Login Page - 2FA Challenge  (compact + WCAG-AA + design-system tokens)
   ========================================================================== */

/* wp-login's #login is ~320px, too narrow for our tabs + input. Widen only on
 * our challenge action page so the standard login screen is unaffected. */
body.login-action-reportedip_2fa #login,
body.login-action-reportedip_2fa_reset #login {
	width: 100%;
	max-width: 460px;
	padding: 5vh 16px 32px;
}

body.login-action-reportedip_2fa #login > h1,
body.login-action-reportedip_2fa #login #nav,
body.login-action-reportedip_2fa #login #backtoblog,
body.login-action-reportedip_2fa_reset #login > h1,
body.login-action-reportedip_2fa_reset #login #nav,
body.login-action-reportedip_2fa_reset #login #backtoblog {
	display: none;
}

body.login-action-reportedip_2fa #login .message,
body.login-action-reportedip_2fa #login #login_error,
body.login-action-reportedip_2fa_reset #login .message,
body.login-action-reportedip_2fa_reset #login #login_error {
	max-width: 460px;
	margin: 0 auto var(--rip-space-3, 0.75rem);
	border-left-color: var(--rip-danger, #EF4444);
	border-radius: var(--rip-radius, 6px);
	box-shadow: var(--rip-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.rip-2fa-challenge {
	max-width: 460px;
	margin: 0 auto;
	padding: var(--rip-space-6, 1.5rem) var(--rip-space-5, 1.25rem) var(--rip-space-5, 1.25rem);
	background: #fff;
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	border-radius: var(--rip-radius-xl, 12px);
	box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06), 0 2px 4px rgba(17, 24, 39, 0.04);
	font-family: var(--rip-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	color: var(--rip-gray-800, #1F2937);
	box-sizing: border-box;
}

.rip-2fa-challenge *,
.rip-2fa-challenge *::before,
.rip-2fa-challenge *::after {
	box-sizing: border-box;
	font-family: inherit;
}

.rip-2fa-challenge__header {
	text-align: center;
	margin: 0 0 var(--rip-space-5, 1.25rem);
}

.rip-2fa-challenge__icon {
	width: 44px;
	height: 44px;
	margin: 0 auto var(--rip-space-3, 0.75rem);
	color: var(--rip-primary, #4F46E5);
}

.rip-2fa-challenge__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.rip-2fa-challenge__title {
	font-size: var(--rip-text-xl, 1.25rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--rip-gray-900, #111827);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}

.rip-2fa-challenge__subtitle {
	font-size: var(--rip-text-sm, 0.875rem);
	line-height: 1.45;
	color: var(--rip-gray-500, #6B7280);
	margin: 0;
}

.rip-2fa-challenge__subtitle strong {
	color: var(--rip-gray-800, #1F2937);
	font-weight: 600;
}

/* Method tabs — segmented-control. Wraps to 2 rows if >3 methods. */
.rip-2fa-challenge__methods {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	background: var(--rip-gray-100, #F3F4F6);
	border-radius: var(--rip-radius-lg, 8px);
	padding: 3px;
	margin: 0 0 var(--rip-space-5, 1.25rem);
}

.rip-2fa-challenge__method-tab {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 10px;
	border: none;
	border-radius: var(--rip-radius, 6px);
	background: transparent;
	color: var(--rip-gray-600, #4B5563);
	font-size: var(--rip-text-sm, 0.875rem);
	font-weight: 500;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

a.rip-2fa-challenge__method-tab:hover,
a.rip-2fa-challenge__method-tab:focus {
	text-decoration: none;
}

.rip-2fa-challenge__method-tab:hover {
	color: var(--rip-gray-900, #111827);
}

.rip-2fa-challenge__method-tab:focus-visible {
	outline: 2px solid var(--rip-primary, #4F46E5);
	outline-offset: 2px;
}

.rip-2fa-challenge__method-tab[aria-selected="true"] {
	background: #fff;
	color: var(--rip-primary, #4F46E5);
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}

.rip-2fa-challenge__method-tab svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.rip-2fa-challenge__method-tab-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Panels */
.rip-2fa-challenge__panel {
	display: none;
}

.rip-2fa-challenge__panel[hidden] {
	display: none !important;
}

.rip-2fa-challenge__panel--active {
	display: block;
	animation: rip-2fa-fade 0.15s ease;
}

@keyframes rip-2fa-fade {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: none; }
}

.rip-2fa-challenge__phase[hidden] {
	display: none;
}

.rip-2fa-challenge__instruction {
	font-size: var(--rip-text-sm, 0.875rem);
	line-height: 1.5;
	color: var(--rip-gray-700, #374151);
	margin: 0 0 var(--rip-space-4, 1rem);
	text-align: center;
}

.rip-2fa-challenge__instruction strong,
.rip-2fa-challenge__destination {
	color: var(--rip-gray-900, #111827);
	font-weight: 600;
}

.rip-2fa-challenge__hint {
	margin: calc(-1 * var(--rip-space-2, 0.5rem)) 0 var(--rip-space-4, 1rem);
	font-size: var(--rip-text-xs, 0.75rem);
	color: var(--rip-gray-500, #6B7280);
	text-align: center;
	line-height: 1.4;
}

/* Code input — only this element uses the mono font, intentionally. */
.rip-2fa-challenge__input-wrapper {
	margin: 0 0 var(--rip-space-3, 0.75rem);
}

.rip-2fa-challenge__input {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--rip-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	letter-spacing: 0.35em;
	color: var(--rip-gray-900, #111827);
	background: #fff;
	border: 1.5px solid var(--rip-gray-300, #D1D5DB);
	border-radius: var(--rip-radius-lg, 8px);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rip-2fa-challenge__input:focus {
	outline: none;
	border-color: var(--rip-primary, #4F46E5);
	box-shadow: 0 0 0 4px var(--rip-primary-100, rgba(79, 70, 229, 0.1));
}

.rip-2fa-challenge__input--recovery {
	font-size: var(--rip-text-lg, 1.125rem);
	letter-spacing: 0.18em;
}

/* Phase-1 CTA (Code senden) — the rip-button classes handle visuals, we only
 * ensure it stretches full-width inside the compact card. */
.rip-2fa-challenge__resend-btn {
	width: 100%;
	margin-top: var(--rip-space-2, 0.5rem);
}

/* Phase-2 resend — text link rendered as a <button> for AJAX binding. */
.rip-2fa-challenge__resend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: var(--rip-space-2, 0.5rem) 0 0;
	font-size: var(--rip-text-sm, 0.875rem);
	color: var(--rip-gray-600, #4B5563);
	text-align: center;
}

.rip-2fa-challenge__resend-link {
	all: unset;
	color: var(--rip-primary, #4F46E5);
	font-weight: 500;
	cursor: pointer;
	border-radius: 4px;
}

.rip-2fa-challenge__resend-link:hover {
	text-decoration: underline;
}

.rip-2fa-challenge__resend-link:focus-visible {
	outline: 2px solid var(--rip-primary, #4F46E5);
	outline-offset: 3px;
}

.rip-2fa-challenge__resend-link[aria-busy="true"]::after {
	content: "…";
}

.rip-2fa-challenge__resend-link--disabled,
.rip-2fa-challenge__resend-link:disabled {
	color: var(--rip-gray-400, #9CA3AF);
	pointer-events: none;
	cursor: not-allowed;
	text-decoration: none;
}

.rip-2fa-challenge__timer {
	color: var(--rip-gray-400, #9CA3AF);
	font-size: var(--rip-text-xs, 0.75rem);
	font-variant-numeric: tabular-nums;
}

/* Inline aria-live status (resend success / error). */
.rip-2fa-challenge__live {
	min-height: 1.25em;
	margin: var(--rip-space-3, 0.75rem) 0 0;
	font-size: var(--rip-text-sm, 0.875rem);
	text-align: center;
	color: var(--rip-gray-600, #4B5563);
}

.rip-2fa-challenge__live--success { color: var(--rip-success, #10B981); }
.rip-2fa-challenge__live--error   { color: var(--rip-danger, #EF4444); }

/* Trust device */
.rip-2fa-challenge__trust {
	margin: var(--rip-space-4, 1rem) 0 0;
	padding-top: var(--rip-space-3, 0.75rem);
	border-top: 1px solid var(--rip-gray-100, #F3F4F6);
}

.rip-2fa-challenge__trust-label {
	display: inline-flex;
	align-items: center;
	gap: var(--rip-space-2, 0.5rem);
	font-size: var(--rip-text-sm, 0.875rem);
	color: var(--rip-gray-600, #4B5563);
	cursor: pointer;
	line-height: 1.4;
}

.rip-2fa-challenge__trust-label input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--rip-primary, #4F46E5);
}

/* Actions — rely on rip-button classes from design-system.css. */
.rip-2fa-challenge__actions {
	margin: var(--rip-space-4, 1rem) 0 0;
}

.rip-2fa-challenge__submit {
	width: 100%;
	min-height: 44px;
	box-shadow: 0 2px 6px rgba(79, 70, 229, 0.15);
}

.rip-2fa-challenge__back {
	margin: var(--rip-space-3, 0.75rem) 0 0;
	text-align: center;
	font-size: var(--rip-text-sm, 0.875rem);
}

.rip-2fa-challenge__back a {
	color: var(--rip-gray-500, #6B7280);
	text-decoration: none;
}

.rip-2fa-challenge__back a:hover,
.rip-2fa-challenge__back a:focus-visible {
	color: var(--rip-primary, #4F46E5);
}

/* ==========================================================================
   Admin - 2FA Setup & Settings
   ========================================================================== */

.rip-2fa-setup {
	max-width: 600px;
}

.rip-2fa-setup__section {
	background: #fff;
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	border-radius: var(--rip-radius-lg, 8px);
	padding: var(--rip-space-6, 1.5rem);
	margin-bottom: var(--rip-space-5, 1.25rem);
}

.rip-2fa-setup__section-title {
	font-size: var(--rip-text-lg, 1.125rem);
	font-weight: 600;
	color: var(--rip-gray-900, #111827);
	margin: 0 0 var(--rip-space-4, 1rem);
	display: flex;
	align-items: center;
	gap: var(--rip-space-2, 0.5rem);
}

.rip-2fa-setup__status {
	display: inline-flex;
	align-items: center;
	gap: var(--rip-space-2, 0.5rem);
	padding: var(--rip-space-1, 0.25rem) var(--rip-space-3, 0.75rem);
	border-radius: var(--rip-radius-full, 9999px);
	font-size: var(--rip-text-sm, 0.875rem);
	font-weight: 500;
}

.rip-2fa-setup__status--enabled {
	background: var(--rip-success-bg, rgba(16, 185, 129, 0.1));
	color: var(--rip-success, #10B981);
}

.rip-2fa-setup__status--disabled {
	background: var(--rip-gray-100, #F3F4F6);
	color: var(--rip-gray-500, #6B7280);
}

/* QR Code Display */
.rip-2fa-setup__qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rip-space-4, 1rem);
	padding: var(--rip-space-6, 1.5rem);
	background: var(--rip-gray-50, #F9FAFB);
	border-radius: var(--rip-radius-lg, 8px);
	margin-bottom: var(--rip-space-4, 1rem);
}

.rip-2fa-setup__qr canvas,
.rip-2fa-setup__qr img {
	border: 4px solid #fff;
	border-radius: var(--rip-radius, 6px);
	box-shadow: var(--rip-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

.rip-2fa-setup__secret {
	font-family: var(--rip-font-mono, monospace);
	font-size: var(--rip-text-sm, 0.875rem);
	background: var(--rip-gray-100, #F3F4F6);
	padding: var(--rip-space-2, 0.5rem) var(--rip-space-4, 1rem);
	border-radius: var(--rip-radius, 6px);
	word-break: break-all;
	user-select: all;
	color: var(--rip-gray-700, #374151);
}

/* Recovery Codes Display */
.rip-2fa-recovery-codes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rip-space-2, 0.5rem);
	padding: var(--rip-space-4, 1rem);
	background: var(--rip-gray-50, #F9FAFB);
	border-radius: var(--rip-radius-lg, 8px);
	margin-bottom: var(--rip-space-4, 1rem);
}

.rip-2fa-recovery-codes__code {
	font-family: var(--rip-font-mono, monospace);
	font-size: var(--rip-text-sm, 0.875rem);
	padding: var(--rip-space-2, 0.5rem) var(--rip-space-3, 0.75rem);
	background: #fff;
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	border-radius: var(--rip-radius, 6px);
	text-align: center;
	color: var(--rip-gray-800, #1F2937);
}

.rip-2fa-recovery-codes__actions {
	display: flex;
	gap: var(--rip-space-2, 0.5rem);
	margin-top: var(--rip-space-3, 0.75rem);
}

/* Trusted Devices List */
.rip-2fa-device-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rip-2fa-device-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--rip-space-3, 0.75rem) var(--rip-space-4, 1rem);
	border-bottom: 1px solid var(--rip-gray-100, #F3F4F6);
}

.rip-2fa-device-list__item:last-child {
	border-bottom: none;
}

.rip-2fa-device-list__info {
	flex: 1;
}

.rip-2fa-device-list__name {
	font-size: var(--rip-text-sm, 0.875rem);
	font-weight: 500;
	color: var(--rip-gray-800, #1F2937);
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rip-2fa-device-list__meta {
	font-size: var(--rip-text-xs, 0.75rem);
	color: var(--rip-gray-400, #9CA3AF);
}

/* Admin Warnings */
.rip-2fa-warning {
	display: flex;
	align-items: flex-start;
	gap: var(--rip-space-3, 0.75rem);
	padding: var(--rip-space-4, 1rem);
	border-radius: var(--rip-radius, 6px);
	margin-bottom: var(--rip-space-4, 1rem);
}

.rip-2fa-warning--low {
	background: var(--rip-warning-bg, rgba(245, 158, 11, 0.1));
	color: #92400E;
}

.rip-2fa-warning--critical {
	background: var(--rip-danger-bg, rgba(239, 68, 68, 0.1));
	color: #991B1B;
}

.rip-2fa-warning__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 782px) {
	body.login-action-reportedip_2fa #login,
	body.login-action-reportedip_2fa_reset #login {
		padding: var(--rip-space-4, 1rem) 12px;
	}

	.rip-2fa-challenge {
		max-width: 100%;
		padding: var(--rip-space-5, 1.25rem) var(--rip-space-4, 1rem);
	}

	.rip-2fa-challenge__input {
		font-size: var(--rip-text-xl, 1.25rem);
		letter-spacing: 0.28em;
	}

	.rip-2fa-recovery-codes {
		grid-template-columns: 1fr;
	}
}

/* Icon-only tabs on very narrow widths so 5 methods still fit one row. */
@media (max-width: 480px) {
	.rip-2fa-challenge--multi .rip-2fa-challenge__method-tab {
		padding: 10px 6px;
	}

	.rip-2fa-challenge--multi .rip-2fa-challenge__method-tab-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ==========================================================================
   Onboarding Wizard — Step 3 Setup Panels
   ========================================================================== */

.rip-2fa-onboarding .rip-wizard__subtitle {
	color: var(--rip-gray-300, #D1D5DB);
}

.rip-2fa-setup-panel {
	background: var(--rip-gray-50, #F9FAFB);
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	border-radius: var(--rip-radius-lg, 8px);
	padding: var(--rip-space-6, 1.5rem);
	margin-bottom: var(--rip-space-4, 1rem);
	color: var(--rip-gray-800, #1F2937);
}

.rip-2fa-setup-panel h2 {
	margin-top: 0;
	color: var(--rip-gray-900, #111827);
}

.rip-2fa-steps {
	padding-left: var(--rip-space-6, 1.5rem);
}

.rip-2fa-steps li {
	margin-bottom: var(--rip-space-4, 1rem);
}

.rip-2fa-apps {
	margin-top: var(--rip-space-2, 0.5rem);
	font-size: var(--rip-text-sm, 0.875rem);
	color: var(--rip-gray-600, #4B5563);
}

.rip-2fa-apps a {
	color: var(--rip-primary, #4F46E5);
	text-decoration: none;
}

.rip-2fa-apps a:hover {
	text-decoration: underline;
}

.rip-2fa-qr-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rip-space-6, 1.5rem);
	align-items: flex-start;
	margin: var(--rip-space-4, 1rem) 0;
	padding: var(--rip-space-4, 1rem);
	background: white;
	border-radius: var(--rip-radius, 6px);
	border: 1px solid var(--rip-gray-200, #E5E7EB);
}

.rip-2fa-qr {
	flex: 0 0 auto;
	background: white;
	padding: var(--rip-space-2, 0.5rem);
	border-radius: var(--rip-radius, 6px);
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 220px;
	min-height: 220px;
}

.rip-2fa-secret-box {
	flex: 1 1 260px;
}

.rip-2fa-secret-row {
	display: flex;
	gap: var(--rip-space-2, 0.5rem);
	margin-top: var(--rip-space-2, 0.5rem);
}

.rip-2fa-secret-row input {
	font-family: var(--rip-font-mono, monospace);
	font-size: var(--rip-text-sm, 0.875rem);
}

.rip-2fa-code-confirm {
	display: flex;
	gap: var(--rip-space-2, 0.5rem);
	align-items: center;
	margin-top: var(--rip-space-3, 0.75rem);
}

.rip-2fa-code-input {
	font-family: var(--rip-font-mono, monospace);
	font-size: var(--rip-text-xl, 1.25rem);
	letter-spacing: 0.3em;
	text-align: center;
	width: 170px;
}

.rip-2fa-inline-status {
	font-size: var(--rip-text-sm, 0.875rem);
	margin: var(--rip-space-2, 0.5rem) 0 0;
	min-height: 1.25em;
}

.rip-2fa-inline-status--success { color: var(--rip-success, #10B981); }
.rip-2fa-inline-status--error   { color: var(--rip-danger, #EF4444); }
.rip-2fa-inline-status--warning { color: var(--rip-warning, #F59E0B); }

/* Recovery codes grid */
.rip-2fa-recovery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--rip-space-2, 0.5rem);
	margin: var(--rip-space-4, 1rem) 0;
	padding: var(--rip-space-4, 1rem);
	background: var(--rip-gray-900, #111827);
	border-radius: var(--rip-radius-lg, 8px);
}

.rip-2fa-recovery-code {
	display: block;
	padding: var(--rip-space-2, 0.5rem);
	text-align: center;
	background: rgba(255, 255, 255, 0.07);
	color: #E5E7EB;
	font-family: var(--rip-font-mono, monospace);
	font-size: var(--rip-text-sm, 0.875rem);
	letter-spacing: 0.05em;
	border-radius: var(--rip-radius-sm, 4px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	user-select: all;
}

.rip-2fa-recovery-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rip-space-2, 0.5rem);
	justify-content: center;
	margin-top: var(--rip-space-4, 1rem);
}

.rip-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--rip-space-2, 0.5rem);
	cursor: pointer;
	color: var(--rip-gray-700, #374151);
	font-size: var(--rip-text-sm, 0.875rem);
}

.rip-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--rip-primary, #4F46E5);
}

/* Skip counter in wizard header */
.rip-skip-counter {
	display: inline-block;
	margin-left: var(--rip-space-2, 0.5rem);
	opacity: 0.8;
	font-size: var(--rip-text-xs, 0.75rem);
}

/* Focus states — WCAG AA */
.rip-2fa-onboarding :focus-visible {
	outline: 2px solid var(--rip-primary, #4F46E5);
	outline-offset: 2px;
	border-radius: var(--rip-radius-sm, 4px);
}

/* Method card selection highlight */
.rip-2fa-methods .rip-mode-card {
	cursor: pointer;
	transition: var(--rip-transition, all 0.15s ease);
}

.rip-2fa-methods .rip-mode-card--selected {
	border-color: var(--rip-primary, #4F46E5);
	box-shadow: 0 0 0 2px var(--rip-primary-100, rgba(79, 70, 229, 0.1));
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.rip-2fa-setup-panel,
	.rip-2fa-methods .rip-mode-card {
		transition: none;
	}
}

/* ==========================================================================
   2FA-Status Dashboard page — light additions to the design system.
   ========================================================================== */

.rip-card__actions {
	display: flex;
	align-items: center;
	gap: var(--rip-space-2, 0.5rem);
}

.rip-muted {
	color: var(--rip-gray-500, #6B7280);
	font-size: var(--rip-text-xs, 0.75rem);
}

.rip-2fa-dashboard__users-card .rip-table {
	margin: 0;
}

/* Fallback `.rip-badge` (plain neutral variant) — used for "optional" status. */
.rip-badge:not([class*="rip-badge--"]) {
	background: var(--rip-gray-100, #F3F4F6);
	color: var(--rip-gray-700, #374151);
}

/* ==========================================================================
   Onboarding page — light & friendly overrides.
   Scoped to `.rip-2fa-onboarding` so the existing setup-wizard keeps its dark
   theme and only the 2FA guide feels welcoming.
   ========================================================================== */

body.rip-2fa-onboarding {
	background: linear-gradient(180deg, #F9FAFB 0%, #EEF2FF 100%);
	color: var(--rip-gray-800, #1F2937);
}

body.rip-2fa-onboarding .rip-wizard {
	background: transparent;
	color: var(--rip-gray-800, #1F2937);
}

body.rip-2fa-onboarding .rip-wizard__header {
	background: #fff;
	border-bottom: 1px solid var(--rip-gray-200, #E5E7EB);
	box-shadow: var(--rip-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
	color: var(--rip-gray-900, #111827);
}

body.rip-2fa-onboarding .rip-wizard__logo,
body.rip-2fa-onboarding .rip-wizard__logo-text {
	color: var(--rip-primary, #4F46E5);
}

body.rip-2fa-onboarding .rip-wizard__skip-link {
	color: var(--rip-gray-600, #4B5563);
	text-decoration: none;
}

body.rip-2fa-onboarding .rip-wizard__skip-link:hover {
	color: var(--rip-primary, #4F46E5);
}

body.rip-2fa-onboarding .rip-wizard__content {
	background: transparent;
	color: var(--rip-gray-800, #1F2937);
}

body.rip-2fa-onboarding .rip-wizard__title {
	color: var(--rip-gray-900, #111827);
}

body.rip-2fa-onboarding .rip-wizard__subtitle {
	color: var(--rip-gray-600, #4B5563);
}

/* Step indicator — neutrals on the light background. */
body.rip-2fa-onboarding .rip-wizard__step-number {
	background: var(--rip-gray-200, #E5E7EB);
	color: var(--rip-gray-600, #4B5563);
	border: none;
}

body.rip-2fa-onboarding .rip-wizard__step--active .rip-wizard__step-number {
	background: var(--rip-primary, #4F46E5);
	color: #fff;
	box-shadow: 0 0 0 4px var(--rip-primary-100, rgba(79, 70, 229, 0.1));
}

body.rip-2fa-onboarding .rip-wizard__step--completed .rip-wizard__step-number {
	background: var(--rip-success, #10B981);
	color: #fff;
}

body.rip-2fa-onboarding .rip-wizard__step-label {
	color: var(--rip-gray-600, #4B5563);
}

body.rip-2fa-onboarding .rip-wizard__step--active .rip-wizard__step-label {
	color: var(--rip-primary, #4F46E5);
	font-weight: 600;
}

body.rip-2fa-onboarding .rip-wizard__step-connector {
	background: var(--rip-gray-200, #E5E7EB);
}

/* Feature cards on the welcome screen. */
body.rip-2fa-onboarding .rip-wizard__features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--rip-space-4, 1rem);
	align-items: stretch;
}

body.rip-2fa-onboarding .rip-wizard__feature {
	background: #fff;
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	border-radius: var(--rip-radius-lg, 8px);
	box-shadow: var(--rip-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
	display: flex;
	gap: var(--rip-space-4, 1rem);
	align-items: flex-start;
	padding: var(--rip-space-5, 1.25rem);
	transition: var(--rip-transition, all 0.15s ease);
}

body.rip-2fa-onboarding .rip-wizard__feature:hover {
	border-color: var(--rip-primary-light, #818CF8);
	box-shadow: var(--rip-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.08));
	transform: translateY(-1px);
}

body.rip-2fa-onboarding .rip-wizard__feature-icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rip-gradient-primary, linear-gradient(135deg, #4F46E5, #7C3AED));
	color: #fff;
	border-radius: var(--rip-radius-lg, 8px);
	box-shadow: 0 4px 12px var(--rip-primary-100, rgba(79, 70, 229, 0.2));
}

body.rip-2fa-onboarding .rip-wizard__feature-icon svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
}

body.rip-2fa-onboarding .rip-wizard__feature-text {
	flex: 1 1 auto;
	min-width: 0;
}

body.rip-2fa-onboarding .rip-wizard__feature-text h3 {
	color: var(--rip-gray-900, #111827);
	margin: 0 0 var(--rip-space-2, 0.5rem);
	font-size: var(--rip-text-base, 1rem);
	font-weight: 600;
	line-height: 1.3;
}

body.rip-2fa-onboarding .rip-wizard__feature-text p {
	color: var(--rip-gray-600, #4B5563);
	margin: 0;
	font-size: var(--rip-text-sm, 0.875rem);
	line-height: 1.5;
}

/* Method selector cards — cheerful white with primary highlight when picked. */
body.rip-2fa-onboarding .rip-wizard__mode-cards {
	background: transparent;
}

body.rip-2fa-onboarding .rip-mode-card {
	background: #fff;
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	color: var(--rip-gray-800, #1F2937);
	box-shadow: var(--rip-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
	transition: var(--rip-transition, all 0.15s ease);
}

body.rip-2fa-onboarding .rip-mode-card:hover {
	border-color: var(--rip-primary-light, #818CF8);
	box-shadow: var(--rip-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
	transform: translateY(-2px);
}

body.rip-2fa-onboarding .rip-mode-card__title {
	color: var(--rip-gray-900, #111827);
}

body.rip-2fa-onboarding .rip-mode-card__description {
	color: var(--rip-gray-600, #4B5563);
}

/* Feature bullets — opaque + darker gray for WCAG-AA contrast on white.
 * Default mode-card__features in design-system.css has opacity < 1 which
 * washes them out on a light background. */
body.rip-2fa-onboarding .rip-mode-card__features,
body.rip-2fa-onboarding .rip-mode-card__features li {
	color: var(--rip-gray-700, #374151);
	opacity: 1;
}

body.rip-2fa-onboarding .rip-mode-card__features li {
	font-weight: 500;
}

body.rip-2fa-onboarding .rip-mode-card__icon {
	background: var(--rip-primary-50, rgba(79, 70, 229, 0.05));
	color: var(--rip-primary, #4F46E5);
}

body.rip-2fa-onboarding .rip-mode-card--recommended {
	border-color: var(--rip-primary, #4F46E5);
}

body.rip-2fa-onboarding .rip-mode-card--recommended .rip-mode-card__ribbon,
body.rip-2fa-onboarding .rip-mode-card__ribbon {
	background: var(--rip-primary, #4F46E5);
	color: #fff;
	position: absolute;
	top: var(--rip-space-4, 1rem);
	left: 0;
	right: auto;
	height: 24px;
	line-height: 24px;
	padding: 0 10px 0 10px;
	font-size: var(--rip-text-xs, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: 0;
	box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
	display: inline-block;
	white-space: nowrap;
}

/* Pennant-tip on the trailing edge of the ribbon. */
body.rip-2fa-onboarding .rip-mode-card__ribbon::after {
	content: "";
	position: absolute;
	right: -10px;
	top: 0;
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 10px solid var(--rip-primary, #4F46E5);
}

body.rip-2fa-onboarding .rip-2fa-methods .rip-mode-card--selected {
	border-color: var(--rip-primary, #4F46E5);
	border-width: 2px;
	background: var(--rip-primary-50, rgba(79, 70, 229, 0.05));
	box-shadow: 0 0 0 4px var(--rip-primary-100, rgba(79, 70, 229, 0.15));
}

/* Visible checkbox-style selection indicator in each method card.
 * Empty circle by default → primary-filled circle with white check when
 * selected. Sits top-right so the user clearly sees which cards are active. */
body.rip-2fa-onboarding .rip-2fa-methods .rip-mode-card {
	position: relative;
}

body.rip-2fa-onboarding .rip-2fa-methods .rip-mode-card::before {
	content: "";
	position: absolute;
	top: var(--rip-space-4, 1rem);
	right: var(--rip-space-4, 1rem);
	width: 24px;
	height: 24px;
	border-radius: var(--rip-radius-full, 9999px);
	border: 2px solid var(--rip-gray-300, #D1D5DB);
	background: #fff;
	transition: var(--rip-transition, all 0.15s ease);
	z-index: 2;
}

body.rip-2fa-onboarding .rip-2fa-methods .rip-mode-card::after {
	content: "";
	position: absolute;
	top: calc(var(--rip-space-4, 1rem) + 5px);
	right: calc(var(--rip-space-4, 1rem) + 6px);
	width: 12px;
	height: 7px;
	border-left: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: rotate(-45deg);
	opacity: 0;
	transition: var(--rip-transition, all 0.15s ease);
	z-index: 3;
}

body.rip-2fa-onboarding .rip-2fa-methods .rip-mode-card:hover::before {
	border-color: var(--rip-primary-light, #818CF8);
}

body.rip-2fa-onboarding .rip-2fa-methods .rip-mode-card--selected::before {
	background: var(--rip-primary, #4F46E5);
	border-color: var(--rip-primary, #4F46E5);
}

body.rip-2fa-onboarding .rip-2fa-methods .rip-mode-card--selected::after {
	opacity: 1;
}

/* Ribbon must stay above the indicator. */
body.rip-2fa-onboarding .rip-2fa-methods .rip-mode-card__ribbon {
	z-index: 4;
}

/* Helper hint above the card grid, making the multi-select pattern explicit.
 * grid-column: 1 / -1 forces the pseudo-element to span all columns when
 * `.rip-wizard__mode-cards` uses a CSS grid (which it does for >1 method). */
body.rip-2fa-onboarding .rip-2fa-methods::before {
	content: attr(data-hint);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rip-space-2, 0.5rem);
	grid-column: 1 / -1;
	padding: var(--rip-space-3, 0.75rem) var(--rip-space-4, 1rem);
	background: var(--rip-primary-50, rgba(79, 70, 229, 0.05));
	border: 1px dashed var(--rip-primary-light, #818CF8);
	border-radius: var(--rip-radius-lg, 8px);
	font-size: var(--rip-text-sm, 0.875rem);
	color: var(--rip-primary-dark, #3730A3);
	margin-bottom: var(--rip-space-2, 0.5rem);
}

/* Setup panels and info alerts. */
body.rip-2fa-onboarding .rip-2fa-setup-panel {
	background: #fff;
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	box-shadow: var(--rip-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

body.rip-2fa-onboarding .rip-wizard__welcome {
	background: transparent;
}

/* Recovery codes stay dark for readability, but the surrounding area is light. */
body.rip-2fa-onboarding .rip-2fa-recovery-grid {
	background: var(--rip-gray-900, #111827);
}

/* Footer trust badges adopt the neutral palette on light background. */
body.rip-2fa-onboarding .rip-wizard__footer {
	background: #fff;
	border-top: 1px solid var(--rip-gray-200, #E5E7EB);
	color: var(--rip-gray-600, #4B5563);
}

body.rip-2fa-onboarding .rip-wizard__badge {
	background: var(--rip-gray-100, #F3F4F6);
	color: var(--rip-gray-700, #374151);
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	display: inline-flex;
	align-items: center;
	gap: var(--rip-space-2, 0.5rem);
}

body.rip-2fa-onboarding .rip-wizard__badge svg {
	width: 14px;
	height: 14px;
	color: var(--rip-success, #10B981);
}

body.rip-2fa-onboarding .rip-wizard__version {
	color: var(--rip-gray-500, #6B7280);
}

/* Wizard-page inputs inherit the design system inputs so the onboarding
 * reuses identical form controls as the settings page. */
body.rip-2fa-onboarding .rip-input {
	background: #fff;
	color: var(--rip-gray-900, #111827);
	border: 1px solid var(--rip-gray-300, #D1D5DB);
}

body.rip-2fa-onboarding .rip-input:focus {
	border-color: var(--rip-primary, #4F46E5);
	outline: none;
	box-shadow: 0 0 0 3px var(--rip-primary-100, rgba(79, 70, 229, 0.1));
}

/* Setup-Done success panel (shown after the last method is confirmed). */
body.rip-2fa-onboarding .rip-2fa-setup-done {
	text-align: center;
	padding: var(--rip-space-8, 2rem) var(--rip-space-6, 1.5rem);
	background: linear-gradient(135deg, var(--rip-success-bg, rgba(16, 185, 129, 0.08)) 0%, #fff 100%);
	border: 1px solid var(--rip-success, #10B981);
	border-radius: var(--rip-radius-xl, 12px);
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12);
	margin: var(--rip-space-4, 1rem) auto;
	max-width: 640px;
}

body.rip-2fa-onboarding .rip-2fa-setup-done__icon {
	width: 72px;
	height: 72px;
	margin: 0 auto var(--rip-space-4, 1rem);
	color: var(--rip-success, #10B981);
}

body.rip-2fa-onboarding .rip-2fa-setup-done__icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-width: 3;
}

body.rip-2fa-onboarding .rip-2fa-setup-done__title {
	font-size: var(--rip-text-xl, 1.25rem);
	font-weight: 600;
	color: var(--rip-gray-900, #111827);
	margin: 0 0 var(--rip-space-2, 0.5rem);
}

body.rip-2fa-onboarding .rip-2fa-setup-done__methods {
	color: var(--rip-success, #10B981);
	font-weight: 500;
	margin: 0 0 var(--rip-space-2, 0.5rem);
}

body.rip-2fa-onboarding .rip-2fa-setup-done__hint {
	color: var(--rip-gray-600, #4B5563);
	font-size: var(--rip-text-sm, 0.875rem);
	margin: 0;
}

/* Recovery action buttons — icon + text alignment. */
body.rip-2fa-onboarding .rip-2fa-recovery-actions .rip-button {
	display: inline-flex;
	align-items: center;
	gap: var(--rip-space-2, 0.5rem);
}

/* Secondary buttons on the light onboarding theme need explicit colour —
 * the design-system default is tuned for the dark wizard and renders as
 * white-on-white otherwise. */
body.rip-2fa-onboarding .rip-button--secondary,
body.rip-2fa-onboarding .rip-button.rip-button--secondary {
	background: #fff;
	color: var(--rip-primary, #4F46E5);
	border: 1px solid var(--rip-gray-300, #D1D5DB);
	box-shadow: var(--rip-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

body.rip-2fa-onboarding .rip-button--secondary:hover,
body.rip-2fa-onboarding .rip-button.rip-button--secondary:hover {
	background: var(--rip-primary-50, rgba(79, 70, 229, 0.05));
	border-color: var(--rip-primary, #4F46E5);
	color: var(--rip-primary-dark, #3730A3);
}

body.rip-2fa-onboarding .rip-button--secondary svg {
	stroke: currentColor;
}

/* Ghost buttons too (used for "Zurück"-links etc.) */
body.rip-2fa-onboarding .rip-button--ghost,
body.rip-2fa-onboarding .rip-button.rip-button--ghost {
	background: transparent;
	color: var(--rip-gray-700, #374151);
	border: 1px solid transparent;
}

body.rip-2fa-onboarding .rip-button--ghost:hover {
	color: var(--rip-primary, #4F46E5);
	background: var(--rip-gray-100, #F3F4F6);
}

body.rip-2fa-onboarding .rip-button--success {
	background: var(--rip-success, #10B981);
	color: #fff;
	border-color: var(--rip-success, #10B981);
}

/* ==========================================================================
   Celebrate screen (Step 5 — Done)
   ========================================================================== */

.rip-2fa-celebrate {
	position: relative;
	text-align: center;
	padding: var(--rip-space-6, 1.5rem) 0;
	overflow: hidden;
}

.rip-2fa-celebrate__badge {
	width: 128px;
	height: 128px;
	margin: 0 auto var(--rip-space-4, 1rem);
	animation: rip-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	filter: drop-shadow(0 12px 24px rgba(79, 70, 229, 0.25));
}

.rip-2fa-celebrate__badge svg { width: 100%; height: 100%; }

@keyframes rip-pop {
	0%   { transform: scale(0.2) rotate(-12deg); opacity: 0; }
	60%  { transform: scale(1.1) rotate(6deg); opacity: 1; }
	100% { transform: scale(1) rotate(0); }
}

/* Confetti — CSS-only, no JS. Dezent, 12 Partikel in Primary/Success-Farben. */
.rip-2fa-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.rip-2fa-confetti span {
	position: absolute;
	top: -20px;
	width: 10px;
	height: 14px;
	opacity: 0;
	animation: rip-confetti 3s cubic-bezier(0.25, 0.6, 0.75, 1) forwards;
}

.rip-2fa-confetti span:nth-child(1)  { left:  8%; background: #4F46E5; animation-delay: 0.10s; transform: rotate(15deg); }
.rip-2fa-confetti span:nth-child(2)  { left: 17%; background: #10B981; animation-delay: 0.25s; border-radius: 50%; }
.rip-2fa-confetti span:nth-child(3)  { left: 26%; background: #F59E0B; animation-delay: 0.00s; transform: rotate(-20deg); }
.rip-2fa-confetti span:nth-child(4)  { left: 35%; background: #7C3AED; animation-delay: 0.45s; }
.rip-2fa-confetti span:nth-child(5)  { left: 44%; background: #818CF8; animation-delay: 0.15s; border-radius: 50%; }
.rip-2fa-confetti span:nth-child(6)  { left: 53%; background: #10B981; animation-delay: 0.30s; transform: rotate(45deg); }
.rip-2fa-confetti span:nth-child(7)  { left: 62%; background: #4F46E5; animation-delay: 0.05s; }
.rip-2fa-confetti span:nth-child(8)  { left: 71%; background: #F59E0B; animation-delay: 0.35s; border-radius: 50%; }
.rip-2fa-confetti span:nth-child(9)  { left: 80%; background: #7C3AED; animation-delay: 0.20s; transform: rotate(-30deg); }
.rip-2fa-confetti span:nth-child(10) { left: 89%; background: #14B8A6; animation-delay: 0.40s; }
.rip-2fa-confetti span:nth-child(11) { left: 48%; background: #EF4444; animation-delay: 0.55s; border-radius: 50%; }
.rip-2fa-confetti span:nth-child(12) { left: 58%; background: #3B82F6; animation-delay: 0.15s; transform: rotate(-10deg); }

@keyframes rip-confetti {
	0%   { transform: translateY(0) rotate(0); opacity: 0; }
	10%  { opacity: 1; }
	100% { transform: translateY(420px) rotate(540deg); opacity: 0; }
}

.rip-2fa-celebrate__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--rip-space-4, 1rem);
	max-width: 720px;
	margin: var(--rip-space-6, 1.5rem) auto;
}

.rip-2fa-celebrate__stat {
	background: #fff;
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	border-radius: var(--rip-radius-lg, 8px);
	padding: var(--rip-space-4, 1rem);
	box-shadow: var(--rip-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.rip-2fa-celebrate__stat-value {
	font-size: var(--rip-text-3xl, 1.875rem);
	font-weight: 700;
	color: var(--rip-primary, #4F46E5);
	line-height: 1;
}

.rip-2fa-celebrate__stat-label {
	margin-top: var(--rip-space-2, 0.5rem);
	font-size: var(--rip-text-sm, 0.875rem);
	color: var(--rip-gray-600, #4B5563);
}

.rip-2fa-celebrate__tips {
	max-width: 560px;
	margin: var(--rip-space-6, 1.5rem) auto;
	background: var(--rip-primary-50, rgba(79, 70, 229, 0.05));
	border: 1px solid var(--rip-primary-100, rgba(79, 70, 229, 0.1));
	border-radius: var(--rip-radius-lg, 8px);
	padding: var(--rip-space-5, 1.25rem) var(--rip-space-6, 1.5rem);
	text-align: left;
}

.rip-2fa-celebrate__tips h3 {
	margin: 0 0 var(--rip-space-3, 0.75rem);
	font-size: var(--rip-text-base, 1rem);
	color: var(--rip-primary-dark, #3730A3);
}

.rip-2fa-celebrate__tips ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.rip-2fa-celebrate__tips li {
	display: flex;
	align-items: flex-start;
	gap: var(--rip-space-2, 0.5rem);
	padding: var(--rip-space-2, 0.5rem) 0;
	color: var(--rip-gray-700, #374151);
	font-size: var(--rip-text-sm, 0.875rem);
}

.rip-2fa-celebrate__tips li svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--rip-success, #10B981);
}

/* Attribution strip — appears on the done screen and on wp-login. */
.rip-2fa-celebrate__attribution,
.rip-2fa-login-attribution {
	display: inline-flex;
	align-items: center;
	gap: var(--rip-space-2, 0.5rem);
	margin: var(--rip-space-6, 1.5rem) auto 0;
	padding: var(--rip-space-2, 0.5rem) var(--rip-space-4, 1rem);
	background: var(--rip-gray-50, #F9FAFB);
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	border-radius: var(--rip-radius-full, 9999px);
	font-size: var(--rip-text-xs, 0.75rem);
	color: var(--rip-gray-600, #4B5563);
}

.rip-2fa-celebrate__attribution svg,
.rip-2fa-login-attribution svg {
	width: 14px;
	height: 14px;
	color: var(--rip-primary, #4F46E5);
}

.rip-2fa-celebrate__attribution a,
.rip-2fa-login-attribution a {
	color: var(--rip-primary, #4F46E5);
	font-weight: 600;
	text-decoration: none;
}

.rip-2fa-celebrate__attribution a:hover,
.rip-2fa-login-attribution a:hover {
	text-decoration: underline;
}

/* wp-login.php — centered under the login form, breathing room above. */
body.login .rip-2fa-login-attribution {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: var(--rip-space-8, 2rem) auto var(--rip-space-4, 1rem);
	padding: 10px 18px;
	max-width: 440px;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	border-radius: var(--rip-radius-full, 9999px);
	box-shadow: var(--rip-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
	font-family: var(--rip-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: 12px;
	line-height: 1.5;
	color: var(--rip-gray-600, #4B5563);
	white-space: normal;
	text-align: center;
}

body.login .rip-2fa-login-attribution svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--rip-primary, #4F46E5);
}

body.login .rip-2fa-login-attribution a {
	font-weight: 600;
	color: var(--rip-primary, #4F46E5);
	text-decoration: none;
	white-space: nowrap;
}

body.login .rip-2fa-login-attribution a:hover,
body.login .rip-2fa-login-attribution a:focus {
	color: var(--rip-primary-dark, #3730A3);
	text-decoration: underline;
}

@media (max-width: 420px) {
	body.login .rip-2fa-login-attribution {
		max-width: 92vw;
		padding: 10px 14px;
		font-size: 11.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rip-2fa-celebrate__badge,
	.rip-2fa-confetti span {
		animation: none;
		opacity: 1;
	}
}

/* ==========================================================================
   Onboarding 1.5.3 — site context, numbered substeps, privacy notice,
   phone-input validity affordance, centred recovery acknowledgement.
   ========================================================================== */

body.rip-2fa-onboarding .rip-wizard__site-context {
	display: flex;
	gap: var(--rip-space-3, 0.75rem);
	justify-content: center;
	align-items: center;
	padding: var(--rip-space-2, 0.5rem) var(--rip-space-4, 1rem);
	background: rgba(79, 70, 229, 0.06);
	border-bottom: 1px solid var(--rip-gray-200, #E5E7EB);
	font-size: var(--rip-text-sm, 0.875rem);
	color: var(--rip-gray-700, #374151);
}

body.rip-2fa-onboarding .rip-wizard__site-name strong {
	color: var(--rip-gray-900, #111827);
}

body.rip-2fa-onboarding .rip-wizard__site-domain code {
	font-family: var(--rip-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 0.85em;
	padding: 1px 6px;
	background: rgba(79, 70, 229, 0.08);
	border-radius: var(--rip-radius-sm, 4px);
	color: var(--rip-primary-dark, #3730A3);
}

@media (max-width: 600px) {
	body.rip-2fa-onboarding .rip-wizard__site-context {
		flex-direction: column;
		gap: 2px;
	}
}

body.rip-2fa-onboarding .rip-2fa-substep {
	display: flex;
	gap: var(--rip-space-4, 1rem);
	align-items: flex-start;
	padding: var(--rip-space-4, 1rem) 0;
	border-top: 1px solid var(--rip-gray-200, #E5E7EB);
}

body.rip-2fa-onboarding .rip-2fa-substep:first-of-type {
	border-top: 0;
	padding-top: var(--rip-space-2, 0.5rem);
}

body.rip-2fa-onboarding .rip-2fa-substep__num {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background: var(--rip-gradient-primary, linear-gradient(135deg, #4F46E5, #7C3AED));
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: var(--rip-text-sm, 0.875rem);
	box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

body.rip-2fa-onboarding .rip-2fa-substep__title {
	margin: 0 0 var(--rip-space-2, 0.5rem);
	font-size: var(--rip-text-base, 1rem);
	font-weight: 600;
	color: var(--rip-gray-900, #111827);
}

body.rip-2fa-onboarding .rip-2fa-substep__body {
	flex: 1;
	min-width: 0;
}

body.rip-2fa-onboarding .rip-privacy-notice {
	display: flex;
	gap: var(--rip-space-3, 0.75rem);
	align-items: flex-start;
	padding: var(--rip-space-4, 1rem);
	margin: 0 0 var(--rip-space-4, 1rem);
	background: rgba(59, 130, 246, 0.08);
	border-left: 4px solid var(--rip-info, #3B82F6);
	border-radius: var(--rip-radius, 6px);
	color: var(--rip-gray-800, #1F2937);
}

body.rip-2fa-onboarding .rip-privacy-notice--warning {
	background: rgba(245, 158, 11, 0.10);
	border-left-color: var(--rip-warning, #F59E0B);
}

body.rip-2fa-onboarding .rip-privacy-notice__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--rip-info, #3B82F6);
	margin-top: 2px;
}

body.rip-2fa-onboarding .rip-privacy-notice--warning .rip-privacy-notice__icon {
	color: var(--rip-warning, #F59E0B);
}

body.rip-2fa-onboarding .rip-privacy-notice strong {
	display: block;
	margin-bottom: 2px;
	color: var(--rip-gray-900, #111827);
	font-size: var(--rip-text-sm, 0.875rem);
}

body.rip-2fa-onboarding .rip-privacy-notice p {
	margin: 0;
	font-size: var(--rip-text-sm, 0.875rem);
	line-height: 1.5;
}

body.rip-2fa-onboarding .rip-input-wrap {
	position: relative;
}

body.rip-2fa-onboarding .rip-input-wrap .rip-input {
	padding-right: 2.25rem;
}

body.rip-2fa-onboarding .rip-input-validity {
	position: absolute;
	right: var(--rip-space-3, 0.75rem);
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
	font-size: var(--rip-text-base, 1rem);
	pointer-events: none;
	line-height: 1;
}

body.rip-2fa-onboarding .rip-input-wrap--valid .rip-input-validity {
	color: var(--rip-success, #10B981);
}

body.rip-2fa-onboarding .rip-input-wrap--invalid .rip-input-validity {
	color: var(--rip-danger, #EF4444);
}

body.rip-2fa-onboarding .rip-input-wrap--valid .rip-input {
	border-color: var(--rip-success, #10B981);
}

body.rip-2fa-onboarding .rip-input-wrap--invalid .rip-input {
	border-color: var(--rip-danger, #EF4444);
}

body.rip-2fa-onboarding .rip-2fa-recovery-ack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rip-space-4, 1rem);
	padding: var(--rip-space-6, 1.5rem);
	margin: var(--rip-space-6, 1.5rem) auto 0;
	max-width: 520px;
	background: #fff;
	border: 1px solid var(--rip-gray-200, #E5E7EB);
	border-radius: var(--rip-radius-lg, 8px);
	box-shadow: var(--rip-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
	text-align: center;
}

body.rip-2fa-onboarding .rip-2fa-recovery-ack .rip-checkbox {
	font-size: var(--rip-text-base, 1rem);
}

body.rip-2fa-onboarding .rip-2fa-recovery-ack .rip-button {
	min-width: 220px;
}

body.rip-2fa-onboarding .rip-wizard__actions--secondary {
	margin-top: var(--rip-space-4, 1rem);
}

body.rip-2fa-onboarding #rip-2fa-sms-delivery-timer {
	margin-top: var(--rip-space-2, 0.5rem);
	font-size: var(--rip-text-sm, 0.875rem);
	color: var(--rip-gray-600, #4B5563);
	font-variant-numeric: tabular-nums;
}