/* ==========================================================================
   MY EXOTIC — member workspace + member auth shell
   Tokens follow plans/visitor-product-redesign-2026-08-28/DESIGN.md.
   Scoped locally so the customer product never inherits the retired
   brand-accent / info / warning accents or the 16px badge radius.
   ========================================================================== */

.my-exotic,
.mx-auth,
.mx-bottom-nav {
	--mx-canvas: #0E0E0E;
	--mx-surface: #1A1A1A;
	--mx-surface-subtle: #222222;
	--mx-surface-elevated: #2A2A2A;
	--mx-hairline: #1E1F20;
	--mx-border-subtle: #2E2E2E;
	--mx-border-default: #3A3A3A;
	--mx-ink: #ECECEC;
	--mx-muted: #B4B4B4;
	--mx-faint: #8A8A8A;
	--mx-gold: #E6C46A;
	--mx-brand: #8B0A1A;
	--mx-brand-active: #6E0816;
	--mx-brand-ink: #F2495C;
	--mx-success: #10B981;
	--mx-error: #EF4444;
	--mx-radius-sm: 6px;
	--mx-radius-md: 10px;
	--mx-radius-lg: 14px;
	--mx-radius-badge: 4px;
	--mx-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--mx-ink);
	font-family: var(--mx-font);
}

/* ---------- Shared primitives ---------- */

.my-exotic *,
.my-exotic *::before,
.my-exotic *::after,
.mx-auth *,
.mx-auth *::before,
.mx-auth *::after,
.mx-bottom-nav *,
.mx-bottom-nav *::before,
.mx-bottom-nav *::after {
	box-sizing: border-box;
}

.my-exotic :is(a, button, input, select, textarea):focus-visible,
.mx-auth :is(a, button, input, select, textarea):focus-visible,
.mx-bottom-nav a:focus-visible {
	outline: 2px solid var(--focus-ring-color, #FFFFFF);
	outline-offset: 3px;
}

.mx-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.mx-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--mx-faint);
}

.mx-title {
	margin: 8px 0 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: 0;
	color: var(--mx-ink);
}

.mx-lede {
	margin: 8px 0 0;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--mx-muted);
}

.mx-tag {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 7px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-badge);
	background: rgba(255, 255, 255, 0.04);
	color: var(--mx-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
}

.mx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}

.mx-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--mx-radius-md);
	border: 1px solid var(--mx-border-default);
	background: var(--mx-surface-subtle);
	color: var(--mx-ink);
	font-family: var(--mx-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-button:hover {
	background: var(--mx-surface-elevated);
	border-color: var(--mx-border-strong, #4A4A4A);
	color: var(--mx-ink);
}

.mx-button[disabled] {
	opacity: 0.6;
	cursor: default;
}

.mx-button--quiet {
	min-height: 44px;
	padding: 0 12px;
	background: transparent;
	border-color: transparent;
	color: var(--mx-muted);
}

.mx-button--quiet:hover {
	background: var(--mx-surface-subtle);
	border-color: var(--mx-border-subtle);
	color: var(--mx-ink);
}

/* ---------- Workspace frame ---------- */

.my-exotic {
	padding: 24px 16px 32px;
}

.my-exotic__wrap {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

.mx-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--mx-hairline);
}

.mx-head__copy {
	min-width: 0;
}

.mx-head__identity {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mx-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--mx-surface-subtle);
	border: 1px solid var(--mx-border-subtle);
	font-size: 16px;
	font-weight: 700;
	color: var(--mx-ink);
}

.mx-head__identity-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mx-head__identity-label {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mx-faint);
}

.mx-head__identity-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mx-ink);
}

.mx-layout {
	display: block;
	padding-top: 24px;
}

/* ---------- Rail navigation ---------- */

.mx-rail {
	max-width: 100%;
	min-width: 0;
}

.mx-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
}

.mx-rail__group-title {
	margin: 16px 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--mx-faint);
}

.mx-rail__link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--mx-radius-md);
	border: 1px solid transparent;
	color: var(--mx-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.mx-rail__link:hover {
	background: var(--mx-surface);
	color: var(--mx-ink);
}

.mx-rail__link.is-active {
	background: var(--mx-surface);
	border-color: var(--mx-border-subtle);
	color: var(--mx-ink);
}

.mx-rail__link--upcoming {
	color: var(--mx-faint);
}

.mx-rail__back {
	display: none;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mx-muted);
	text-decoration: none;
}

.mx-rail__back:hover {
	color: var(--mx-ink);
}

/*
 * The way out of the workspace. Matches the rail links so the rail reads as one
 * list, but sits below a hairline because it leaves My Exotic rather than
 * moving inside it.
 */
.mx-rail__browse {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 12px;
	padding: 12px 12px 0;
	border-top: 1px solid var(--mx-hairline);
	border-radius: 0;
	color: var(--mx-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.mx-rail__browse:hover {
	color: var(--mx-ink);
}

.mx-rail__browse svg {
	flex: 0 0 auto;
}

/* ---------- Modules ---------- */

.mx-main > * + * {
	margin-top: 16px;
}

.mx-module {
	padding: 16px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface);
}

.mx-module--quiet {
	background: transparent;
	border-color: var(--mx-hairline);
}

.mx-module__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
}

.mx-module__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.28;
	color: var(--mx-ink);
}

.mx-module__title .mx-icon {
	color: var(--mx-muted);
}

.mx-module__note {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mx-faint);
}

.mx-module__body {
	margin-top: 12px;
}

.mx-state {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mx-muted);
}

