/* ==========================================================================
   MY EXOTIC — customer product controls on public surfaces
   Save control, compare toggle, compare tray, and the write toast.

   These render on listing and profile pages, outside the `.my-exotic`
   workspace scope, so the tokens are declared again here rather than
   inherited. Values are the DESIGN.md set — no second red, no gold except
   focus, no radius or spacing outside the shipped scales.
   ========================================================================== */

.mx-save,
.mx-compare-toggle,
.mx-follow,
.mx-save-search,
.mx-profile-save,
.mx-tray,
.mx-toast {
	--mx-surface: #1A1A1A;
	--mx-surface-subtle: #222222;
	--mx-surface-elevated: #2A2A2A;
	--mx-border-subtle: #2E2E2E;
	--mx-border-default: #3A3A3A;
	--mx-ink: #ECECEC;
	--mx-muted: #B4B4B4;
	--mx-gold: #E6C46A;
	--mx-error: #EF4444;
	--mx-primary: #8B0A1A;
	--mx-primary-active: #6E0816;
	--mx-radius-md: 10px;
	--mx-radius-lg: 14px;
	--mx-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
	font-family: var(--mx-font);
}

.mx-save:focus-visible,
.mx-compare-toggle:focus-visible,
.mx-follow:focus-visible,
.mx-save-search:focus-visible,
.mx-profile-save:focus-visible,
.mx-tray :is(a, button):focus-visible {
	outline: 2px solid var(--focus-ring-color, #FFFFFF);
	outline-offset: 3px;
}

/* ---------- Save control ----------------------------------------------------
   The visual box is 32px; the hit area is padded out to 44px. It sits at the
   bottom-right of the media because that is the reachable corner one-handed at
   390px — the badge keeps the top-left, which is a read target, not a tap one.
   -------------------------------------------------------------------------- */

.mx-save {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px hit area around a 32px visual box. */
	width: 44px;
	height: 44px;
	padding: 6px;
	margin: 0;
	border: 0;
	background: none;
	color: var(--mx-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mx-save__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--mx-radius-md);
	border: 1px solid rgba(236, 236, 236, 0.28);
	background: rgba(14, 14, 14, 0.62);
	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-save:hover .mx-save__mark {
	background: rgba(20, 20, 20, 0.86);
	border-color: rgba(236, 236, 236, 0.48);
}

.mx-save.is-saved .mx-save__mark {
	border-color: rgba(236, 236, 236, 0.7);
	background: rgba(20, 20, 20, 0.9);
}

.mx-save .mx-icon {
	width: 20px;
	height: 20px;
}

.mx-save[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* Pending replaces the mark with a spinner inside the same 32px box, so the
   control never changes size mid-write. */
.mx-save__spinner {
	display: none;
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 2px solid rgba(236, 236, 236, 0.28);
	border-top-color: var(--mx-ink);
	animation: mx-spin 700ms linear infinite;
}

.mx-save.is-pending .mx-save__mark .mx-icon {
	opacity: 0;
}

.mx-save.is-pending .mx-save__spinner {
	display: block;
}

@keyframes mx-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mx-save__spinner {
		animation-duration: 2s;
	}
}

/* ---------- Compare toggle ---------- */

.mx-compare-toggle {
	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-size: 14px;
	font-weight: 600;
	line-height: 1;
	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-compare-toggle:hover {
	background: var(--mx-surface-elevated);
}

.mx-compare-toggle.is-selected {
	border-color: rgba(236, 236, 236, 0.6);
	background: var(--mx-surface-elevated);
}

.mx-compare-toggle[disabled] {
	opacity: 0.55;
	cursor: default;
}

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

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

/* ---------- Follow and saved search controls ----------------------------- */

.mx-follow,
.mx-save-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	min-width: 132px;
	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-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-follow:hover,
.mx-save-search:hover {
	background: var(--mx-surface-elevated);
	border-color: rgba(236, 236, 236, 0.42);
}

.mx-follow:active,
.mx-save-search:active {
	transform: translateY(1px);
}

.mx-follow.is-following,
.mx-save-search.is-saved {
	border-color: rgba(236, 236, 236, 0.6);
	background: var(--mx-surface-elevated);
}

.mx-follow[disabled],
.mx-save-search[disabled] {
	opacity: 0.58;
	cursor: default;
	transform: none;
}

.mx-follow .mx-icon,
.mx-save-search .mx-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.discovery-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

.listing-context__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.discovery-hero__actions .mx-follow,
.discovery-hero__actions .mx-save-search,
.listing-context__actions .mx-follow {
	background: rgba(34, 34, 34, 0.88);
	backdrop-filter: blur(8px);
}

/* ---------- Profile detail save + compare pair ---------- */

.profile-save-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
}

.mx-profile-save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	/* Sized for the longer of the two labels so the pending and saved states
	   never reflow the row. */
	min-width: 132px;
	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;
	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-profile-save:hover {
	background: var(--mx-surface-elevated);
}

.mx-profile-save.is-saved {
	border-color: rgba(236, 236, 236, 0.6);
	background: var(--mx-surface-elevated);
}

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

.mx-profile-save.is-pending {
	opacity: 0.75;
}

.mx-profile-save .mx-icon,
.mx-save .mx-icon,
.mx-compare-toggle .mx-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* ---------- Compare tray ----------------------------------------------------
   A slim bar, not a modal: the member is mid-browse and a modal would
   interrupt the scanning the tray exists to support.

   The bottom slot has one owner. Where a profile FAB or the My Exotic bottom
   nav already occupies it, the tray docks above that instead of over it.
   -------------------------------------------------------------------------- */

.mx-tray {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1090;
	display: none;
	padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
}

.mx-tray.is-open {
	display: block;
}

.mx-tray[hidden] {
	display: none;
}

.mx-tray__inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1240px;
	margin: 0 auto;
	min-height: 56px;
	padding: 8px 12px;
	border-radius: var(--mx-radius-lg);
	border: 1px solid var(--mx-border-subtle);
	background: rgba(20, 20, 20, 0.96);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

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

.mx-tray__items {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

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

.mx-tray__item {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 42px;
	border-radius: 6px;
	background: #101010;
	border: 1px solid var(--mx-border-subtle);
}

.mx-tray__item img {
	border-radius: 5px;
}

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

/* The visible × sits on a 32px thumbnail, but the hit area is padded out past
   it to 44px in both dimensions — the same "hit area extends past the visual
   box" rule the listing-card save control follows. */
.mx-tray__remove {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mx-ink);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.mx-tray__remove::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 6px;
	width: 32px;
	height: 42px;
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(6, 6, 6, 0.78) 0%, rgba(6, 6, 6, 0) 62%);
	pointer-events: none;
}

.mx-tray__remove span {
	position: relative;
	padding: 2px 8px 2px 4px;
}

/* The single red element in this viewport: the commit action that opens the
   comparison. Light ink on burgundy — never black. */
.mx-tray__open {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--mx-radius-md);
	border: 1px solid var(--mx-primary);
	background: var(--mx-primary);
	color: var(--mx-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.mx-tray__open:hover,
.mx-tray__open:focus {
	background: var(--mx-primary-active);
	border-color: var(--mx-primary-active);
	color: var(--mx-ink);
}

/* One red per viewport, and it belongs to the commit action. On a profile page
   the commit action is Call/WhatsApp in the FAB, so the tray's open button
   steps down to neutral there — if two controls want to be red, one of them is
   not the commit action. On listing pages nothing else claims it and the tray
   keeps the burgundy. */
body.mx-has-profile-fab .mx-tray__open {
	background: var(--mx-surface-elevated);
	border-color: var(--mx-border-default);
	color: var(--mx-ink);
}

body.mx-has-profile-fab .mx-tray__open:hover,
body.mx-has-profile-fab .mx-tray__open:focus {
	background: var(--mx-surface-subtle);
	border-color: var(--mx-border-strong, #4A4A4A);
	color: var(--mx-ink);
}

/* Dock above whichever fixed bar already owns the bottom slot. The bottom nav
   is 59px tall, so 71px leaves a clear 12px channel between the two — the old
   8px let the puck's shadow bleed into the bar and read as one crowded stack. */
body.my-exotic-bottom-nav .mx-tray {
	bottom: calc(71px + env(safe-area-inset-bottom, 0px));
	padding-bottom: 0;
}

/*
 * The compare page has a compare table on it. A floating shortlist bar over the
 * surface whose entire job is showing that shortlist is one control too many.
 */
body.my-exotic-surface-compare .mx-tray {
	display: none;
}

@media (max-width: 768px) {
	/* The FAB is 66px tall and sits 14px from the bottom, so its top edge is at
	   80px. Docking at 88px leaves one 8px gap between the two bars. */
	body.mx-has-profile-fab .mx-tray {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
		padding-bottom: 0;
	}
}

/* ---------- Collapsed tray: the puck ----------
   Scrolling down folds the bar into a 52px puck in the corner; scrolling back
   up, or tapping the puck, restores it. The bar is where you finish comparing;
   the puck is how you keep browsing without losing the shortlist. */

.mx-tray__puck {
	pointer-events: auto;
	position: absolute;
	right: 12px;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--mx-border-subtle);
	background: rgba(20, 20, 20, 0.96);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	color: var(--mx-ink);
	cursor: pointer;
	/* Transform and opacity only. */
	opacity: 0;
	transform: scale(0.8) translateY(8px);
	transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mx-tray__puck svg {
	width: 22px;
	height: 22px;
}

/* The count is a number as well as a dot, so it is never colour alone. */
.mx-tray__puck-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--mx-brand, #8B0A1A);
	color: #ECECEC;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/*
 * `[hidden]` is a UA rule and loses to any class selector that sets display,
 * so the two states are said explicitly in both directions.
 */
.mx-tray:not(.is-collapsed) .mx-tray__puck {
	opacity: 0;
	transform: scale(0.8) translateY(8px);
	pointer-events: none;
	visibility: hidden;
}

.mx-tray.is-collapsed .mx-tray__puck {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
}

.mx-tray.is-collapsed .mx-tray__inner {
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	pointer-events: none;
	visibility: hidden;
}

.mx-tray__inner {
	transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: bottom right;
}

/*
 * Reduced motion keeps the state change and drops the travel. The tray still
 * collapses — the feedback is not removed, only the movement.
 */
@media (prefers-reduced-motion: reduce) {

	.mx-tray__puck,
	.mx-tray__inner {
		transition: opacity 0.01ms !important;
		transform: none !important;
	}

	.mx-tray.is-collapsed .mx-tray__inner {
		transform: none !important;
	}
}

/* Reserve room so the tray never covers the last row of results. The workspace
   stacks its own bottom-nav reservation on top of this in `my-exotic.css`. */
body.mx-tray-open {
	padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Collapsed, the tray only needs room for the puck. */
body.mx-tray-open.mx-tray-collapsed {
	padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
	body.mx-tray-open.mx-has-profile-fab {
		padding-bottom: calc(146px + env(safe-area-inset-bottom, 0px));
	}
}

/* ---------- Write toast ---------- */

.mx-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 1120;
	transform: translate(-50%, 12px);
	max-width: min(92vw, 420px);
	padding: 12px 16px;
	border-radius: var(--mx-radius-md);
	border: 1px solid var(--mx-border-subtle);
	background: rgba(26, 26, 26, 0.98);
	color: var(--mx-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mx-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.mx-toast.is-error {
	border-color: var(--mx-error);
}

body.mx-tray-open .mx-toast {
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.mx-toast {
		transition: none;
	}
}

/* ---------- Member report control (profile pages) ---------------------------
   Phase 7. Renders in place of the parent theme's report trigger, and only for
   a signed-in member on the CRM path. The panel is closed by default: it is a
   rare action, and an open form under every profile is noise.

   The panel's only red is the send button — on a profile page the fixed FAB
   already owns the viewport's commit action, so this control is deliberately
   inside a collapsed panel and never on screen at the same time as the FAB's
   Call button in an expanded state.
   -------------------------------------------------------------------------- */

.mx-report {
	--mx-surface: #1A1A1A;
	--mx-surface-subtle: #222222;
	--mx-border-subtle: #2E2E2E;
	--mx-border-default: #3A3A3A;
	--mx-ink: #ECECEC;
	--mx-muted: #B4B4B4;
	--mx-faint: #8A8A8A;
	--mx-gold: #E6C46A;
	--mx-error: #EF4444;
	--mx-primary: #8B0A1A;
	--mx-primary-active: #6E0816;
	--mx-radius-sm: 6px;
	--mx-radius-md: 10px;
	--mx-radius-lg: 14px;
	--mx-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
	display: block;
	font-family: var(--mx-font);
}

.profile-page .profile-report-zone .mx-report {
	display: grid !important;
	justify-items: center !important;
	width: 100% !important;
}

.mx-report *,
.mx-report *::before,
.mx-report *::after {
	box-sizing: border-box;
}

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

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

.profile-page .profile-report-zone .mx-report__open.mx-button {
	min-height: 42px !important;
	padding: 0 14px !important;
	border-color: rgba(236, 236, 236, 0.1) !important;
	background: transparent !important;
	color: rgba(236, 236, 236, 0.56) !important;
	font-size: 13px !important;
	font-weight: 650 !important;
}

.profile-page .profile-report-zone .mx-report__open.mx-button:hover {
	border-color: rgba(236, 236, 236, 0.2) !important;
	color: rgba(236, 236, 236, 0.76) !important;
}

.mx-report .mx-button svg {
	width: 20px;
	height: 20px;
}

/* `[hidden]` is a UA rule and loses to the class selector above, so the open
   trigger would stay on screen beside its own panel without this. */
.mx-report .mx-button[hidden] {
	display: none;
}

/* The send button is emphasised by weight and border, not by red.
   This control only ever renders on a profile page, where `#profile-fab`
   already owns the viewport's one commit action — the same rule that made the
   compare tray step down to neutral here in Phase 3. */
.mx-report .mx-button--commit {
	border-color: var(--mx-border-strong, #4A4A4A);
	background: var(--mx-surface-elevated);
	color: var(--mx-ink);
	font-weight: 700;
}

.mx-report .mx-button--commit:hover:not(:disabled) {
	border-color: var(--mx-ink);
}

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

.mx-report .mx-button:disabled {
	cursor: default;
	opacity: 0.72;
}

.mx-report__panel {
	display: grid;
	gap: 16px;
	max-width: 520px;
	margin-top: 12px;
	padding: 16px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface);
}

.mx-report__panel[hidden] {
	display: none;
}

.mx-report__lede {
	margin: 0;
	color: var(--mx-muted);
	font-size: 13px;
	line-height: 1.5;
}

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

.mx-report .mx-field label {
	color: var(--mx-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

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

.mx-report .mx-select,
.mx-report .mx-textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--mx-border-default);
	border-radius: var(--mx-radius-md);
	background: var(--mx-surface-subtle);
	color: var(--mx-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
}

.mx-report .mx-select {
	min-height: 44px;
	padding: 0 12px;
}

.mx-report .mx-textarea {
	resize: vertical;
}

.mx-report__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.mx-report__state {
	margin: 0;
	color: var(--mx-muted);
	font-size: 13px;
	line-height: 1.5;
}

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

/* Keep the panel's last control clear of the fixed profile contact bar. */
@media (max-width: 768px) {
	.mx-report__panel {
		margin-bottom: 88px;
	}
}

/* ---------- Recommended for You / Find my type -------------------------- */

.mx-find-type,
.mx-recommendations,
.mx-type-modal {
	--mx-surface: #1A1A1A;
	--mx-surface-subtle: #222222;
	--mx-surface-elevated: #2A2A2A;
	--mx-border-subtle: #2E2E2E;
	--mx-border-default: #3A3A3A;
	--mx-border-strong: #4A4A4A;
	--mx-ink: #ECECEC;
	--mx-muted: #B4B4B4;
	--mx-faint: #8A8A8A;
	--mx-primary: #8B0A1A;
	--mx-primary-active: #6E0816;
	--mx-radius-sm: 6px;
	--mx-radius-md: 10px;
	--mx-radius-lg: 14px;
	--mx-radius-hero: 26px;
	--mx-ease-sheet: 260ms cubic-bezier(0.22, 1, 0.36, 1);
	--mx-ease-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--mx-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
	font-family: var(--mx-font);
}

.mx-find-type *,
.mx-recommendations *,
.mx-type-modal * {
	box-sizing: border-box;
}

.mx-find-type {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	min-width: 176px;
	padding: 0 18px 0 12px;
	border: 1px solid rgba(236, 236, 236, 0.24);
	/*
	 * Matches `.mx-compare-toggle`, which it sits beside on the profile outro.
	 * At 14px radius, 15px type and weight 850 against that sibling's 10px, 14px
	 * and 600, the pair read as two different species of control rather than as
	 * two options of equal standing.
	 */
	border-radius: var(--mx-radius-md);
	background: linear-gradient(180deg, rgba(42, 42, 42, 0.94), rgba(26, 26, 26, 0.96));
	color: var(--mx-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition: transform var(--mx-ease-fast), background-color var(--mx-ease-fast), border-color var(--mx-ease-fast), box-shadow var(--mx-ease-fast);
}

.mx-find-type__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: rgba(139, 10, 26, 0.22);
	color: #F4D7DC;
	box-shadow: inset 0 0 0 1px rgba(244, 215, 220, 0.16);
}

.mx-find-type__mark .mx-icon {
	width: 17px;
	height: 17px;
	stroke-width: 1.8;
}

.mx-find-type__label {
	min-width: 0;
	white-space: nowrap;
}

.mx-find-type:hover {
	background: var(--mx-surface-elevated);
	border-color: rgba(236, 236, 236, 0.46);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.28);
	transform: translateY(-1px);
}

.mx-find-type:active {
	transform: translateY(0) scale(0.98);
}

.mx-find-type:focus-visible,
.mx-recommendations :is(a, button):focus-visible,
.mx-type-modal :is(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--focus-ring-color, #E6C46A);
	outline-offset: 3px;
}

.profile-outro__member .mx-find-type {
	background: linear-gradient(180deg, rgba(42, 42, 42, 0.98), rgba(26, 26, 26, 0.98));
}

.profile-outro__member {
	display: grid;
	grid-template-columns: minmax(132px, 0.82fr) minmax(186px, 1.18fr);
	gap: 8px;
	width: min(100%, 430px);
	margin-inline: auto;
}

.profile-outro__member .mx-compare-toggle,
.profile-outro__member .mx-find-type {
	width: 100%;
	min-width: 0;
}

.profile-outro__member .mx-compare-toggle {
	padding-inline: 14px;
}

.mx-recommendations {
	display: grid;
	gap: 16px;
	margin: 24px 0;
	color: var(--mx-ink);
}

.mx-recommendations__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.mx-recommendations__header h2 {
	margin: 0;
	color: var(--mx-ink);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: 0;
}

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

.mx-recommendations__reset {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mx-border-default);
	border-radius: var(--mx-radius-md);
	background: transparent;
	color: var(--mx-muted);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.mx-recommendations__rail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
}

.mx-recommendation-card {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-md);
	background: var(--mx-surface);
	transition: transform var(--mx-ease-sheet), border-color var(--mx-ease-fast);
}

.mx-recommendation-card:hover {
	border-color: var(--mx-border-strong);
	transform: translateY(-2px);
}

.mx-recommendation-card__image {
	display: block;
	aspect-ratio: 3 / 4;
	background: #101010;
}

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

.mx-recommendation-card__body {
	display: grid;
	gap: 6px;
	padding: 12px;
}

.mx-recommendation-card h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: 0;
}

.mx-recommendation-card h3 a {
	color: var(--mx-ink);
	text-decoration: none;
}

.mx-recommendation-card p {
	margin: 0;
	color: var(--mx-muted);
	font-size: 13px;
	line-height: 1.4;
}

.mx-recommendation-card ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.mx-recommendation-card li {
	padding: 4px 7px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-sm);
	color: var(--mx-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.mx-type-modal[hidden],
.mx-type-loader[hidden],
.mx-type-deck[hidden],
.mx-type-state[hidden],
.mx-type-reset-panel[hidden],
.mx-type-signup[hidden],
.mx-type-progress[hidden],
.mx-type-modal__feedback[hidden],
.mx-type-modal__actions[hidden] {
	display: none !important;
}

.mx-type-modal {
	position: fixed;
	inset: 0;
	z-index: 11020;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: var(--mx-ink);
}

.mx-type-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.68);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--mx-ease-fast);
}

