/*
 * My Contact Profile — frontend account security.
 * Presentation only. Two Factor owns all authentication/security state.
 */

body.mcp-security-page .mcp-content-page {
	width: min(calc(100% - 40px), 1120px);
	padding-top: 58px;
	padding-bottom: 96px;
}

body.mcp-security-page .mcp-entry {
	max-width: none;
}

body.mcp-security-page .mcp-pmpro-page-hero {
	max-width: 760px;
	margin-bottom: 34px;
}

.mcp-security-dashboard {
	display: grid;
	gap: 22px;
}

.mcp-security-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
	padding: 30px 32px;
	border: 1px solid var(--mcp-line-strong);
	border-radius: 24px;
	background:
		radial-gradient(circle at 90% 10%, rgba(var(--mcp-brand-rgb), .09), transparent 34%),
		var(--mcp-container-background);
	box-shadow: var(--mcp-shadow);
}

.mcp-security-overview-copy {
	max-width: 690px;
}

.mcp-security-kicker {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--mcp-brand);
	font-size: .71rem;
	font-weight: 850;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.mcp-security-overview h2,
.mcp-security-settings-heading h2 {
	margin: 0;
	color: var(--mcp-ink);
	font-size: clamp(1.65rem, 3vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -.035em;
}

.mcp-security-overview p,
.mcp-security-settings-heading p {
	margin: 10px 0 0;
	color: var(--mcp-muted);
	line-height: 1.7;
}

.mcp-security-status-card {
	min-width: 195px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--mcp-line);
	border-radius: 16px;
	background: var(--mcp-container-background);
}

.mcp-security-status-card > div {
	display: grid;
	gap: 1px;
}

.mcp-security-status-card small,
.mcp-security-status-card span {
	color: var(--mcp-muted);
	font-size: .78rem;
}

.mcp-security-status-card strong {
	color: var(--mcp-ink);
	font-size: .96rem;
}

.mcp-security-status-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #8c9994;
	box-shadow: 0 0 0 5px rgba(99, 113, 107, .10);
}

.mcp-security-status-dot.is-enabled {
	background: var(--mcp-brand);
	box-shadow: 0 0 0 5px rgba(var(--mcp-brand-rgb), .13);
}

.mcp-security-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--mcp-line);
	border-radius: 18px;
	background: var(--mcp-container-background);
}

.mcp-security-metrics > div {
	padding: 18px 20px;
}

.mcp-security-metrics > div + div {
	border-left: 1px solid var(--mcp-line);
}

.mcp-security-metrics span,
.mcp-security-metrics strong {
	display: block;
}

.mcp-security-metrics span {
	color: var(--mcp-muted);
	font-size: .77rem;
	font-weight: 650;
}

.mcp-security-metrics strong {
	margin-top: 4px;
	color: var(--mcp-ink);
	font-size: .96rem;
}

.mcp-security-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 17px 19px;
	border: 1px solid var(--mcp-line-strong);
	border-radius: 15px;
	background: var(--mcp-container-background);
	color: var(--mcp-ink);
}

.mcp-security-notice.is-success {
	border-color: rgba(var(--mcp-brand-rgb), .34);
	background: rgba(var(--mcp-brand-rgb), .08);
}

.mcp-security-notice.is-warning {
	border-color: rgba(177, 132, 39, .38);
}

.mcp-security-notice p {
	margin: 4px 0 0;
	color: var(--mcp-muted);
}

.mcp-security-action,
.mcp-security-save,
.mcp-security-settings .button,
.mcp-security-settings input[type="submit"].button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 45px;
	padding: 9px 16px;
	border: 1px solid var(--mcp-button-border);
	border-radius: 11px;
	background: var(--mcp-button-bg);
	box-shadow: var(--mcp-button-shadow);
	color: var(--mcp-button-text);
	font: inherit;
	font-size: .86rem;
	font-weight: 790;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.mcp-security-action:hover,
.mcp-security-action:focus-visible,
.mcp-security-save:hover,
.mcp-security-save:focus-visible,
.mcp-security-settings .button:hover,
.mcp-security-settings .button:focus-visible,
.mcp-security-settings input[type="submit"].button:hover,
.mcp-security-settings input[type="submit"].button:focus-visible {
	background: var(--mcp-button-bg-hover);
	border-color: var(--mcp-button-border-hover);
	color: var(--mcp-button-text);
	transform: translateY(-1px);
	outline: none;
}

.mcp-security-settings {
	overflow: hidden;
	border: 1px solid var(--mcp-line-strong);
	border-radius: 24px;
	background: var(--mcp-container-background);
	box-shadow: var(--mcp-shadow);
}