.mx-state--error {
	color: var(--mx-error);
}

.mx-state--success {
	color: var(--mx-success);
}

.mx-state + .mx-cards {
	margin-top: 12px;
}

.mx-inline-form {
	margin: 0;
}

.mx-next {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.mx-next__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--mx-faint);
}

.mx-next__copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	line-height: 1.55;
}

.mx-next__copy strong {
	font-weight: 600;
	color: var(--mx-muted);
}

/* ---------- Profile cards (3:4, media-led, no red) ---------- */

.mx-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.mx-card {
	position: relative;
	border-radius: var(--mx-radius-lg);
	overflow: hidden;
	background: #101010;
	border: 1px solid var(--mx-border-subtle);
}

.mx-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mx-card__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	background: #141414;
}

.mx-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mx-card__scrim {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px 12px 12px;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(8, 8, 8, 0.86) 62%, rgba(6, 6, 6, 0.96) 100%);
}

.mx-card__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.28;
	color: var(--mx-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mx-card__meta {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mx-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Gate states ---------- */

.my-exotic--gate .mx-title {
	margin-top: 0;
}

.my-exotic--gate .my-exotic__wrap {
	max-width: 640px;
	padding: 32px 0;
}

/* ---------- Mobile bottom navigation ---------- */

.mx-bottom-nav {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 1100;
	display: none;
	background: rgba(11, 11, 11, 0.86);
	border-top: 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	/* Saturation keeps skin tones from going grey as the page scrolls under
	   the bar; the flat 8px blur made the whole bar read as dead plastic. */
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* A lit top edge instead of a flat hairline. The line brightens toward the
   middle, so the bar reads as a surface catching light rather than a border. */
.mx-bottom-nav::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.02) 100%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mx-bottom-nav {
		background: rgba(11, 11, 11, 0.98);
	}
}

.mx-bottom-nav__item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 56px;
	padding: 8px 4px;
	color: var(--mx-faint);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.mx-bottom-nav__item.is-active {
	color: var(--mx-ink);
}

.mx-bottom-nav__label {
	display: block;
}

/* ---------- Member auth shell ---------- */

.mx-auth {
	padding: 24px 16px 48px;
}

.mx-auth__wrap {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	gap: 24px;
}

.mx-auth__panel {
	padding: 24px 16px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: 26px;
	background: var(--mx-surface);
}

.mx-auth__title {
	margin: 8px 0 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.16;
	color: var(--mx-ink);
}

.mx-auth__lede {
	margin: 8px 0 24px;
	max-width: 56ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--mx-muted);
}

/* The legacy member form ships its own card chrome. Inside the auth panel it
   is content, not a panel, so the duplicated frame is removed. */
.mx-auth__panel .register-form-member {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* auth.css floats labels 30% / inputs 70% from 900px up. That was built for a
   full-width registration page; inside this narrower panel the floats collide
   with the next section heading, so the member form stays single-column.
   Escort and agency registration keep the original two-column behaviour. */
.mx-auth__panel .register-form-member .form-label,
.mx-auth__panel .register-form-member .form-input {
	float: none;
	width: 100%;
	padding-right: 0;
	padding-top: 0;
}

.mx-auth__panel .register-form-member .form-input {
	margin-bottom: 16px;
}

.mx-auth__panel .account-form-section {
	clear: both;
}

.mx-auth__panel .account-form-section + .account-form-section {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--mx-hairline);
}

.mx-auth__panel .account-form-section__eyebrow {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--mx-faint);
}

.mx-auth__panel .account-form-section__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.28;
	color: var(--mx-ink);
}

.mx-auth__panel .account-form-section__copy {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mx-muted);
}

.mx-auth__panel .text-center {
	text-align: left;
}

.mx-auth__panel .register-form-member .text-center input[type="submit"] {
	width: 100%;
	max-width: 320px;
	min-width: 0;
	min-height: 44px;
	margin-top: 24px;
	border-radius: var(--mx-radius-md);
	letter-spacing: 0;
	text-transform: none;
	font-size: 14px;
	font-weight: 600;
	color: #ECECEC;
}

.mx-auth__foot {
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--mx-hairline);
	font-size: 14px;
	color: var(--mx-muted);
}

.mx-auth__foot a {
	color: var(--mx-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mx-auth__aside {
	padding: 24px 16px;
	border: 1px solid var(--mx-hairline);
	border-radius: var(--mx-radius-lg);
	background: transparent;
}

.mx-auth__aside-title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.28;
	color: var(--mx-ink);
}

.mx-auth__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.mx-auth__benefit {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.mx-auth__benefit .mx-icon {
	margin-top: 2px;
	color: var(--mx-muted);
}

.mx-auth__benefit > span {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mx-muted);
}

.mx-auth__benefit strong {
	font-weight: 600;
	color: var(--mx-ink);
}

.mx-auth__aside-note {
	margin: 24px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mx-faint);
}

/* ---------- Parent-rendered email confirmation screen ----------
   `check_if_user_has_validated_his_email()` lives in the parent theme and
   prints this block from header.php. It cannot be edited, so it is aligned
   here instead. Resend and change-email behaviour is untouched.
   ------------------------------------------------------------------------- */

.registrationcomplete {
	width: 100%;
	max-width: 640px;
	margin: 24px auto;
	padding: 24px 16px;
	border: 1px solid #2E2E2E;
	border-radius: 26px;
	background: #1A1A1A;
	color: #ECECEC;
	font-size: 16px;
	line-height: 1.6;
}

.registrationcomplete .registrationcomplete-title {
	margin-bottom: 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.22;
	color: #ECECEC;
}