.mx-type-modal.is-open .mx-type-modal__backdrop {
	opacity: 1;
}

.mx-type-modal__dialog {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(22px, auto) auto minmax(0, 1fr) auto;
	gap: 16px;
	width: min(94vw, 920px);
	max-height: min(88vh, 760px);
	padding: 24px;
	border: 1px solid var(--mx-border-default);
	border-radius: var(--mx-radius-hero);
	background: var(--mx-surface);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.56);
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: transform var(--mx-ease-sheet), opacity var(--mx-ease-fast);
}

.mx-type-modal.is-open .mx-type-modal__dialog {
	opacity: 1;
	transform: none;
}

/*
 * Pin every row explicitly. Panels inside the dialog are toggled with [hidden],
 * and without this a collapsed row would slide the flexible stage track onto a
 * different child — which is how the action dock ended up off screen.
 */
.mx-type-modal__header {
	grid-row: 1;
}

.mx-type-modal__status {
	grid-row: 2;
}

.mx-type-progress {
	grid-row: 3;
}

.mx-type-modal__stage {
	grid-row: 4;
}

.mx-type-modal__actions {
	grid-row: 5;
}

.mx-type-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.mx-type-modal__eyebrow {
	margin: 0 0 6px;
	color: var(--mx-faint);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0;
}

