/**
 * MFC Dinner Finder — front-end styles.
 *
 * Guided three-step dinner builder with a live result. Bold, app-like visual
 * language (MacroFactor / Whoop energy) built entirely on the theme's --mfc-*
 * design tokens with literal fallbacks, so it still renders sensibly if the
 * stylesheet ever loads without the Matt's Fit Chef theme. No hard-coded brand
 * hex without a token in front of it.
 *
 * Layout: two columns on desktop (sticky steps rail + live result). On mobile
 * the result becomes a sticky bottom bar that expands into a bottom sheet, so
 * the payoff is never scrolled off-screen while tapping.
 *
 * Progressive enhancement: the staged/search/grouped UI is gated behind the
 * `.mfc-df--js` class that dinner-finder.js adds on boot. Without JS the steps
 * render open and the fridge chips render as one flat, selectable pool.
 */

.mfc-df {
	--df-gap: var(--mfc-space-6, 1.5rem);
	--df-radius: var(--mfc-radius-lg, 16px);
	--df-radius-sm: var(--mfc-radius-md, 10px);
	--df-pill: var(--mfc-radius-full, 9999px);

	--df-accent: var(--mfc-electric, #7AAF87);
	--df-accent-dark: var(--mfc-electric-dark, #5A9068);
	--df-accent-surface: var(--mfc-electric-surface, #E4F0E7);

	--df-surface: var(--mfc-bg, #FAF8F5);
	--df-surface-2: var(--mfc-bg-secondary, #F2EDE6);
	--df-surface-3: var(--mfc-bg-tertiary, #EDE9E3);
	--df-border: var(--mfc-border, #D5E8D8);
	--df-border-strong: var(--mfc-border-strong, #B5D4BC);
	--df-text: var(--mfc-text, #1C2B1E);
	--df-text-2: var(--mfc-text-secondary, #4A6B52);
	--df-text-3: var(--mfc-text-tertiary, #6B9E78);

	--df-shadow-sm: 0 1px 2px rgba(28, 43, 30, 0.05), 0 2px 8px rgba(28, 43, 30, 0.05);
	--df-shadow-md: 0 8px 26px rgba(28, 43, 30, 0.10);
	--df-shadow-lg: 0 20px 54px rgba(28, 43, 30, 0.18);
	--df-tr: var(--mfc-transition, 180ms cubic-bezier(0.4, 0, 0.2, 1));

	/* Sticky offset so the steps rail clears the theme's 64px sticky header. */
	--df-header-offset: var(--mfc-header-height, 64px);
	/* Reserved space for the Raptive fixed bottom-anchor ad on mobile. JS sets
	   --mfc-df-anchor-offset to the measured anchor height; falls back to 0 so the
	   tool renders correctly with no ad (e.g. on staging). */
	--df-anchor-offset: var(--mfc-df-anchor-offset, 0px);

	max-width: var(--mfc-wide-width, 1160px);
	margin-inline: auto;
	color: var(--df-text);
	font-family: var(--mfc-font, 'DM Sans', system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}

.mfc-df *,
.mfc-df *::before,
.mfc-df *::after { box-sizing: border-box; }

/* The `hidden` attribute is toggled by JS on elements that also carry a
   `display` from their class (reset, popular block, …). Ensure the attribute
   always wins so those elements actually hide. */
.mfc-df [hidden] { display: none !important; }

/* ─── Progress header ───────────────────────────────────────────────────────── */

.mfc-df__progress { display: none; }
.mfc-df--js .mfc-df__progress {
	display: block;
	margin-bottom: var(--df-gap);
}

.mfc-df__progress-steps {
	display: flex;
	gap: var(--mfc-space-2, 0.5rem);
	margin-bottom: var(--mfc-space-3, 0.75rem);
}

.mfc-df__progress-step {
	flex: 1 1 0;
	position: relative;
	padding-left: 1.65rem;
	font-size: var(--mfc-text-sm, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--df-text-3);
	white-space: nowrap;
	transition: color var(--df-tr);
}
.mfc-df__progress-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	border: 2px solid var(--df-border-strong);
	background: var(--df-surface);
	transition: background var(--df-tr), border-color var(--df-tr);
}
.mfc-df__progress-step.is-active { color: var(--df-text); }
.mfc-df__progress-step.is-active::before {
	border-color: var(--df-accent);
	box-shadow: 0 0 0 4px var(--df-accent-surface);
}
.mfc-df__progress-step.is-done { color: var(--df-text-2); }
.mfc-df__progress-step.is-done::before {
	background: var(--df-accent);
	border-color: var(--df-accent);
	/* Check mark drawn with a conic-free inline mask-safe glyph via box-shadow. */
}
.mfc-df__progress-step.is-done::after {
	content: "";
	position: absolute;
	left: 0.34rem;
	top: 50%;
	width: 0.28rem;
	height: 0.52rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translateY(-60%) rotate(45deg);
}

.mfc-df__progress-track {
	height: 8px;
	border-radius: var(--df-pill);
	background: var(--df-surface-3);
	overflow: hidden;
}
.mfc-df__progress-fill {
	display: block;
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--df-accent), var(--df-accent-dark));
	transition: width 420ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ─── Main layout ───────────────────────────────────────────────────────────── */

.mfc-df__main { display: block; }

@media (min-width: 900px) {
	.mfc-df__main {
		display: grid;
		grid-template-columns: minmax(320px, 5fr) 7fr;
		gap: var(--df-gap);
		align-items: start;
	}
	.mfc-df__steps {
		position: sticky;
		top: calc(var(--df-header-offset) + var(--mfc-space-6, 1.5rem));
	}
}

/* ─── Steps (accordion) ─────────────────────────────────────────────────────── */

.mfc-df-step {
	background: var(--df-surface);
	border: 1.5px solid var(--df-border);
	border-radius: var(--df-radius);
	margin-bottom: var(--mfc-space-3, 0.75rem);
	overflow: hidden;
	transition: border-color var(--df-tr), box-shadow var(--df-tr);
}
.mfc-df-step.is-open {
	border-color: var(--df-border-strong);
	box-shadow: var(--df-shadow-sm);
}
.mfc-df-step.is-done:not(.is-open) { background: var(--df-surface-2); }

.mfc-df-step__head {
	display: flex;
	align-items: center;
	gap: var(--mfc-space-3, 0.75rem);
	width: 100%;
	padding: var(--mfc-space-4, 1rem) var(--mfc-space-5, 1.25rem);
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
	color: inherit;
	cursor: default;
}
.mfc-df--js .mfc-df-step__head { cursor: pointer; }

.mfc-df-step__index {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	background: var(--df-surface-3);
	color: var(--df-text-2);
	font-size: var(--mfc-text-sm, 0.875rem);
	font-weight: 800;
	transition: background var(--df-tr), color var(--df-tr);
}
.mfc-df-step.is-open .mfc-df-step__index {
	background: var(--df-accent);
	color: #fff;
}
.mfc-df-step.is-done .mfc-df-step__index {
	background: var(--df-accent-surface);
	color: var(--df-accent-dark);
	font-size: 0; /* Swap the digit for a check on completed steps. */
}
.mfc-df-step.is-done .mfc-df-step__index::after {
	content: "";
	width: 0.34rem;
	height: 0.62rem;
	border: solid var(--df-accent-dark);
	border-width: 0 2.5px 2.5px 0;
	transform: translateY(-10%) rotate(45deg);
}

.mfc-df-step__heading {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.mfc-df-step__title {
	font-size: var(--mfc-text-lg, 1.125rem);
	font-weight: 700;
	line-height: 1.2;
}
.mfc-df-step.is-done:not(.is-open) .mfc-df-step__title {
	font-size: var(--mfc-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--df-text-2);
}
.mfc-df-step__value {
	font-size: var(--mfc-text-base, 1rem);
	font-weight: 700;
	color: var(--df-accent-dark);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mfc-df-step__edit,
.mfc-df-step__optional {
	display: none;
	flex: none;
	font-size: var(--mfc-text-xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--df-text-3);
}
.mfc-df--js .mfc-df-step.is-done:not(.is-open) .mfc-df-step__edit { display: inline; }
.mfc-df--js .mfc-df-step[data-mfc-df-step="fridge"] .mfc-df-step__optional { display: inline; }
.mfc-df--js .mfc-df-step.is-done .mfc-df-step__optional { display: none; }

.mfc-df-step__chev {
	display: none;
	flex: none;
	color: var(--df-text-3);
	transition: transform var(--df-tr);
}
.mfc-df--js .mfc-df-step__chev { display: inline-flex; }
.mfc-df-step.is-open .mfc-df-step__chev { transform: rotate(180deg); }

.mfc-df-step__body {
	padding: 0 var(--mfc-space-5, 1.25rem) var(--mfc-space-5, 1.25rem);
}
.mfc-df--js .mfc-df-step:not(.is-open) .mfc-df-step__body { display: none; }

/* ─── Chips ─────────────────────────────────────────────────────────────────── */

.mfc-df-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mfc-space-2, 0.5rem);
}

.mfc-df-chip {
	display: inline-flex;
	align-items: center;
	font: inherit;
	font-size: var(--mfc-text-sm, 0.9rem);
	font-weight: 600;
	line-height: 1.1;
	cursor: pointer;
	padding: 0.6rem 0.95rem;
	border-radius: var(--df-pill);
	border: 1.5px solid var(--df-border);
	background: var(--df-surface);
	color: var(--df-text);
	transition: background var(--df-tr), border-color var(--df-tr),
		color var(--df-tr), transform var(--df-tr), box-shadow var(--df-tr);
}
.mfc-df-chip::before {
	content: "✓";
	max-width: 0;
	margin-right: 0;
	opacity: 0;
	overflow: hidden;
	font-weight: 800;
	transition: max-width var(--df-tr), opacity var(--df-tr), margin var(--df-tr);
}
.mfc-df-chip:hover {
	border-color: var(--df-border-strong);
	transform: translateY(-1px);
	box-shadow: var(--df-shadow-sm);
}
.mfc-df-chip:active { transform: translateY(0) scale(0.97); }
.mfc-df-chip:focus-visible {
	outline: 2px solid var(--df-accent);
	outline-offset: 2px;
}
.mfc-df-chip[aria-pressed="true"] {
	background: var(--df-accent);
	border-color: var(--df-accent);
	color: #fff;
	box-shadow: 0 4px 14px rgba(122, 175, 135, 0.4);
}
.mfc-df-chip[aria-pressed="true"]::before {
	max-width: 1.2em;
	opacity: 1;
	margin-right: 0.4em;
}

/* ─── Fridge step (search + popular + groups) ───────────────────────────────── */

.mfc-df-fridge__search,
.mfc-df-fridge__popular,
.mfc-df-fridge__groups { display: none; }
.mfc-df--js .mfc-df-fridge__search { display: flex; }
.mfc-df--js .mfc-df-fridge__popular { display: block; }
.mfc-df--js .mfc-df-fridge__groups { display: block; }
.mfc-df--js .mfc-df-fridge__pool { display: none; }

.mfc-df-fridge__search {
	align-items: center;
	gap: var(--mfc-space-2, 0.5rem);
	padding: 0 0.9rem;
	margin-bottom: var(--mfc-space-4, 1rem);
	border: 1.5px solid var(--df-border);
	border-radius: var(--df-pill);
	background: var(--df-surface-2);
	transition: border-color var(--df-tr), box-shadow var(--df-tr), background var(--df-tr);
}
.mfc-df-fridge__search:focus-within {
	background: var(--df-surface);
	border-color: var(--df-accent);
	box-shadow: 0 0 0 4px var(--df-accent-surface);
}
.mfc-df-fridge__search-icon { flex: none; color: var(--df-text-3); }
.mfc-df-fridge__search-input {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: var(--mfc-text-base, 1rem);
	padding: 0.7rem 0;
	border: 0;
	background: none;
	color: var(--df-text);
}
.mfc-df-fridge__search-input:focus { outline: none; }
.mfc-df-fridge__search-input::placeholder { color: var(--df-text-3); }

.mfc-df-fridge__grouplabel {
	margin: 0 0 var(--mfc-space-2, 0.5rem);
	font-size: var(--mfc-text-xs, 0.75rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--df-text-3);
}
.mfc-df-fridge__popular { margin-bottom: var(--mfc-space-4, 1rem); }

.mfc-df-fridge__group { border-top: 1px solid var(--df-border); }
.mfc-df-fridge__group:first-child { border-top: 0; }

.mfc-df-fridge__group-head {
	display: flex;
	align-items: center;
	gap: var(--mfc-space-2, 0.5rem);
	width: 100%;
	padding: var(--mfc-space-3, 0.75rem) 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 700;
	color: var(--df-text);
	cursor: pointer;
	text-align: left;
}
.mfc-df-fridge__group-label { flex: 1 1 auto; }
.mfc-df-fridge__group-count {
	flex: none;
	min-width: 1.4rem;
	padding: 0.05rem 0.4rem;
	border-radius: var(--df-pill);
	background: var(--df-surface-3);
	color: var(--df-text-2);
	font-size: var(--mfc-text-xs, 0.75rem);
	font-weight: 700;
	text-align: center;
}
.mfc-df-fridge__group-count.is-active {
	background: var(--df-accent);
	color: #fff;
}
.mfc-df-fridge__group-chev {
	flex: none;
	display: inline-flex;
	color: var(--df-text-3);
	transition: transform var(--df-tr);
}
.mfc-df-fridge__group.is-open .mfc-df-fridge__group-chev { transform: rotate(180deg); }
.mfc-df-fridge__group-body { padding-bottom: var(--mfc-space-3, 0.75rem); }
.mfc-df-fridge__group:not(.is-open) .mfc-df-fridge__group-body { display: none; }

.mfc-df-fridge__empty {
	margin: var(--mfc-space-2, 0.5rem) 0 0;
	color: var(--df-text-2);
	font-size: var(--mfc-text-sm, 0.875rem);
}

/* ─── Actions / reset ───────────────────────────────────────────────────────── */

.mfc-df__actions { margin-top: var(--mfc-space-4, 1rem); }
.mfc-df__reset {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font: inherit;
	font-size: var(--mfc-text-sm, 0.875rem);
	font-weight: 600;
	background: none;
	border: 0;
	padding: 0.4rem 0.2rem;
	cursor: pointer;
	color: var(--df-text-3);
	transition: color var(--df-tr);
}
.mfc-df__reset:hover { color: var(--df-text); }
.mfc-df__reset:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; border-radius: 6px; }

/* ─── Stage (result region) ─────────────────────────────────────────────────── */

.mfc-df__stage { min-height: 220px; }
.mfc-df__sheet-head { display: none; }

/* Intro / guidance */
.mfc-df__intro {
	text-align: center;
	padding: var(--mfc-space-10, 2.75rem) var(--mfc-space-6, 1.5rem);
	border: 1.5px dashed var(--df-border-strong);
	border-radius: var(--df-radius);
	background: linear-gradient(180deg, var(--df-surface-2), var(--df-surface));
}
.mfc-df__intro-icon { display: inline-flex; color: var(--mfc-forest, #6B9E78); }
.mfc-df__intro-icon svg { width: 60px; height: 60px; }
.mfc-df__intro-title {
	margin: var(--mfc-space-4, 1rem) 0 var(--mfc-space-2, 0.5rem);
	font-size: var(--mfc-text-2xl, 1.6rem);
	line-height: 1.15;
	color: var(--df-text);
}
.mfc-df__intro-text {
	margin: 0 auto;
	max-width: 42ch;
	color: var(--df-text-2);
	font-size: var(--mfc-text-base, 1.0625rem);
	line-height: 1.6;
}

.mfc-df__message {
	text-align: center;
	padding: var(--mfc-space-10, 2.75rem) var(--mfc-space-6, 1.5rem);
	color: var(--df-text-2);
	font-size: var(--mfc-text-lg, 1.125rem);
	font-weight: 500;
}

/* ─── Hero card ─────────────────────────────────────────────────────────────── */

.mfc-df-card {
	background: var(--df-surface);
	border: 1.5px solid var(--df-border);
	border-radius: var(--df-radius);
	padding: var(--mfc-space-6, 1.5rem);
	box-shadow: var(--df-shadow-md);
}
.mfc-df-card--enter { animation: mfc-df-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes mfc-df-rise {
	from { opacity: 0; transform: translateY(12px) scale(0.99); }
	to { opacity: 1; transform: none; }
}

.mfc-df-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mfc-space-4, 1rem);
}
.mfc-df-card__title {
	margin: 0;
	font-size: var(--mfc-text-3xl, 2rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--df-text);
}

.mfc-df-card__match {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 4.1rem;
	padding: 0.5rem 0.4rem;
	border-radius: var(--df-radius-sm);
	background: linear-gradient(155deg, var(--df-accent), var(--df-accent-dark));
	color: #fff;
	box-shadow: 0 6px 16px rgba(122, 175, 135, 0.4);
	line-height: 1;
}
.mfc-df-card__match-num { font-size: var(--mfc-text-2xl, 1.55rem); font-weight: 800; }
.mfc-df-card__match-label {
	margin-top: 0.15rem;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.92;
}

.mfc-df-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mfc-space-2, 0.5rem);
	margin-top: var(--mfc-space-4, 1rem);
}
.mfc-df-card__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--mfc-text-xs, 0.78rem);
	font-weight: 700;
	padding: 0.34rem 0.7rem;
	border-radius: var(--df-pill);
	background: var(--df-surface-3);
	color: var(--df-text-2);
}

.mfc-df-card__missing {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: var(--mfc-space-4, 1rem) 0 0;
	padding: var(--mfc-space-3, 0.75rem) var(--mfc-space-4, 1rem);
	border-radius: var(--df-radius-sm);
	background: var(--mfc-pop-surface, #FFF4EC);
	color: var(--mfc-pop-dark, #C8742F);
	font-size: var(--mfc-text-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
}
.mfc-df-card__missing::before { content: "+"; font-weight: 800; }

/* Macros */
.mfc-df-macros {
	display: flex;
	align-items: center;
	gap: var(--mfc-space-6, 1.5rem);
	margin: var(--mfc-space-5, 1.25rem) 0;
	padding: var(--mfc-space-5, 1.25rem);
	border-radius: var(--df-radius-sm);
	background: var(--df-surface-2);
}
.mfc-df-ring { position: relative; width: 118px; height: 118px; flex: none; }
.mfc-df-ring__svg { width: 118px; height: 118px; transform: rotate(-90deg); }
.mfc-df-ring__track { fill: none; stroke: var(--mfc-macro-track, #E3DED6); stroke-width: 12; }
.mfc-df-ring__seg { fill: none; stroke-width: 12; stroke-linecap: round; }
.mfc-df-ring__seg--protein { stroke: var(--mfc-macro-protein, #7AAF87); }
.mfc-df-ring__seg--carbs   { stroke: var(--mfc-macro-carbs, #F4A261); }
.mfc-df-ring__seg--fat     { stroke: var(--mfc-macro-fat, #E9C46A); }
.mfc-df-card--enter .mfc-df-ring__seg { animation: mfc-df-draw 700ms ease both; }
@keyframes mfc-df-draw { from { opacity: 0; } to { opacity: 1; } }

.mfc-df-ring__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.mfc-df-ring__kcal { font-size: var(--mfc-text-2xl, 1.55rem); font-weight: 800; }
.mfc-df-ring__unit {
	margin-top: 0.15rem;
	font-size: var(--mfc-text-xs, 0.7rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--df-text-3);
	font-weight: 700;
}

.mfc-df-macros__legend {
	display: flex;
	gap: var(--mfc-space-5, 1.25rem);
	flex-wrap: wrap;
}
.mfc-df-macros__stat { display: flex; flex-direction: column; gap: 0.15rem; }
.mfc-df-macros__stat::before {
	content: "";
	width: 1.6rem;
	height: 0.32rem;
	border-radius: var(--df-pill);
	margin-bottom: 0.2rem;
}
.mfc-df-macros__stat--protein::before { background: var(--mfc-macro-protein, #7AAF87); }
.mfc-df-macros__stat--carbs::before   { background: var(--mfc-macro-carbs, #F4A261); }
.mfc-df-macros__stat--fat::before     { background: var(--mfc-macro-fat, #E9C46A); }
.mfc-df-macros__val { font-size: var(--mfc-text-xl, 1.3rem); font-weight: 800; }
.mfc-df-macros__label {
	font-size: var(--mfc-text-xs, 0.72rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--df-text-3);
	font-weight: 700;
}

/* Ingredient / method blocks */
.mfc-df-card__block { margin-top: var(--mfc-space-5, 1.25rem); }
.mfc-df-card__block-title {
	margin: 0 0 var(--mfc-space-3, 0.75rem);
	font-size: var(--mfc-text-sm, 0.875rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--df-text-2);
}
/* The `.mfc-df` prefix raises specificity to (0,2,x) so these win over the
   parent theme's `.prose ul, .prose ol { list-style: revert; padding-left: … }`
   (0,1,1) when the tool is dropped inside a `.prose` content column. Without it
   the native disc/decimal markers render on top of the custom bullet/counter
   (double bullets) and the injected padding misaligns them. */
.mfc-df .mfc-df-card__list { margin: 0; padding-left: 1.3em; list-style: none; }
.mfc-df .mfc-df-card__list li { margin-bottom: var(--mfc-space-2, 0.5rem); line-height: 1.5; }
.mfc-df .mfc-df-card__list--ul { list-style: none; padding-left: 0; }
.mfc-df .mfc-df-card__list--ul li { position: relative; padding-left: 1.5em; }
.mfc-df .mfc-df-card__list--ul li::before {
	content: "";
	position: absolute;
	left: 0.25em;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--df-accent);
}
.mfc-df .mfc-df-card__list--ol { counter-reset: step; list-style: none; padding-left: 0; }
.mfc-df .mfc-df-card__list--ol li { position: relative; padding-left: 2.1em; min-height: 1.5em; }
.mfc-df .mfc-df-card__list--ol li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.5em;
	height: 1.5em;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--df-accent-surface);
	color: var(--df-accent-dark);
	font-size: 0.78em;
	font-weight: 800;
}

/* Actions */
.mfc-df-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mfc-space-3, 0.75rem);
	margin-top: var(--mfc-space-6, 1.5rem);
}
.mfc-df-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	flex: 1 1 auto;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	padding: 0.85rem 1.4rem;
	border-radius: var(--df-pill);
	border: 1.5px solid transparent;
	transition: background var(--df-tr), color var(--df-tr),
		border-color var(--df-tr), transform var(--df-tr), box-shadow var(--df-tr);
}
.mfc-df-btn:active { transform: scale(0.98); }
.mfc-df-btn--primary {
	background: linear-gradient(150deg, var(--df-accent), var(--df-accent-dark));
	color: #fff;
	box-shadow: 0 6px 18px rgba(122, 175, 135, 0.4);
}
.mfc-df-btn--primary:hover { box-shadow: 0 8px 22px rgba(122, 175, 135, 0.5); }
.mfc-df-btn--primary.is-copied {
	background: var(--mfc-forest, #6B9E78);
	box-shadow: none;
}
.mfc-df-btn--ghost {
	background: var(--df-surface);
	border-color: var(--df-border-strong);
	color: var(--df-text);
	flex: 0 1 auto;
}
.mfc-df-btn--ghost:hover { background: var(--df-surface-3); }
.mfc-df-btn:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }

/* ─── Alternates ────────────────────────────────────────────────────────────── */

.mfc-df__alternates { margin-top: var(--df-gap); }
.mfc-df__alternates-title {
	margin: 0 0 var(--mfc-space-4, 1rem);
	font-size: var(--mfc-text-xl, 1.3rem);
	color: var(--df-text);
}
.mfc-df__slider {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	gap: var(--mfc-space-4, 1rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--mfc-space-2, 0.5rem);
	scrollbar-width: thin;
}
.mfc-df-alt {
	scroll-snap-align: start;
	position: relative;
	text-align: left;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: var(--mfc-space-2, 0.5rem);
	padding: var(--mfc-space-4, 1rem);
	padding-right: 3.2rem;
	border-radius: var(--df-radius-sm);
	border: 1.5px solid var(--df-border);
	background: var(--df-surface);
	font: inherit;
	transition: border-color var(--df-tr), box-shadow var(--df-tr), transform var(--df-tr);
}
.mfc-df-alt:hover {
	border-color: var(--df-border-strong);
	transform: translateY(-2px);
	box-shadow: var(--df-shadow-md);
}
.mfc-df-alt:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
.mfc-df-alt__title {
	font-size: var(--mfc-text-lg, 1.1rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--df-text);
}
.mfc-df-alt__meta { font-size: var(--mfc-text-sm, 0.875rem); color: var(--df-text-2); }
.mfc-df-alt__match {
	position: absolute;
	top: var(--mfc-space-4, 1rem);
	right: var(--mfc-space-4, 1rem);
	font-size: var(--mfc-text-xs, 0.75rem);
	font-weight: 800;
	padding: 0.2rem 0.5rem;
	border-radius: var(--df-pill);
	background: var(--df-accent-surface);
	color: var(--df-accent-dark);
}

/* ─── Peek bar + bottom sheet (mobile) ──────────────────────────────────────── */

.mfc-df__peek { display: none; }
.mfc-df__scrim { display: none; }

@media (max-width: 899px) {
	.mfc-df__peek {
		position: fixed;
		left: 0;
		right: 0;
		/* Sit above the Raptive fixed bottom-anchor ad instead of behind it. */
		bottom: var(--df-anchor-offset);
		z-index: 90;
		display: flex;
		align-items: center;
		gap: var(--mfc-space-3, 0.75rem);
		width: 100%;
		padding: 0.85rem var(--mfc-space-4, 1rem);
		padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-top: 1.5px solid var(--df-border);
		border-radius: var(--df-radius) var(--df-radius) 0 0;
		background: var(--df-surface);
		box-shadow: var(--df-shadow-lg);
		font: inherit;
		text-align: left;
		cursor: pointer;
		transform: translateY(0);
		transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.mfc-df__peek[hidden] { display: none; }
	.mfc-df.is-sheet-open .mfc-df__peek { transform: translateY(130%); }

	.mfc-df__peek-emoji { flex: none; font-size: 1.5rem; }
	.mfc-df__peek-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
	.mfc-df__peek-title {
		font-size: var(--mfc-text-base, 1rem);
		font-weight: 700;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.mfc-df__peek-sub { font-size: var(--mfc-text-xs, 0.78rem); color: var(--df-text-2); font-weight: 600; }
	.mfc-df__peek-cta {
		flex: none;
		font-size: var(--mfc-text-sm, 0.875rem);
		font-weight: 800;
		padding: 0.5rem 1rem;
		border-radius: var(--df-pill);
		background: linear-gradient(150deg, var(--df-accent), var(--df-accent-dark));
		color: #fff;
	}

	/* Result stage becomes a bottom sheet. z-index sits above the theme's sticky
	   site header (z-index 100) so the modal truly covers the page; bottom clears
	   the Raptive anchor so the sheet's action buttons stay tappable. */
	.mfc-df__stage {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--df-anchor-offset);
		z-index: 200;
		max-height: calc(90vh - var(--df-anchor-offset));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 0 var(--mfc-space-4, 1rem) calc(var(--mfc-space-5, 1.25rem) + env(safe-area-inset-bottom, 0px));
		background: var(--df-surface-2);
		border-radius: var(--df-radius) var(--df-radius) 0 0;
		box-shadow: var(--df-shadow-lg);
		transform: translateY(101%);
		visibility: hidden;
		transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 340ms;
	}
	.mfc-df.is-sheet-open .mfc-df__stage {
		transform: translateY(0);
		visibility: visible;
		transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
	}

	/* The intro lives in the stage; on mobile it belongs inline, not in the
	   hidden sheet, so surface it above the steps instead. */
	.mfc-df__intro { display: none; }

	.mfc-df__sheet-head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--mfc-space-2, 0.5rem);
		margin: 0 calc(-1 * var(--mfc-space-4, 1rem)) var(--mfc-space-3, 0.75rem);
		padding: var(--mfc-space-3, 0.75rem) var(--mfc-space-4, 1rem);
		background: var(--df-surface-2);
	}
	.mfc-df__sheet-handle {
		grid-column: 2;
		width: 2.5rem;
		height: 0.3rem;
		border-radius: var(--df-pill);
		background: var(--df-border-strong);
	}
	.mfc-df__sheet-title {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		display: none;
	}
	.mfc-df__sheet-close {
		grid-column: 3;
		justify-self: end;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.2rem;
		height: 2.2rem;
		border-radius: 50%;
		border: 0;
		background: var(--df-surface-3);
		color: var(--df-text-2);
		cursor: pointer;
	}
	.mfc-df__sheet-close:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }

	.mfc-df__alternates { margin-top: var(--mfc-space-5, 1.25rem); }

	.mfc-df__scrim {
		position: fixed;
		inset: 0;
		z-index: 190;
		display: block;
		background: rgba(20, 32, 22, 0.45);
		opacity: 0;
		transition: opacity 300ms ease;
	}
	.mfc-df__scrim[hidden] { display: none; }
	.mfc-df.is-sheet-open .mfc-df__scrim { opacity: 1; }

	/* Give the page breathing room so the peek bar never covers content. */
	.mfc-df--js .mfc-df__steps { padding-bottom: calc(5rem + var(--df-anchor-offset)); }

		/* Comfortable 44px minimum tap target for chips on touch screens. */
		.mfc-df-chip { min-height: 2.75rem; }
}

/* ─── Motion preferences ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.mfc-df *,
	.mfc-df *::before,
	.mfc-df *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	.mfc-df__stage { transition: visibility 0s !important; }
}