.registrationcomplete a {
	color: #ECECEC;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.registrationcomplete .greenbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 8px;
	padding: 0 16px;
	border: 1px solid #3A3A3A;
	border-radius: 10px;
	background: #222222;
	color: #ECECEC;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.registrationcomplete .greenbutton:hover {
	background: #2A2A2A;
}

.registrationcomplete .change-email-address {
	margin-top: 24px;
	font-size: 14px;
	color: #B4B4B4;
}

.registrationcomplete .change-email-address-form input.input {
	width: 100%;
	max-width: 360px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid #3A3A3A;
	border-radius: 10px;
	background: #222222;
	color: #ECECEC;
	font-size: 16px;
}

.registrationcomplete :is(a, button, input, .greenbutton):focus-visible {
	outline: 2px solid var(--focus-ring-color, #FFFFFF);
	outline-offset: 3px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
	.mx-rail {
		display: none;
	}

	body.my-exotic-bottom-nav {
		/* Bar is 58px of item plus its 1px top border; the rest is clearance so
		   the last row of content never sits flush against it. */
		padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
	}

	.mx-bottom-nav {
		display: flex;
	}
}

@media (min-width: 768px) {
	.my-exotic,
	.mx-auth {
		padding-left: 24px;
		padding-right: 24px;
	}

	.mx-module {
		padding: 24px;
	}

	.mx-auth__panel,
	.mx-auth__aside {
		padding: 32px;
	}

	.mx-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mx-rail {
		overflow-x: auto;
		padding-bottom: 8px;
		margin-bottom: 24px;
		border-bottom: 1px solid var(--mx-hairline);
		-webkit-overflow-scrolling: touch;
	}

	.mx-rail__list {
		flex-wrap: nowrap;
	}

	.mx-rail__group-title {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	body.my-exotic-shell header.modern-header .modern-nav-wrapper {
		max-width: 100%;
		min-width: 0;
		overflow-x: auto !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch;
	}

	body.my-exotic-shell header.modern-header .modern-nav-wrapper ul.header-menu {
		max-width: 100%;
		min-width: 0;
		overflow-x: auto !important;
		overflow-y: visible !important;
	}

	body.my-exotic-shell .footer-social__rail {
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
	}

	/* Tablet keeps one scrolling row so an upcoming item never clips mid-air. */
	.mx-rail {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
	}

	.mx-rail__list {
		flex: 0 0 auto;
	}
}

@media (min-width: 1024px) {
	.my-exotic {
		padding: 32px 24px 48px;
	}

	.mx-title,
	.mx-auth__title {
		font-size: 36px;
		font-weight: 800;
		line-height: 1.08;
	}

	.mx-layout {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 32px;
		align-items: start;
		padding-top: 32px;
	}

	.mx-rail {
		position: sticky;
		top: 24px;
		overflow: visible;
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: 0;
	}

	.mx-rail__list {
		flex-direction: column;
		gap: 4px;
	}

	.mx-rail__group-title {
		display: block;
	}

	.mx-rail__back {
		display: inline-block;
	}

	.mx-main > * + * {
		margin-top: 24px;
	}

	.mx-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mx-auth__wrap {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}
}

/* ==========================================================================
   PHASE 3 — saved grid counts, compare table, profile save button
   ========================================================================== */

.mx-count {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mx-muted);
	white-space: nowrap;
}

.mx-search-list {
	display: grid;
	gap: 8px;
}

.mx-search-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface-subtle);
	border: 1px solid var(--mx-border-subtle);
}

.mx-search-row__main {
	display: grid;
	gap: 4px;
	color: inherit;
	text-decoration: none;
}

.mx-search-row__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.28;
	color: var(--mx-ink);
}

.mx-search-row__meta {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mx-muted);
}

.mx-search-row__remove {
	white-space: nowrap;
}

@media (max-width: 520px) {
	.mx-search-row {
		grid-template-columns: 1fr;
	}

	.mx-search-row__remove {
		justify-self: start;
	}
}

/* The saved and compare grids reuse `.mx-card`, which is `position: relative`,
   so the save control positions against the card without a second rule. */
.mx-card .mx-save {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
}

/* ---------- Compare table -------------------------------------------------
   Horizontal scroll inside its own container rather than a stack: comparing is
   the point of the page, and stacking removes the comparison. The row labels
   stay pinned so a column is always identifiable while scrolling.
   ------------------------------------------------------------------------ */

.mx-compare-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 -4px;
	padding: 0 4px;
}

.mx-compare {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mx-ink);
}

.mx-compare th,
.mx-compare td {
	padding: 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--mx-hairline);
}

/* Pinned so a column is always identifiable while the table scrolls. The
   background matches the module surface rather than the page canvas — a darker
   fill would read as a hole where the empty header cell sits. */
.mx-compare__rowhead {
	position: sticky;
	left: 0;
	z-index: 2;
	width: 132px;
	min-width: 132px;
	background: var(--mx-surface);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mx-muted);
}

.mx-compare thead .mx-compare__rowhead {
	border-bottom-color: var(--mx-border-subtle);
}

.mx-compare__profile {
	min-width: 148px;
	border-bottom-color: var(--mx-border-subtle);
}

.mx-compare__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mx-compare__media {
	display: block;
	aspect-ratio: 3 / 4;
	width: 100%;
	max-width: 132px;
	border-radius: var(--mx-radius-md);
	overflow: hidden;
	background: #141414;
	margin-bottom: 8px;
}