.mx-type-modal__header h2 {
	margin: 0;
	color: var(--mx-ink);
	font-size: 28px;
	font-weight: 850;
	line-height: 1.08;
	letter-spacing: 0;
}

.mx-type-modal__close {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--mx-radius-md);
	background: transparent;
	color: var(--mx-muted);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: color var(--mx-ease-fast), background-color var(--mx-ease-fast), transform var(--mx-ease-fast);
}

.mx-type-modal__close:hover {
	background: var(--mx-surface-subtle);
	color: var(--mx-ink);
}

.mx-type-modal__close:active {
	transform: scale(0.96);
}

.mx-type-modal__status {
	min-height: 22px;
	max-width: 65ch;
	color: var(--mx-muted);
	font-size: 14px;
	line-height: 1.5;
}

.mx-type-modal__status.is-error {
	color: var(--mx-ink);
}

.mx-type-modal__feedback {
	position: absolute;
	left: 50%;
	bottom: 88px;
	z-index: 4;
	max-width: calc(100% - 48px);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid rgba(236, 236, 236, 0.14);
	border-radius: 999px;
	background: rgba(18, 18, 18, 0.86);
	backdrop-filter: blur(10px);
	color: var(--mx-muted);
	font-size: 11px;
	font-weight: 750;
	line-height: 1.2;
	text-align: center;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
	transform: translate(-50%, 6px);
	opacity: 0;
	animation: mx-type-feedback-in 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	pointer-events: none;
}