.mcp-security-settings-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
	gap: 36px;
	align-items: end;
	padding: 30px 32px 25px;
	border-bottom: 1px solid var(--mcp-line);
}

.mcp-security-settings > h2 {
	display: none;
}

.mcp-security-settings fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mcp-security-settings .two-factor-methods-table,
.mcp-security-settings .two-factor-methods-table tbody,
.mcp-security-settings .two-factor-primary-method-table,
.mcp-security-settings .two-factor-primary-method-table tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.mcp-security-settings .two-factor-methods-table tr,
.mcp-security-settings .two-factor-primary-method-table tr {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	width: 100%;
	border-bottom: 1px solid var(--mcp-line);
	background: transparent;
}

.mcp-security-settings .two-factor-primary-method-table tr {
	border-bottom: 0;
	background: rgba(var(--mcp-brand-rgb), .025);
}

.mcp-security-settings .two-factor-methods-table th,
.mcp-security-settings .two-factor-methods-table td,
.mcp-security-settings .two-factor-primary-method-table th,
.mcp-security-settings .two-factor-primary-method-table td {
	display: block;
	width: auto;
	padding: 27px 30px;
	border: 0;
	background: transparent;
	color: var(--mcp-ink);
	text-align: left;
	vertical-align: top;
}

.mcp-security-settings .two-factor-methods-table th,
.mcp-security-settings .two-factor-primary-method-table th {
	padding-right: 10px;
	font-size: .84rem;
	font-weight: 820;
}

.mcp-security-settings .two-factor-method-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	color: var(--mcp-ink);
}

.mcp-security-settings input[type="checkbox"] {
	width: 19px;
	height: 19px;
	accent-color: var(--mcp-brand);
}

.mcp-security-settings .two-factor-method-recommended {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 8px;
	border: 1px solid rgba(var(--mcp-brand-rgb), .24);
	border-radius: 999px;
	background: rgba(var(--mcp-brand-rgb), .07);
	color: var(--mcp-brand);
	font-size: .65rem;
	font-weight: 850;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
}

.mcp-security-settings p {
	color: var(--mcp-muted);
	line-height: 1.65;
}

.mcp-security-settings > fieldset > p {
	margin: 24px 30px 6px;
}

.mcp-security-settings .totp-steps {
	display: grid;
	gap: 14px;
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: mcp-security-step;
}

.mcp-security-settings .totp-steps > li {
	position: relative;
	margin: 0;
	padding: 17px 18px 17px 56px;
	border: 1px solid var(--mcp-line);
	border-radius: 14px;
	background: var(--mcp-container-background);
	color: var(--mcp-muted);
	counter-increment: mcp-security-step;
}

.mcp-security-settings .totp-steps > li::before {
	content: counter(mcp-security-step);
	position: absolute;
	top: 16px;
	left: 17px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--mcp-button-border);
	border-radius: 9px;
	background: var(--mcp-button-bg);
	color: var(--mcp-button-text);
	font-size: .75rem;
	font-weight: 850;
}

.mcp-security-settings #two-factor-qr-code {
	width: min(240px, 100%);
	margin: 16px 0;
	padding: 14px;
	border: 1px solid var(--mcp-line);
	border-radius: 15px;
	background: #ffffff;
}

.mcp-security-settings #two-factor-qr-code a {
	display: block;
	line-height: 0;
}

.mcp-security-settings #two-factor-qr-code svg {
	display: block;
	width: 100%;
	height: auto;
}

.mcp-security-settings code {
	display: inline-block;
	max-width: 100%;
	padding: 8px 11px;
	border: 1px solid var(--mcp-line);
	border-radius: 8px;
	background: var(--mcp-container-bg-soft);
	color: var(--mcp-ink);
	font-size: .86rem;
	overflow-wrap: anywhere;
	user-select: all;
}