.mx-compare__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mx-compare__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.28;
	color: var(--mx-ink);
}

.mx-compare__cell.is-unknown {
	color: var(--mx-faint);
}

@media (min-width: 768px) {
	.mx-compare {
		min-width: 0;
	}

	.mx-compare__rowhead {
		width: 160px;
		min-width: 160px;
	}
}

/* The workspace pages own the bottom slot; reserve room for the compare tray
   on top of the bottom nav's own reservation so it never covers the last row
   of a grid. */
@media (max-width: 767px) {
	body.mx-tray-open.my-exotic-bottom-nav {
		/* Tracks the tray's dock offset: it moved from 57px to 71px above the
		   bottom of the viewport when the nav bar grew and the channel between
		   the two widened. */
		padding-bottom: calc(154px + env(safe-area-inset-bottom, 0px));
	}
}

/* Keep the card name clear of the save control in the bottom-right corner. */
.mx-card__scrim {
	padding-right: 48px;
}

.mx-unlock-list {
	display: grid;
	gap: 12px;
}

.mx-unlock-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 16px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface);
}

.mx-unlock-row.is-expired {
	opacity: 0.72;
}

.mx-unlock-row__profile {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.mx-unlock-row__media {
	display: block;
	aspect-ratio: 3 / 4;
	width: 72px;
	overflow: hidden;
	border-radius: var(--mx-radius-md);
	background: #141414;
}

.mx-unlock-row__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mx-unlock-row__copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.mx-unlock-row__copy strong {
	overflow: hidden;
	color: var(--mx-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mx-unlock-row__copy span,
.mx-unlock-row__copy em {
	color: var(--mx-muted);
	font-size: 13px;
	font-style: normal;
	line-height: 1.35;
}

.mx-unlock-row__actions {
	display: flex;
	justify-content: flex-end;
}

.mx-unlock-row__contact {
	grid-column: 1 / -1;
	display: grid;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--mx-hairline);
}

.mx-unlock-contact__details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.mx-unlock-contact__details a {
	display: grid;
	gap: 4px;
	min-height: 64px;
	padding: 12px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-md);
	background: var(--mx-surface-subtle);
	color: var(--mx-ink);
	text-decoration: none;
}

.mx-unlock-contact__details span {
	color: var(--mx-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

.mx-unlock-contact__details strong {
	overflow-wrap: anywhere;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.mx-reachability {
	display: grid;
	gap: 8px;
}

.mx-reachability__title {
	margin: 0;
	color: var(--mx-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.28;
}

.mx-reachability__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mx-reachability__options button {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--mx-border-default);
	border-radius: var(--mx-radius-md);
	background: var(--mx-surface-subtle);
	color: var(--mx-ink);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.mx-reachability__options button:disabled {
	cursor: default;
	opacity: 0.58;
}

.mx-reachability__message {
	min-height: 20px;
	margin: 0;
	color: var(--mx-muted);
	font-size: 13px;
	line-height: 1.45;
}

@media (max-width: 640px) {
	.mx-unlock-row {
		grid-template-columns: 1fr;
	}

	.mx-unlock-row__actions {
		justify-content: stretch;
	}

	.mx-unlock-row__actions .mx-button {
		width: 100%;
	}

	.mx-unlock-contact__details {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   PHASE 7 — Safety centre, report history, and review history
   One neutral surface per row. Nothing here is red: this page has no commit
   action, and status is carried by a word plus an outline, never by colour
   alone.
   ========================================================================== */

.mx-safety-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mx-safety-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 16px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface);
}

.mx-safety-row__main {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	min-width: 0;
}

.mx-safety-row__media {
	display: block;
	aspect-ratio: 3 / 4;
	width: 72px;
	overflow: hidden;
	border-radius: var(--mx-radius-md);
	background: #141414;
}

.mx-safety-row__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mx-safety-row__copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.mx-safety-row__name {
	overflow: hidden;
	color: var(--mx-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.mx-safety-row__name:hover,
a.mx-safety-row__name:focus-visible {
	text-decoration: underline;
}

.mx-safety-row__reason {
	color: var(--mx-ink);
	font-size: 14px;
	line-height: 1.35;
}

.mx-safety-row__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--mx-muted);
	font-size: 13px;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mx-safety-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	color: var(--mx-faint);
	font-size: 12px;
	line-height: 1.4;
}

.mx-safety-row__side {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
}

/* Status is an outline plus tint at the shipped badge spec, never a fill. */
.mx-badge--status {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 7px;
	border: 1px solid var(--mx-border-default);
	border-radius: var(--mx-radius-badge);
	background: var(--mx-surface-subtle);
	color: var(--mx-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.mx-badge--status.is-closed {
	color: var(--mx-muted);
}

.mx-ref {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.mx-ref__code {
	padding: 4px 8px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-badge);
	background: var(--mx-surface-subtle);
	color: var(--mx-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	letter-spacing: 0.02em;
}

.mx-note {
	margin: 12px 0 0;
	color: var(--mx-faint);
	font-size: 12px;
	line-height: 1.5;
}

.mx-guidance {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mx-guidance li {
	display: grid;
	gap: 4px;
	padding: 0 0 0 12px;
	border-left: 2px solid var(--mx-hairline);
}

.mx-guidance strong {
	color: var(--mx-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.mx-guidance span {
	color: var(--mx-muted);
	font-size: 13px;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.mx-safety-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.mx-safety-row__side {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   WORKSPACE UX — resume, chips, density tiers, rows, CTA
   The workspace is a resume screen, not a dashboard. Everything here exists to
   answer "what next?" above the fold instead of "how many?".
   ========================================================================== */

/* ---------- Header: compact on mobile, generous on desktop ----------
   The old header spent the whole first screen on chrome: an eyebrow reading
   MEMBER WORKSPACE above an H1 reading My Exotic, a sentence explaining the
   H1, and a "Signed in as" block. On mobile the eyebrow and the identity copy
   are dropped; the avatar survives as a 44px link to the account, which is
   where a member looks for it anyway. */

.mx-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--mx-hairline);
}

.mx-head__identity {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	border-radius: 999px;
}

a.mx-head__identity:hover .mx-avatar {
	background: var(--mx-surface-elevated);
	border-color: var(--mx-border-default);
}

a.mx-head__identity:hover .mx-head__identity-name {
	color: var(--mx-ink);
}

.mx-avatar {
	transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 767px) {
	.mx-head {
		align-items: center;
		padding-bottom: 16px;
	}

	.mx-head .mx-eyebrow,
	.mx-head__identity-copy {
		/* Both restate what the H1 and the session already say. */
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.mx-head .mx-title {
		margin-top: 0;
		font-size: 26px;
	}

	.mx-head .mx-lede {
		font-size: 14px;
		line-height: 1.5;
	}
}

/* ---------- Resume card ----------
   The first element on the page that is the member's own content. Landscape on
   mobile so it costs about 150px rather than a full portrait, but still puts a
   face on the first screen — which the counter grid it replaced never did. */

.mx-resume {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface);
	transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-resume:hover {
	border-color: var(--mx-border-default);
}

.mx-resume__link {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr);
	color: inherit;
	text-decoration: none;
}

.mx-resume__media {
	display: block;
	position: relative;
	aspect-ratio: 3 / 4;
	background: #101010;
}

.mx-resume__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mx-resume__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	padding: 16px 16px 16px 18px;
}

.mx-resume__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--mx-gold);
}

.mx-resume__name {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.18;
	color: var(--mx-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mx-resume__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mx-muted);
}

.mx-resume__meta .mx-icon {
	width: 15px;
	height: 15px;
	color: var(--mx-faint);
}

.mx-resume__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--mx-ink);
}

.mx-resume__cta svg {
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mx-resume:hover .mx-resume__cta svg {
	transform: translateX(3px);
}

/* The save control anchors to the card, clear of the name and the CTA. The base
   rule pins it to the bottom for grid cards, so `bottom` is released here
   rather than left to over-constrained-box resolution. */
.mx-resume .mx-save {
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: auto;
	z-index: 3;
}

@media (prefers-reduced-motion: reduce) {

	.mx-resume__cta svg {
		transition: none;
	}

	.mx-resume:hover .mx-resume__cta svg {
		transform: none;
	}
}

/* ---------- Start card: the resume card's empty state ---------- */

.mx-start {
	padding: 20px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface);
}

.mx-start__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.28;
	color: var(--mx-ink);
}

.mx-start__copy {
	margin: 6px 0 16px;
	max-width: 52ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mx-muted);
}

/* ---------- Count chips ----------
   Counters you can act on. The tiles these replace were `div`s: a number the
   member could not tap, duplicating navigation that already existed twice. */

.mx-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	margin-inline: -16px;
	padding-inline: 16px;
}

.mx-chips::-webkit-scrollbar {
	display: none;
}

.mx-chips::after {
	content: '';
	flex: 0 0 4px;
}

.mx-chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-md);
	background: var(--mx-surface);
	color: var(--mx-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-chip:hover {
	background: var(--mx-surface-elevated);
	border-color: var(--mx-border-default);
	color: var(--mx-ink);
}

.mx-chip .mx-icon {
	width: 16px;
	height: 16px;
	color: var(--mx-faint);
}

.mx-chip__value {
	font-size: 15px;
	font-weight: 800;
	color: var(--mx-ink);
	font-variant-numeric: tabular-nums;
}

/* ---------- Module density tiers ----------
   Every section used to carry the same border, fill, radius and padding, so a
   one-sentence counter looked exactly as important as a row of faces. Three
   tiers now: `--feature` drops the card so images can run to the screen edge,
   the default card holds contained content, `--list` holds rows. */

.mx-module--feature {
	padding: 0;
	border: 0;
	background: transparent;
}

.mx-module--feature .mx-module__head {
	min-height: 40px;
}

.mx-module--feature .mx-module__body {
	margin-top: 10px;
}

.mx-module--feature .mx-module__note {
	margin-top: 10px;
}

.mx-module--list .mx-module__body {
	margin-top: 4px;
}

/* ---------- Card rails ----------
   Mobile swaps the 2-up grid for a full-bleed snap row. The grid squeezed two
   3:4 portraits into a bordered card inside 16px of page padding, rendering
   faces — the product's whole asset — at about 150px wide. */

@media (max-width: 767px) {
	.mx-cards--rail {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scroll-padding-left: 16px;
		margin-inline: -16px;
		padding-inline: 16px;
	}

	.mx-cards--rail::-webkit-scrollbar {
		display: none;
	}

	/* Guarantees trailing breathing room; scroll containers drop the inline
	   end padding of a flex row in some engines. */
	.mx-cards--rail::after {
		content: '';
		flex: 0 0 4px;
	}

	.mx-cards--rail > .mx-card {
		flex: 0 0 60%;
		max-width: 250px;
		scroll-snap-align: start;
	}
}

/* ---------- List rows ---------- */

.mx-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mx-rows__item + .mx-rows__item {
	border-top: 1px solid var(--mx-hairline);
}

.mx-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	margin-inline: -8px;
	padding: 10px 8px;
	border-radius: var(--mx-radius-md);
	color: inherit;
	text-decoration: none;
	transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-row:hover {
	background: rgba(255, 255, 255, 0.035);
}

.mx-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--mx-radius-md);
	background: var(--mx-surface-subtle);
	border: 1px solid var(--mx-border-subtle);
	color: var(--mx-muted);
}

.mx-row__copy {
	min-width: 0;
}

.mx-row__label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mx-ink);
}