.mx-type-modal__feedback::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: currentColor;
	box-shadow: 0 0 0 4px rgba(236, 236, 236, 0.08);
}

/* Only the dot carries the colour; the chip itself stays quiet. */
.mx-type-modal.is-feedback-like .mx-type-modal__feedback::before {
	color: #E4566E;
}

.mx-type-modal.is-feedback-not-my-type .mx-type-modal__feedback::before {
	color: #EFB4BE;
}

.mx-type-modal.is-feedback-more-like-this .mx-type-modal__feedback::before {
	color: #E6C46A;
}

/* -------------------------------------------------------------- progress rail */

.mx-type-progress {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.mx-type-progress__bar {
	position: relative;
	display: block;
	overflow: hidden;
	height: 4px;
	border-radius: 999px;
	background: rgba(236, 236, 236, 0.12);
}

.mx-type-progress__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--mx-primary), #C0304A);
	transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mx-type-progress__label {
	color: var(--mx-faint);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/*
 * The stage is a single-cell grid and every panel shares that cell. Nothing
 * inside a card can grow the frame, so the action dock below it never moves
 * and never gets pushed off screen by a tall image.
 */
.mx-type-modal__stage {
	position: relative;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: minmax(0, 1fr);
	min-height: 420px;
	overflow: hidden;
}

.mx-type-modal__stage > * {
	grid-area: 1 / 1;
	min-width: 0;
	min-height: 0;
}

.mx-type-deck {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.mx-type-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(240px, 0.82fr);
	gap: 16px;
	min-height: 420px;
}

.mx-type-feature,
.mx-type-queue {
	min-width: 0;
}

.mx-type-card {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: #101010;
	color: var(--mx-ink);
	overflow: hidden;
	text-align: left;
	text-decoration: none;
}

.mx-type-card__media,
.mx-type-card__scrim,
.mx-type-card__body {
	display: block;
}

.mx-type-card__media {
	position: relative;
	background: #101010;
}

.mx-type-card__fill {
	display: none;
}

.mx-type-card__image,
.mx-type-card__fill img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mx-type-card__scrim {
	position: absolute;
	inset: auto 0 0;
	height: 58%;
	background: linear-gradient(180deg, rgba(16, 16, 16, 0), rgba(16, 16, 16, 0.92));
	pointer-events: none;
}

.mx-type-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 16px;
}