.mcp-security-settings input[type="text"],
.mcp-security-settings input[type="password"],
.mcp-security-settings select {
	min-height: 46px;
	max-width: 420px;
	padding: 9px 12px;
	border: 1px solid var(--mcp-line-strong);
	border-radius: 11px;
	background: var(--mcp-field-bg);
	color: var(--mcp-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
	outline: none;
}

.mcp-security-settings input[type="text"]:hover,
.mcp-security-settings input[type="password"]:hover,
.mcp-security-settings select:hover {
	border-color: var(--mcp-field-border-hover);
	background: var(--mcp-field-bg-hover);
}

.mcp-security-settings input[type="text"]:focus,
.mcp-security-settings input[type="password"]:focus,
.mcp-security-settings select:focus {
	border-color: var(--mcp-field-border-hover);
	background: var(--mcp-field-bg-focus);
	box-shadow: 0 0 0 3px var(--mcp-focus);
}

.mcp-security-settings .success {
	padding: 13px 15px;
	border: 1px solid rgba(var(--mcp-brand-rgb), .25);
	border-radius: 12px;
	background: rgba(var(--mcp-brand-rgb), .07);
	color: var(--mcp-ink);
}

.mcp-security-settings .error,
.mcp-security-settings .notice {
	padding: 13px 15px;
	border: 1px solid rgba(180, 68, 74, .35);
	border-radius: 12px;
	background: rgba(180, 68, 74, .07);
	color: var(--mcp-ink);
}

.mcp-security-settings .two-factor-backup-codes-wrapper {
	margin-top: 16px;
	padding: 18px;
	border: 1px solid var(--mcp-line);
	border-radius: 14px;
	background: var(--mcp-container-background);
}

.mcp-security-settings .two-factor-backup-codes-unused-codes {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-count: initial !important;
	column-gap: 12px !important;
	max-width: 620px !important;
	gap: 9px;
	margin: 16px 0;
	padding: 0;
	list-style: none;
}

.mcp-security-settings .two-factor-backup-codes-token {
	padding: 8px 10px;
	border: 1px solid var(--mcp-line);
	border-radius: 8px;
	background: var(--mcp-container-bg-soft);
	color: var(--mcp-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: .82rem;
	text-align: center;
	user-select: all;
}

.mcp-security-settings .two-factor-primary-method-table select {
	width: min(100%, 360px);
}

.mcp-security-savebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 22px 30px;
	border-top: 1px solid var(--mcp-line);
	background: rgba(var(--mcp-brand-rgb), .035);
}

.mcp-security-savebar > div {
	display: grid;
	gap: 2px;
}

.mcp-security-savebar strong {
	color: var(--mcp-ink);
	font-size: .86rem;
}

.mcp-security-savebar span {
	color: var(--mcp-muted);
	font-size: .78rem;
}

/* Account entry point ---------------------------------------------------- */

.mcp-account-security-panel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	margin-top: 24px;
	padding: 22px 24px;
	border: 1px solid var(--mcp-line-strong);
	border-radius: 18px;
	background:
		radial-gradient(circle at 96% 0%, rgba(var(--mcp-brand-rgb), .07), transparent 30%),
		var(--mcp-container-background);
	box-shadow: var(--mcp-shadow);
}

.mcp-account-security-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--mcp-line-strong);
	border-radius: 14px;
	background: var(--mcp-container-bg-soft);
	color: var(--mcp-brand);
}

.mcp-account-security-icon svg {
	width: 25px;
	height: 25px;
}

.mcp-account-security-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.mcp-account-security-heading > span {
	color: var(--mcp-brand);
	font-size: .66rem;
	font-weight: 850;
	letter-spacing: .13em;
}

.mcp-account-security-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid var(--mcp-line);
	border-radius: 999px;
	color: var(--mcp-muted);
	font-size: .68rem;
	font-weight: 760;
}

.mcp-account-security-badge i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8c9994;
}

.mcp-account-security-badge.is-enabled {
	border-color: rgba(var(--mcp-brand-rgb), .22);
	color: var(--mcp-brand);
}

.mcp-account-security-badge.is-enabled i {
	background: var(--mcp-brand);
}

.mcp-account-security-copy h2 {
	margin: 5px 0 2px;
	color: var(--mcp-ink);
	font-size: 1.04rem;
	letter-spacing: -.02em;
}

.mcp-account-security-copy p {
	margin: 0;
	color: var(--mcp-muted);
	font-size: .84rem;
}

.mcp-account-security-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 43px;
	padding: 8px 14px;
	border: 1px solid var(--mcp-button-border);
	border-radius: 11px;
	background: var(--mcp-button-bg);
	box-shadow: var(--mcp-button-shadow);
	color: var(--mcp-button-text);
	font-size: .8rem;
	font-weight: 790;
	text-decoration: none;
	white-space: nowrap;
}

.mcp-account-security-action:hover,
.mcp-account-security-action:focus-visible {
	background: var(--mcp-button-bg-hover);
	border-color: var(--mcp-button-border-hover);
	color: var(--mcp-button-text);
	transform: translateY(-1px);
	outline: none;
}

html[data-mcp-theme="dark"] .mcp-security-settings #two-factor-qr-code {
	border-color: rgba(105, 230, 189, .23);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}