.mx-row__detail {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mx-muted);
}

.mx-row__value {
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	color: var(--mx-ink);
	font-variant-numeric: tabular-nums;
}

.mx-row__chevron {
	display: flex;
	align-items: center;
	color: var(--mx-faint);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-row:hover .mx-row__chevron {
	transform: translateX(2px);
	color: var(--mx-muted);
}

/* ---------- Face stacks ----------
   A list is the people in it. Overlapping thumbnails answer "who is on my
   shortlist" in the same space the bare count occupied. */

.mx-row__faces {
	display: flex;
	align-items: center;
	padding-left: 6px;
}

.mx-row__face {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--mx-surface-subtle);
	/* The ring is the card fill, not a colour, so the stack reads as cut out
	   of the row rather than outlined on top of it. */
	box-shadow: 0 0 0 2px var(--mx-surface);
}

/* Later items paint over earlier ones by default, so the cascade runs left to
   right and the overflow chip lands on top at the end of the stack. */
.mx-row__face + .mx-row__face {
	margin-left: -10px;
}

.mx-row__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mx-row__face--more {
	background: var(--mx-surface-elevated);
	color: var(--mx-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {

	.mx-row__chevron {
		transition: none;
	}

	.mx-row:hover .mx-row__chevron {
		transform: none;
	}
}

/* ---------- Disclosure ----------
   Policy copy the member may need, filed where it does not become the last
   thing they read on the page. */

.mx-disclose {
	margin-top: 12px;
	border-top: 1px solid var(--mx-hairline);
	padding-top: 12px;
}

.mx-disclose__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	list-style: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--mx-muted);
}