.mx-type-card__name {
	display: block;
	color: var(--mx-ink);
	font-size: 24px;
	font-weight: 850;
	line-height: 1.08;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

.mx-type-card__location {
	display: block;
	margin-top: 5px;
	color: var(--mx-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.mx-type-card__reasons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.mx-type-card__reasons span {
	max-width: 100%;
	padding: 5px 8px;
	border: 1px solid rgba(236, 236, 236, 0.22);
	border-radius: var(--mx-radius-sm);
	background: rgba(16, 16, 16, 0.62);
	color: var(--mx-ink);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

.mx-type-card__profile-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin-top: 14px;
	padding: 0 12px;
	border: 1px solid rgba(236, 236, 236, 0.26);
	border-radius: var(--mx-radius-md);
	background: rgba(34, 34, 34, 0.82);
	color: var(--mx-ink);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	backdrop-filter: blur(6px);
}

.mx-type-card--active {
	height: 420px;
	opacity: 1;
	transform: none;
	transition: transform var(--mx-ease-sheet), opacity var(--mx-ease-fast), border-color var(--mx-ease-fast);
}

.mx-type-card--active .mx-type-card__media {
	height: 100%;
}

.mx-type-modal.is-rating .mx-type-card--active {
	opacity: 0;
	transform: translate3d(-18px, 0, 0) scale(0.985);
}

.mx-type-modal.is-liked .mx-type-card--active {
	border-color: rgba(139, 10, 26, 0.88);
	box-shadow: 0 0 0 1px rgba(139, 10, 26, 0.42);
}

.mx-type-queue {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 10px;
}

.mx-type-queue__label {
	color: var(--mx-faint);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0;
}

.mx-type-queue__items {
	display: grid;
	align-content: start;
	gap: 8px;
	overflow: auto;
	padding-right: 2px;
}

.mx-type-card--queue {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 10px;
	min-height: 82px;
	border-color: var(--mx-border-subtle);
	cursor: pointer;
	transition: transform var(--mx-ease-fast), background-color var(--mx-ease-fast), border-color var(--mx-ease-fast);
}

.mx-type-card--queue:hover {
	background: var(--mx-surface-subtle);
	border-color: var(--mx-border-strong);
	transform: translateX(2px);
}

.mx-type-card--queue .mx-type-card__media {
	width: 64px;
	height: 82px;
}

.mx-type-card--queue .mx-type-card__scrim {
	display: none;
}

.mx-type-card--queue .mx-type-card__body {
	position: static;
	align-self: center;
	padding: 10px 10px 10px 0;
}

.mx-type-card--queue .mx-type-card__name {
	font-size: 14px;
	line-height: 1.2;
}

.mx-type-card--queue .mx-type-card__location {
	margin-top: 4px;
	font-size: 12px;
}

.mx-type-card--queue .mx-type-card__reasons {
	margin-top: 7px;
}

.mx-type-card--queue .mx-type-card__reasons span {
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
}

.mx-type-modal__actions {
	display: grid;
	grid-template-columns: 0.9fr 0.8fr 1.15fr 1fr;
	gap: 8px;
}

.mx-type-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	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: 14px;
	font-weight: 800;
	line-height: 1.1;
	cursor: pointer;
	transition: transform var(--mx-ease-fast), background-color var(--mx-ease-fast), border-color var(--mx-ease-fast), opacity var(--mx-ease-fast);
}

.mx-type-action__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.mx-type-action__icon .mx-icon {
	width: 18px;
	height: 18px;
	stroke-width: 1.8;
}

.mx-type-action:hover:not(:disabled) {
	background: var(--mx-surface-elevated);
	border-color: var(--mx-border-strong);
	transform: translateY(-1px);
}

.mx-type-action:active:not(:disabled) {
	transform: scale(0.98);
}

.mx-type-action:disabled {
	cursor: default;
	opacity: 0.58;
}

.mx-type-action--primary {
	border-color: var(--mx-primary);
	background: var(--mx-primary);
	color: var(--mx-ink);
	box-shadow: 0 8px 22px rgba(139, 10, 26, 0.28);
}

.mx-type-action--primary:hover:not(:disabled) {
	background: var(--mx-primary-active);
	border-color: var(--mx-primary-active);
}

.mx-type-modal.is-liked .mx-type-action--primary {
	animation: mx-type-like-pop 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mx-type-modal.is-feedback-like .mx-type-action--like,
.mx-type-modal.is-feedback-skip .mx-type-action--skip,
.mx-type-modal.is-feedback-not-my-type .mx-type-action--nope,
.mx-type-modal.is-feedback-more-like-this .mx-type-action--more {
	border-color: rgba(236, 236, 236, 0.62);
	transform: scale(1.035);
}

.mx-type-action--quiet {
	background: transparent;
	color: var(--mx-muted);
}

.mx-type-loader {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(180px, 0.44fr);
	align-items: stretch;
	gap: 14px;
	min-height: 420px;
}

.mx-type-loader__loop {
	position: relative;
	min-height: 420px;
	overflow: hidden;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: radial-gradient(circle at 50% 20%, rgba(139, 10, 26, 0.16), transparent 34%), #101010;
}

.mx-type-loader__loop::before,
.mx-type-loader__loop::after {
	content: "";
	position: absolute;
	inset: 74px;
	border: 1px solid rgba(236, 236, 236, 0.1);
	border-radius: 999px;
}

.mx-type-loader__loop::after {
	inset: 118px;
	border-color: rgba(139, 10, 26, 0.22);
}

.mx-type-loader__core {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 142px;
	height: 142px;
	border: 1px solid rgba(236, 236, 236, 0.16);
	border-radius: 999px;
	background: rgba(26, 26, 26, 0.88);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
	transform: translate(-50%, -50%);
}

.mx-type-loader__core span,
.mx-type-loader__core strong {
	display: block;
}

.mx-type-loader__core span {
	align-self: end;
	color: var(--mx-faint);
	font-size: 10px;
	font-weight: 850;
	line-height: 1;
	text-transform: uppercase;
}

.mx-type-loader__core strong {
	align-self: start;
	margin-top: 7px;
	max-width: 92px;
	color: var(--mx-ink);
	font-size: 17px;
	font-weight: 850;
	line-height: 1.05;
	text-align: center;
}

.mx-type-loader__core em {
	position: absolute;
	bottom: 28px;
	display: flex;
	gap: 4px;
	width: 28px;
	height: 6px;
}

.mx-type-loader__core em::before,
.mx-type-loader__core em::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(236, 236, 236, 0.76);
	animation: mx-type-dot 900ms ease-in-out infinite;
}

.mx-type-loader__core em::after {
	animation-delay: 180ms;
}

.mx-type-loader__profile {
	--mx-loader-orbit: 150px;
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 90px;
	height: 90px;
	border: 1px solid rgba(236, 236, 236, 0.12);
	border-radius: 999px;
	background: linear-gradient(110deg, #151515 8%, #242424 20%, #151515 34%);
	background-size: 220% 100%;
	box-shadow: 0 18px 32px rgba(0, 0, 0, 0.34);
	overflow: hidden;
	transform: translate(-50%, -50%) rotate(var(--mx-loader-angle, 0deg)) translateX(var(--mx-loader-orbit)) rotate(var(--mx-loader-angle-inverse, 0deg));
	animation: mx-type-orbit 5s linear infinite, mx-type-loader-pop 1.6s ease-in-out infinite;
}

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

.mx-type-loader__profile--1 {
	--mx-loader-angle: -90deg;
	--mx-loader-angle-inverse: 90deg;
	--mx-loader-angle-end: 270deg;
	--mx-loader-angle-end-inverse: -270deg;
}

.mx-type-loader__profile--2 {
	--mx-loader-angle: 0deg;
	--mx-loader-angle-inverse: 0deg;
	--mx-loader-angle-end: 360deg;
	--mx-loader-angle-end-inverse: -360deg;
	animation-delay: -1.25s, 180ms;
}

.mx-type-loader__profile--3 {
	--mx-loader-angle: 90deg;
	--mx-loader-angle-inverse: -90deg;
	--mx-loader-angle-end: 450deg;
	--mx-loader-angle-end-inverse: -450deg;
	animation-delay: -2.5s, 360ms;
}

.mx-type-loader__profile--4 {
	--mx-loader-angle: 180deg;
	--mx-loader-angle-inverse: -180deg;
	--mx-loader-angle-end: 540deg;
	--mx-loader-angle-end-inverse: -540deg;
	animation-delay: -3.75s, 540ms;
}

.mx-type-loader__scan {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 210px;
	height: 210px;
	border-radius: 999px;
	border: 1px solid rgba(236, 236, 236, 0.16);
	border-top-color: rgba(236, 236, 236, 0.72);
	opacity: 0.75;
	transform: translate(-50%, -50%);
	animation: mx-type-scan 1.4s linear infinite;
}

.mx-type-loader__caption {
	display: grid;
	align-content: start;
	gap: 10px;
	padding-top: 6px;
}

.mx-type-loader__caption span {
	display: block;
	height: 82px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background:
		radial-gradient(circle at 24px 50%, rgba(236, 236, 236, 0.22) 0 13px, transparent 14px),
		linear-gradient(90deg, rgba(236, 236, 236, 0.08), transparent 56%),
		#151515;
	opacity: 0.75;
	animation: mx-type-caption-pulse 1.6s ease-in-out infinite;
}

.mx-type-loader__caption span:nth-child(2) {
	animation-delay: 180ms;
}

.mx-type-loader__caption span:nth-child(3) {
	animation-delay: 360ms;
}

.mx-type-state,
.mx-type-reset-panel {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 12px;
	min-height: 420px;
	padding: 32px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background: var(--mx-surface-subtle);
}

.mx-type-state strong,
.mx-type-reset-panel strong {
	color: var(--mx-ink);
	font-size: 22px;
	font-weight: 850;
	line-height: 1.16;
	letter-spacing: 0;
}

.mx-type-state p,
.mx-type-reset-panel p {
	max-width: 46ch;
	margin: 0;
	color: var(--mx-muted);
	font-size: 15px;
	line-height: 1.55;
}

.mx-type-state__actions,
.mx-type-reset-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.mx-type-state__actions button,
.mx-type-reset-panel__actions button {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mx-border-default);
	border-radius: var(--mx-radius-md);
	background: var(--mx-surface-elevated);
	color: var(--mx-ink);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.mx-type-reset-panel__actions [data-mx-type-reset-confirm] {
	border-color: var(--mx-primary);
	background: var(--mx-primary);
}

/* --------------------------------------------------- end-of-set signup prompt */

.mx-type-signup {
	--mx-signup-pad: 32px;

	display: grid;
	/* Start, not center: the rail is a header band and must sit flush. */
	align-content: start;
	justify-items: start;
	gap: 10px;
	min-height: 420px;
	padding: var(--mx-signup-pad);
	border: 1px solid var(--mx-border-subtle);
	border-radius: var(--mx-radius-lg);
	background:
		radial-gradient(circle at 8% 0%, rgba(139, 10, 26, 0.24), transparent 56%),
		var(--mx-surface-subtle);
	overflow: hidden auto;
}

/* ---------- the profile rail ----------
   Same argument as the member gate, but made personal: once the visitor has
   liked anything, these are the faces they chose. It is never a control — no
   hover, no pointer, no tab stop. */

.mx-type-signup__faces {
	position: relative;
	justify-self: stretch;
	/* Pulled out of the panel padding so it reads as a header band, not a strip
	   floating inside the copy. */
	margin:
		calc(var(--mx-signup-pad) * -1)
		calc(var(--mx-signup-pad) * -1)
		6px;
	padding: 18px 0 16px;
	border-radius: var(--mx-radius-lg) var(--mx-radius-lg) 0 0;
	background: linear-gradient(180deg, rgba(139, 10, 26, 0.22), transparent);
	overflow: hidden;
	/* Fades at both ends so the loop has no visible entry or exit. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	pointer-events: none;
}

.mx-type-signup__faces-track {
	display: flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	/* Two identical passes, so -50% lands on a seamless wrap. */
	animation: mx-type-face-drift 38s linear infinite;
}

.mx-type-signup__face {
	flex: 0 0 auto;
	display: block;
	overflow: hidden;
	width: 48px;
	height: 48px;
	border: 1px solid var(--mx-border-subtle);
	border-radius: 999px;
	background: var(--mx-surface-elevated);
}

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

/* Their own picks get a warmer ring than the house pool. */
.mx-type-signup__faces.is-picks .mx-type-signup__face {
	border-color: rgba(196, 62, 86, 0.55);
	box-shadow: 0 0 0 2px rgba(139, 10, 26, 0.22);
}

/* Too few to loop convincingly: hold them still, centred, and larger. */
.mx-type-signup__faces.is-static {
	-webkit-mask-image: none;
	mask-image: none;
}

.mx-type-signup__faces.is-static .mx-type-signup__faces-track {
	width: auto;
	justify-content: center;
	gap: 10px;
	animation: none;
}

.mx-type-signup__faces.is-static .mx-type-signup__face {
	width: 62px;
	height: 62px;
}

@keyframes mx-type-face-drift {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.mx-type-signup__eyebrow {
	color: var(--mx-faint);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0;
}

.mx-type-signup strong {
	color: var(--mx-ink);
	font-size: 26px;
	font-weight: 850;
	line-height: 1.12;
	letter-spacing: 0;
}

.mx-type-signup p {
	max-width: 42ch;
	margin: 0;
	color: var(--mx-muted);
	font-size: 15px;
	line-height: 1.55;
}

.mx-type-signup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.mx-type-signup__primary,
.mx-type-signup__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid var(--mx-border-default);
	border-radius: var(--mx-radius-md);
	background: var(--mx-surface-elevated);
	color: var(--mx-ink);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}

.mx-type-signup__primary {
	border-color: var(--mx-primary);
	background: var(--mx-primary);
	box-shadow: 0 8px 22px rgba(139, 10, 26, 0.28);
}

.mx-type-signup__quiet {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 2px;
}

.mx-type-signup__quiet button {
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mx-muted);
	font-size: 13px;
	font-weight: 750;
	line-height: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mx-type-signup__quiet button:hover {
	color: var(--mx-ink);
}

.mx-type-signup small {
	color: var(--mx-faint);
	font-size: 12px;
	line-height: 1.45;
}

/* No thumbnails to orbit: show the core alone rather than grey placeholders. */
.mx-type-loader__loop.is-bare::before,
.mx-type-loader__loop.is-bare::after {
	opacity: 0.45;
}

body.mx-type-modal-open {
	overflow: hidden;
}

body.mx-type-modal-open #profile-fab,
body.mx-type-modal-open .mx-tray {
	opacity: 0;
	pointer-events: none;
}

@keyframes mx-type-shimmer {
	to {
		background-position-x: -220%;
	}
}

@keyframes mx-type-scan {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes mx-type-orbit {
	to {
		transform: translate(-50%, -50%) rotate(var(--mx-loader-angle-end, 360deg)) translateX(var(--mx-loader-orbit)) rotate(var(--mx-loader-angle-end-inverse, -360deg));
	}
}

@keyframes mx-type-loader-pop {
	50% {
		box-shadow: 0 18px 32px rgba(0, 0, 0, 0.34), 0 0 0 5px rgba(139, 10, 26, 0.12);
	}
}

@keyframes mx-type-dot {
	50% {
		opacity: 0.35;
		transform: translateY(2px);
	}
}

@keyframes mx-type-caption-pulse {
	50% {
		opacity: 0.42;
	}
}

@keyframes mx-type-like-pop {
	50% {
		transform: scale(1.025);
	}
}

@keyframes mx-type-feedback-in {
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

@media (max-width: 640px) {
	.profile-outro__member {
		grid-template-columns: minmax(108px, 0.72fr) minmax(164px, 1.28fr);
		width: min(100%, 390px);
	}

	.profile-outro__member .mx-compare-toggle,
	.profile-outro__member .mx-find-type {
		min-height: 52px;
	}

	.profile-outro__member .mx-compare-toggle {
		gap: 7px;
		padding-inline: 10px;
		font-size: 14px;
	}

	.profile-outro__member .mx-find-type {
		padding-inline: 10px 14px;
		font-size: 14px;
	}

	.mx-find-type__mark {
		width: 28px;
		height: 28px;
	}

	.mx-recommendations__header {
		align-items: flex-start;
		flex-direction: column;
	}

	.mx-recommendations__header h2 {
		font-size: 24px;
	}

	.mx-recommendations__rail {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
	}

	.mx-recommendation-card {
		flex: 0 0 72vw;
		scroll-snap-align: start;
	}

	.mx-type-modal {
		align-items: flex-end;
		padding: 0;
	}

	/*
	 * The drawer is a fixed-height sheet with fixed chrome and one flexible
	 * slot in the middle. Header, progress rail and action dock are constant
	 * rows, so the dock sits in the same place on every card regardless of
	 * what the photo behind it happens to be.
	 */
	.mx-type-modal__dialog {
		--mx-type-dock: 84px;

		display: grid;
		grid-template-rows: auto auto auto minmax(0, 1fr) var(--mx-type-dock);
		width: 100%;
		height: 85vh;
		height: 85svh;
		max-height: 85svh;
		gap: 10px;
		padding: 14px 14px calc(6px + env(safe-area-inset-bottom, 0px));
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: var(--mx-radius-hero) var(--mx-radius-hero) 0 0;
		transform: translateY(18px);
	}

	/* Panel states have their own buttons, so the dock track gives back its room. */
	.mx-type-modal.is-empty .mx-type-modal__dialog,
	.mx-type-modal.is-error .mx-type-modal__dialog,
	.mx-type-modal.is-resetting .mx-type-modal__dialog,
	.mx-type-modal.is-signup .mx-type-modal__dialog {
		--mx-type-dock: 0px;
	}

	.mx-type-modal__header {
		align-items: center;
		gap: 12px;
	}

	.mx-type-modal__eyebrow {
		margin-bottom: 4px;
		font-size: 10px;
	}

	.mx-type-modal__header h2 {
		font-size: 23px;
		line-height: 1.06;
	}

	.mx-type-modal__close {
		width: 38px;
		height: 38px;
		font-size: 24px;
	}

	.mx-type-modal__status {
		min-height: 0;
		font-size: 14px;
		line-height: 1.45;
	}

	/* Once cards are on screen the rail is the status; the sentence is noise. */
	.mx-type-modal.is-ready .mx-type-modal__status,
	.mx-type-modal.is-rating .mx-type-modal__status,
	.mx-type-modal.is-liked .mx-type-modal__status {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
		padding: 0;
	}

	.mx-type-progress {
		gap: 10px;
	}

	.mx-type-progress__bar {
		height: 3px;
	}

	.mx-type-modal__feedback {
		bottom: calc(var(--mx-type-dock, 84px) + 14px + env(safe-area-inset-bottom, 0px));
		max-width: calc(100% - 40px);
	}

	.mx-type-modal__stage {
		min-height: 0;
		overflow: hidden;
	}

	.mx-type-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		gap: 0;
		min-height: 0;
	}

	.mx-type-feature {
		position: relative;
		min-height: 0;
	}

	/*
	 * Bounded media slot. The card fills the slot absolutely, so its intrinsic
	 * image size can never feed back into the sheet's row sizing.
	 */
	.mx-type-card--active {
		position: absolute;
		inset: 0;
		height: auto;
		aspect-ratio: auto;
		border-radius: 20px;
	}

	.mx-type-card--active .mx-type-card__media {
		position: absolute;
		inset: 0;
		height: auto;
		background: #121212;
	}

	.mx-type-card--active .mx-type-card__fill {
		display: none;
	}

	.mx-type-card--active .mx-type-card__image {
		position: absolute;
		inset: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 22%;
	}

	.mx-type-card__scrim {
		height: 52%;
	}

	.mx-type-card__body {
		z-index: 2;
		padding: 14px;
	}

	.mx-type-card__name {
		font-size: 22px;
	}

	.mx-type-card__reasons {
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		gap: 6px;
		margin-top: 9px;
	}

	.mx-type-card__profile-link {
		min-height: 42px;
		margin-top: 12px;
		padding-inline: 14px;
	}

	.mx-type-queue {
		display: none;
	}

	.mx-type-loader {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		gap: 0;
		min-height: 0;
	}

	.mx-type-loader__loop {
		min-height: 0;
		border-radius: 20px;
	}

	.mx-type-loader__profile,
	.mx-type-loader__scan {
		border-radius: 999px;
	}

	.mx-type-loader__loop::before {
		inset: 52px;
	}

	.mx-type-loader__loop::after {
		inset: 96px;
	}

	.mx-type-loader__core {
		width: 126px;
		height: 126px;
	}

	.mx-type-loader__core strong {
		font-size: 15px;
	}

	.mx-type-loader__profile {
		--mx-loader-orbit: min(31vw, 126px);
		width: 74px;
		height: 74px;
	}

	.mx-type-loader__scan {
		width: 184px;
		height: 184px;
	}

	.mx-type-loader__caption {
		display: none;
	}

	/* Fixed dock: same height, same place, on every card and in every state. */
	.mx-type-modal__actions {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		height: var(--mx-type-dock);
		min-height: 0;
		padding: 0;
	}

	.mx-type-action {
		width: 52px;
		min-width: 52px;
		height: 52px;
		min-height: 52px;
		padding: 0;
		border-radius: 999px;
		background: rgba(34, 34, 34, 0.96);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
	}

	.mx-type-action__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
		padding: 0;
	}

	.mx-type-action__icon .mx-icon {
		width: 24px;
		height: 24px;
		stroke-width: 1.9;
	}

	.mx-type-action--like {
		width: 64px;
		min-width: 64px;
		height: 64px;
		min-height: 64px;
		border-color: var(--mx-primary);
		background: var(--mx-primary);
		color: #F7ECEF;
	}

	.mx-type-action--more {
		color: #E6C46A;
	}

	.mx-type-action--nope {
		color: #EFB4BE;
	}

	.mx-type-action:hover:not(:disabled) {
		transform: translateY(-2px);
	}

	.mx-type-action:active:not(:disabled) {
		transform: scale(0.94);
	}

	.mx-type-state,
	.mx-type-reset-panel,
	.mx-type-signup {
		min-height: 0;
		padding: 22px;
		overflow: hidden auto;
	}

	.mx-type-signup {
		--mx-signup-pad: 22px;

		align-content: start;
		gap: 9px;
	}

	.mx-type-signup__faces {
		padding: 16px 0 14px;
	}

	.mx-type-signup__face {
		width: 44px;
		height: 44px;
	}

	.mx-type-signup__faces.is-static .mx-type-signup__face {
		width: 58px;
		height: 58px;
	}

	.mx-type-signup strong {
		font-size: 23px;
	}

	.mx-type-signup p {
		font-size: 14px;
	}

	.mx-type-signup__actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mx-find-type,
	.mx-recommendation-card,
	.mx-type-modal__backdrop,
	.mx-type-modal__dialog,
	.mx-type-modal__feedback,
	.mx-type-progress__fill,
	.mx-type-card,
	.mx-type-action {
		transition-duration: 0.01ms !important;
		transform: none !important;
	}

	.mx-type-loader__profile,
	.mx-type-loader__scan,
	.mx-type-loader__caption span,
	.mx-type-modal__feedback,
	.mx-type-signup__faces-track,
	.mx-type-modal.is-liked .mx-type-action--primary {
		animation: none !important;
	}
}