@media (max-width: 820px) {
	.mcp-security-overview,
	.mcp-security-settings-heading {
		grid-template-columns: 1fr;
	}

	.mcp-security-status-card {
		min-width: 0;
	}

	.mcp-security-metrics {
		grid-template-columns: 1fr;
	}

	.mcp-security-metrics > div + div {
		border-left: 0;
		border-top: 1px solid var(--mcp-line);
	}

	.mcp-security-settings .two-factor-methods-table tr,
	.mcp-security-settings .two-factor-primary-method-table tr {
		grid-template-columns: 1fr;
	}

	.mcp-security-settings .two-factor-methods-table th,
	.mcp-security-settings .two-factor-primary-method-table th {
		padding-bottom: 0;
	}

	.mcp-security-settings .two-factor-methods-table td,
	.mcp-security-settings .two-factor-primary-method-table td {
		padding-top: 13px;
	}

	.mcp-security-savebar,
	.mcp-account-security-panel {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.mcp-security-savebar {
		flex-direction: column;
		align-items: stretch;
	}

	.mcp-security-save,
	.mcp-account-security-action {
		width: 100%;
	}
}

@media (max-width: 560px) {
	body.mcp-security-page .mcp-content-page {
		width: min(calc(100% - 24px), 1120px);
		padding-top: 38px;
	}

	.mcp-security-overview,
	.mcp-security-settings-heading {
		padding: 24px 21px;
	}

	.mcp-security-settings .two-factor-methods-table th,
	.mcp-security-settings .two-factor-methods-table td,
	.mcp-security-settings .two-factor-primary-method-table th,
	.mcp-security-settings .two-factor-primary-method-table td {
		padding-left: 21px;
		padding-right: 21px;
	}

	.mcp-security-settings .two-factor-backup-codes-unused-codes {
		grid-template-columns: 1fr;
	}

	.mcp-account-security-panel {
		padding: 19px;
	}
}


/* 0.9.9 light-mode surface rhythm. Dark mode intentionally keeps 0.9.8 colours. */
html:not([data-mcp-theme="dark"]) .mcp-security-status-card,
html:not([data-mcp-theme="dark"]) .mcp-security-settings,
html:not([data-mcp-theme="dark"]) .mcp-account-security-panel {
	background: var(--mcp-container-background-alt);
}

html:not([data-mcp-theme="dark"]) .mcp-security-metrics,
html:not([data-mcp-theme="dark"]) .mcp-security-savebar {
	background: var(--mcp-container-background);
}

/* Account Profile Builder entry point ----------------------------------- */
.mcp-account-profile-panel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	margin-top: 24px;
	padding: 22px 24px;
	border: 1px solid var(--mcp-line-strong);
	border-radius: 18px;
	background:
		radial-gradient(circle at 3% 0%, rgba(var(--mcp-brand-rgb), .09), transparent 28%),
		var(--mcp-container-background);
	box-shadow: var(--mcp-shadow);
}

.mcp-account-profile-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--mcp-line-strong);
	border-radius: 14px;
	background: var(--mcp-container-bg-soft);
	color: var(--mcp-brand);
}

.mcp-account-profile-icon svg { width: 25px; height: 25px; }

.mcp-account-profile-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.mcp-account-profile-heading > span {
	color: var(--mcp-brand);
	font-size: .66rem;
	font-weight: 850;
	letter-spacing: .13em;
}

.mcp-account-profile-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border: 1px solid var(--mcp-line);
	border-radius: 999px;
	color: var(--mcp-muted);
	font-size: .68rem;
	font-weight: 760;
}

.mcp-account-profile-badge i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mcp-brand);
}

.mcp-account-profile-copy h2 {
	margin: 5px 0 2px;
	color: var(--mcp-ink);
	font-size: 1.04rem;
	letter-spacing: -.02em;
}

.mcp-account-profile-copy p {
	margin: 0;
	color: var(--mcp-muted);
	font-size: .84rem;
}

.mcp-account-profile-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 43px;
	padding: 8px 14px;
	border: 1px solid var(--mcp-button-border);
	border-radius: 11px;
	background: var(--mcp-button-bg);
	box-shadow: var(--mcp-button-shadow);
	color: var(--mcp-button-text);
	font-size: .8rem;
	font-weight: 790;
	text-decoration: none;
	white-space: nowrap;
}

.mcp-account-profile-action:hover,
.mcp-account-profile-action:focus-visible {
	background: var(--mcp-button-bg-hover);
	border-color: var(--mcp-button-border-hover);
	color: var(--mcp-button-text);
	transform: translateY(-1px);
	outline: none;
}

@media (max-width: 700px) {
	.mcp-account-profile-panel {
		grid-template-columns: auto 1fr;
	}
	.mcp-account-profile-action {
		grid-column: 1 / -1;
		width: 100%;
	}
}