.mx-disclose__summary::-webkit-details-marker {
	display: none;
}

.mx-disclose__summary:hover {
	color: var(--mx-ink);
}

.mx-disclose__summary .mx-icon {
	flex: 0 0 auto;
	color: var(--mx-faint);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mx-disclose[open] .mx-disclose__summary .mx-icon {
	transform: rotate(180deg);
}

.mx-disclose__body {
	margin: 0 0 4px;
	max-width: 62ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--mx-faint);
}

@media (prefers-reduced-motion: reduce) {

	.mx-disclose__summary .mx-icon {
		transition: none;
	}
}

/* ---------- Closing call to action ----------
   The page used to end on three identically weighted grey buttons, one of them
   an account settings link. One primary action, one quiet alternative. */

.mx-cta {
	padding: 24px 20px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background:
		radial-gradient(115% 135% at 0% 0%, rgba(139, 10, 26, 0.26) 0%, rgba(139, 10, 26, 0) 62%),
		var(--mx-surface);
}

.mx-cta__title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.22;
	color: var(--mx-ink);
}

.mx-cta__copy {
	margin: 8px 0 0;
	max-width: 52ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mx-muted);
}

.mx-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* ---------- Button variants ---------- */

.mx-button--primary {
	background: var(--mx-brand);
	border-color: var(--mx-brand);
	color: #ECECEC;
}

.mx-button--primary:hover {
	background: var(--mx-brand-active);
	border-color: var(--mx-brand-active);
	color: #FFFFFF;
}

.mx-button--ghost {
	background: transparent;
	border-color: var(--mx-border-default);
	color: var(--mx-muted);
}

.mx-button--ghost:hover {
	background: var(--mx-surface-subtle);
	border-color: var(--mx-border-strong, #4A4A4A);
	color: var(--mx-ink);
}

/* ---------- Bottom navigation ----------
   The active marker was a 2px gold line on the *top* edge of the item, which
   read as a divider between the bar and the page rather than as a selection.
   It is a pill behind the icon now — the shape moves with the item, so it
   cannot be mistaken for chrome. */

.mx-bottom-nav__item {
	min-height: 58px;
	padding: 7px 4px 6px;
	gap: 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	/* The old bar leaned on a 2px gold rule along the item's top edge, which
	   read as a divider between bar and page rather than as a selection. The
	   marker is a shape behind the icon now: it moves with the item, so it can
	   never be mistaken for chrome. */
	color: #7C7C7C;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-bottom-nav__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 30px;
	border-radius: var(--mx-radius-md);
	border: 1px solid transparent;
	transition:
		background 200ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mx-bottom-nav__item .mx-icon {
	width: 21px;
	height: 21px;
}

.mx-bottom-nav__item.is-active {
	color: var(--mx-ink);
}

.mx-bottom-nav__item.is-active .mx-bottom-nav__icon {
	background: rgba(200, 16, 46, 0.2);
	border-color: rgba(242, 73, 92, 0.34);
	color: var(--mx-brand-ink);
}

.mx-bottom-nav__item:hover {
	color: var(--mx-muted);
}

.mx-bottom-nav__item:hover .mx-bottom-nav__icon {
	background: rgba(255, 255, 255, 0.055);
}

.mx-bottom-nav__item.is-active:hover {
	color: var(--mx-ink);
}

.mx-bottom-nav__item.is-active:hover .mx-bottom-nav__icon {
	background: rgba(200, 16, 46, 0.28);
}

/* Touch feedback. A tab bar that does not answer the finger feels broken on a
   phone, and there is no hover state to stand in for it. */
.mx-bottom-nav__item:active .mx-bottom-nav__icon {
	transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {

	.mx-bottom-nav__item,
	.mx-bottom-nav__icon {
		transition: none;
	}

	.mx-bottom-nav__item:active .mx-bottom-nav__icon {
		transform: none;
	}
}

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
	.mx-resume__link {
		grid-template-columns: 168px minmax(0, 1fr);
	}

	.mx-resume__body {
		gap: 8px;
		padding: 24px 24px 24px 28px;
	}

	.mx-resume__name {
		font-size: 26px;
	}

	.mx-cta {
		padding: 28px;
	}

	.mx-cta__title {
		font-size: 24px;
	}

	.mx-start {
		padding: 28px;
	}
}

@media (min-width: 1024px) {
	.mx-head {
		align-items: end;
		padding-bottom: 24px;
	}

	.mx-resume__link {
		grid-template-columns: 200px minmax(0, 1fr);
	}

	.mx-resume__name {
		font-size: 30px;
	}

	.mx-module--feature .mx-module__head {
		min-height: 44px;
	}
}

/* ---------- Layout corrections ----------
   Rules that have to sit after the component blocks above, either because they
   undo a full-bleed treatment that only makes sense on a phone, or because
   they settle a same-specificity tie with `customer-product.css`.
   ------------------------------------------------------------------------ */

/* The save control is 44px wide and sits over the body panel, so the name and
   eyebrow reserve room for it rather than running underneath. */
.mx-resume__body {
	padding-right: 52px;
}

/* The recommendations module ships its own 24px block margin, which ties on
   specificity with the workspace's sibling spacing. Named explicitly so the
   rhythm does not depend on stylesheet order. */
.mx-main > .mx-recommendations {
	margin: 0;
}

@media (min-width: 768px) {
	/* Full-bleed is a phone treatment. From tablet up the content column has a
	   rail beside it, and a negative margin would slide under it. */
	.mx-chips {
		margin-inline: 0;
		padding-inline: 0;
	}

	.mx-resume__body {
		padding-right: 60px;
	}
}

/* ---------- Desktop rail ----------
   Nine identical text links with a faint fill on the active one gave the
   column no centre of gravity — you had to read every label to find where you
   were. The active item now carries a gold edge, a lift, and a gold icon, so
   position is legible before any label is read.
   ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
	.mx-rail__list {
		gap: 2px;
	}

	.mx-rail__link {
		position: relative;
		gap: 12px;
		min-height: 42px;
		padding: 0 12px 0 14px;
		font-size: 14px;
		font-weight: 600;
		transition:
			background 150ms cubic-bezier(0.4, 0, 0.2, 1),
			color 150ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mx-rail__link .mx-icon {
		width: 18px;
		height: 18px;
		color: var(--mx-faint);
		transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mx-rail__link:hover {
		background: rgba(255, 255, 255, 0.04);
		color: var(--mx-ink);
	}

	.mx-rail__link:hover .mx-icon {
		color: var(--mx-muted);
	}

	.mx-rail__link.is-active {
		background: linear-gradient(90deg, rgba(200, 16, 46, 0.18) 0%, rgba(200, 16, 46, 0.04) 70%, rgba(200, 16, 46, 0) 100%);
		border-color: transparent;
		color: var(--mx-ink);
		font-weight: 700;
	}

	/* The edge, not a full border: it marks the column position rather than
	   drawing a box the other items do not have. */
	.mx-rail__link.is-active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 8px;
		bottom: 8px;
		width: 2px;
		border-radius: 2px;
		background: var(--mx-brand-ink);
	}

	.mx-rail__link.is-active .mx-icon {
		color: var(--mx-brand-ink);
	}

	.mx-rail__browse {
		margin-top: 16px;
		padding-top: 16px;
		font-size: 13px;
		color: var(--mx-faint);
	}

	.mx-rail__browse .mx-icon {
		width: 18px;
		height: 18px;
	}

	.mx-rail__browse:hover {
		color: var(--mx-ink);
	}
}

/* Tablet keeps the row, but the active chip needs the same confidence. */
@media (min-width: 768px) and (max-width: 1023px) {
	.mx-rail__link.is-active {
		background: rgba(200, 16, 46, 0.18);
		border-color: rgba(242, 73, 92, 0.3);
		color: var(--mx-ink);
	}

	.mx-rail__link.is-active .mx-icon {
		color: var(--mx-brand-ink);
	}
}

@media (prefers-reduced-motion: reduce) {

	.mx-rail__link,
	.mx-rail__link .mx-icon {
		transition: none;
	}
}

/* ==========================================================================
   COMPARE — side by side
   The table was a raw spec dump: eleven undifferentiated rows, a full-width
   destructive button under every face, em-dashes filling rows no selected
   profile answered, and no signal at all on the rows where the profiles
   actually differ — which is the only reason the page exists.
   ========================================================================== */

.mx-compare__card {
	position: relative;
	max-width: 168px;
}

.mx-compare__media {
	max-width: 168px;
	margin-bottom: 10px;
	border-radius: var(--mx-radius-lg);
	border: 1px solid var(--mx-border-subtle);
}

.mx-compare__link:hover .mx-compare__media {
	border-color: var(--mx-border-default);
}

.mx-compare__name {
	font-size: 15px;
	font-weight: 700;
}

.mx-compare__where {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mx-muted);
}

/* Corner mark, not a bar. 44px of hit area around a 28px visual so the target
   is honest without the control shouting. */
.mx-compare__remove {
	position: absolute;
	top: -8px;
	right: -8px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mx-muted);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mx-compare__remove::before {
	content: '';
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid var(--mx-border-default);
	background: rgba(14, 14, 14, 0.92);
	backdrop-filter: blur(6px);
	transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-compare__remove svg {
	position: relative;
	z-index: 1;
}

.mx-compare__remove:hover {
	color: var(--mx-ink);
}

.mx-compare__remove:hover::before {
	background: var(--mx-error);
	border-color: var(--mx-error);
}

/* ---------- Open slot ----------
   "1 of 4" reported the gap. A drawn slot offers to fill it, which is the only
   thing a customer looking at a one-column comparison wants. */

.mx-compare__profile--open {
	min-width: 168px;
}

.mx-compare-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	max-width: 168px;
	aspect-ratio: 3 / 4;
	border: 1px dashed var(--mx-border-default);
	border-radius: var(--mx-radius-lg);
	background: rgba(255, 255, 255, 0.015);
	color: var(--mx-muted);
	text-align: center;
	text-decoration: none;
	transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), background 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-compare-slot:hover {
	border-color: var(--mx-gold);
	background: rgba(230, 196, 106, 0.06);
	color: var(--mx-ink);
}

.mx-compare-slot__mark {
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
	color: var(--mx-faint);
}

.mx-compare-slot__label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.mx-compare-slot__hint {
	font-size: 11px;
	font-weight: 500;
	color: var(--mx-faint);
}

.mx-compare__cell--open {
	min-width: 168px;
	background: rgba(255, 255, 255, 0.012);
}

/* ---------- Row groups ---------- */

.mx-compare__grouphead {
	padding-top: 20px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--mx-border-subtle);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--mx-faint);
	background: var(--mx-surface);
}

.mx-compare__group:first-of-type .mx-compare__grouphead {
	padding-top: 14px;
}

/* ---------- Difference marking ----------
   The rows where the profiles disagree are the page's whole payload; they used
   to be visually identical to the rows where everyone said the same thing. */

.mx-compare tbody tr.is-diff td {
	color: var(--mx-ink);
	font-weight: 600;
}

.mx-compare tbody tr.is-diff .mx-compare__rowhead {
	color: var(--mx-gold);
}

.mx-compare tbody tr.is-diff .mx-compare__rowhead::after {
	content: '';
	display: block;
	width: 16px;
	height: 2px;
	margin-top: 5px;
	border-radius: 2px;
	background: var(--mx-gold);
}

.mx-compare__cell.is-unknown {
	color: var(--mx-faint);
}

/* A single column is not a comparison; the table should not pretend otherwise
   by stretching one profile across the full width. */
.mx-compare.is-single {
	min-width: 0;
}

/* ---------- Empty state ---------- */

.mx-compare-empty {
	padding: 32px 20px 28px;
	text-align: center;
}

.mx-compare-empty__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: var(--mx-radius-lg);
	border: 1px solid var(--mx-border-subtle);
	background: var(--mx-surface-subtle);
	color: var(--mx-faint);
}

.mx-compare-empty__mark .mx-icon {
	width: 26px;
	height: 26px;
}

.mx-compare-empty__title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.22;
	color: var(--mx-ink);
}

.mx-compare-empty__copy {
	margin: 8px auto 0;
	max-width: 46ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mx-muted);
}

.mx-compare-empty .mx-cta__actions {
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {

	.mx-compare__remove::before,
	.mx-compare-slot {
		transition: none;
	}
}

/* Columns hold a 168px card, so they reserve the room rather than squeezing it. */
.mx-compare__profile {
	min-width: 180px;
}

/* ==========================================================================
   FRESHNESS — "who is here now"
   The directory expresses freshness as five look-alike time filters. The
   workspace asks the narrower question a member with a saved list actually
   has: is anyone I already care about around right now. One state, one dot,
   one answer — no filter row to parse.
   ========================================================================== */

.mx-live__dot {
	flex: 0 0 auto;
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--mx-muted);
}

.mx-live__dot.is-live {
	background: var(--mx-success);
}

/* The ring, not the dot, carries the animation: a pulsing dot on a list of
   faces reads as a loading state. */
.mx-live__dot.is-live::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 999px;
	border: 1px solid var(--mx-success);
	opacity: 0;
	animation: mx-live-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes mx-live-pulse {
	0% { transform: scale(0.65); opacity: 0.85; }
	70% { transform: scale(1.35); opacity: 0; }
	100% { transform: scale(1.35); opacity: 0; }
}

.mx-live .mx-module__title {
	gap: 10px;
}

/* ---------- The nothing-doing state ----------
   An empty freshness module would be a heading over a blank. As one row it
   stays honest about the answer and still offers the next move. */

.mx-live-nudge {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 12px 16px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface);
	color: inherit;
	text-decoration: none;
	transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-live-nudge:hover {
	background: var(--mx-surface-subtle);
	border-color: var(--mx-border-default);
}

.mx-live-nudge__copy {
	display: grid;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.mx-live-nudge__copy strong {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mx-ink);
}

.mx-live-nudge__copy span {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--mx-muted);
}

.mx-live-nudge > svg {
	flex: 0 0 auto;
	color: var(--mx-faint);
}

@media (prefers-reduced-motion: reduce) {

	.mx-live__dot.is-live::after {
		animation: none;
	}

	.mx-live-nudge {
		transition: none;
	}
}