/* Form Insights Tracker - design tokens.
 * Palette/radii/borders match the "FIT Redesign" Modernist mockup
 * (claude.ai/design project aee9a6d1-e9fc-45d7-ab58-5ea9a4e7e673,
 * "FIT Redesign.dc.html") exactly - variable NAMES are unchanged (still
 * --fmit-*), only their VALUES were updated, so every component that
 * already consumes a token picks up the new theme automatically. Scoped to
 * #fmit-admin-root, never applied to the global wp-admin <body>.
 *
 * The Modernist system in one sentence: flat, gridded, zero border-radius,
 * 2px structural borders / 1px hairline row dividers, Archivo throughout,
 * a single red accent reserved for actions, and one deliberate hue per
 * status/data meaning (never reused for anything else). Border WIDTH isn't
 * tokenized (components choose 1px vs 2px per element per the mockup), only
 * border COLOR is - see --fmit-border-standard (heavy/ink, pair with a 2px
 * width on structural edges) vs --fmit-border-light (hairline, pair with 1px
 * on row/list dividers).
 */
#fmit-admin-root {
	--fmit-text-primary: #201e1d;
	--fmit-text-secondary: #4a4644;
	--fmit-text-muted: #7a7573;
	--fmit-text-faint: #a8a3a0;
	--fmit-text-on-accent: #fff;

	--fmit-bg-page: #eae7e3;
	--fmit-bg-surface: #fff;
	--fmit-bg-muted: #f3f2f2;
	--fmit-bg-zebra: #f9f8f7;

	--fmit-border-light: #ded9d6;
	--fmit-border-standard: #201e1d;
	--fmit-border-hairline: #f0eeec;

	--fmit-accent: #ec3013;
	--fmit-accent-dark: #c42207;
	--fmit-accent-tint-bg: #fdece9;
	--fmit-accent-tint-border: #ec3013;
	--fmit-accent-grad: var(--fmit-accent);
	--fmit-accent-grad-soft: var(--fmit-accent);
	--fmit-chart-mid: var(--fmit-blue);
	--fmit-chart-soft: #ded9d6;

	--fmit-success: #0f6b3d;
	--fmit-success-bg: #e3f0e8;
	--fmit-success-border: #0f6b3d;
	--fmit-success-text: #0d5c34;

	--fmit-warning: #7a4f04;
	--fmit-warning-bg: #f9f0dc;
	--fmit-warning-border: #a06a06;

	--fmit-danger: #c42207;
	--fmit-danger-bg: #fdece9;
	--fmit-danger-border: #ec3013;

	/* "New" status hue - also the general-purpose informational blue
	 * (e.g. a dashboard stat number). */
	--fmit-blue: #2148b8;
	--fmit-blue-bg: #e8ecf9;
	--fmit-blue-text: #1a3a94;
	/* Fourth semantic data color (alongside blue/success/warning) for a
	 * feature-list icon or stat that isn't itself good/bad/informational -
	 * e.g. Onboarding.js's "A dashboard that counts" row. */
	--fmit-neutral-data: #5c5854;
	--fmit-neutral-data-bg: #eceae8;
	/* Neutral outline tag chip (entry-source "Manual"/"Imported" pills,
	 * anything that used to borrow the old --fmit-purple for a non-Pro
	 * badge) - deliberately NOT purple any more, so purple reads as Pro
	 * and only Pro, everywhere in the app. */
	--fmit-purple: #7a7573;
	--fmit-purple-bg: var(--fmit-bg-surface);

	/* The one accent color for every Pro-gated UI element site-wide - "PRO"
	 * badges, lock icons, upgrade buttons/links (ui/ProLockedSection.js,
	 * components/Pro/UpgradeModal.js). */
	--fmit-pro-accent: #5b2bc9;
	--fmit-pro-accent-bg: #f7f4fe;
	--fmit-pro-accent-border: #5b2bc9;
	--fmit-pro-accent-dark: #4a1fb0;

	--fmit-overlay: rgba(32, 30, 29, 0.5);
	--fmit-shadow-sm: none;
	--fmit-shadow-card: none;
	/* Hard, offset, un-blurred shadows - matches the mockup's one deliberate
	 * shadow motif (the focused search input's "2px 2px 0 accent" square
	 * shadow), not a soft/blurred elevation system. */
	--fmit-shadow-popover: none;
	--fmit-shadow-modal: none;
	--fmit-shadow-primary: none;
	--fmit-shadow-primary-hover: none;

	--fmit-font: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
	--fmit-font-narrow: "Archivo Narrow", Archivo, sans-serif;
	--fmit-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

	/* Zero radius, everywhere, no exceptions - including "pill"/"full", so
	 * every rounded chip/avatar/toggle-knob in the old theme flattens to a
	 * rectangle/square automatically wherever it already consumed a token
	 * rather than a hardcoded 50%/99px. */
	--fmit-radius-checkbox: 0px;
	--fmit-radius-sm: 0px;
	--fmit-radius-md: 0px;
	--fmit-radius-popover: 0px;
	--fmit-radius-pill: 0px;
	--fmit-radius-card: 0px;
	--fmit-radius-full: 0px;

	font-family: var(--fmit-font);
	font-size: 13px;
	line-height: 1.45;
	color: var(--fmit-text-primary);
	background: var(--fmit-bg-page);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;

	/* Fixed page shell (outer box) - see the "Fixed page shell" block below
	 * for the #wpbody-content/#wpcontent half of this technique. Height is
	 * shortened by the same 16px as the left/right margins below (rather than
	 * relying on margin-bottom, which this flex/height-100% box doesn't
	 * reliably respect) so the same dark strip always shows at the bottom too.
	 * Radius is 0 (Modernist has none), so #fmit-admin-root now reads as a
	 * plain flush rectangle against the dark #wpcontent frame - the margin
	 * strips still supply the "card" separation, just without rounded corners.
	 */
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 16px);
	margin-left: 16px;
	margin-right: 16px;
	border-radius: var(--fmit-radius-card);
	overflow: hidden;
}

#fmit-admin-root *,
#fmit-admin-root *::before,
#fmit-admin-root *::after {
	box-sizing: inherit;
}

#fmit-admin-root button,
#fmit-admin-root input,
#fmit-admin-root select,
#fmit-admin-root textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* Tabular numerals for every count/date/id - a deliberate typographic
 * convention from the mockup (its own ".fnum" class) so numeral columns
 * stay aligned. */
.fmit-num {
	font-variant-numeric: tabular-nums;
}

/* Spinning loading icon - see ui/LoadingState.js. */
@keyframes fmit-spin {
	to {
		transform: rotate(360deg);
	}
}
.fmit-spin {
	animation: fmit-spin 0.8s linear infinite;
}

/* ============================================================
 * Shared primitive hover states (ui/Button.js) - real CSS :hover rather
 * than JS-tracked state, mirroring the mockup's own style-hover convention.
 * ============================================================ */
.fmit-btn-primary:hover:not(:disabled) {
	background: var(--fmit-accent-dark) !important;
	border-color: var(--fmit-accent-dark) !important;
}
.fmit-btn-secondary:hover:not(:disabled) {
	background: var(--fmit-bg-muted) !important;
}
.fmit-btn-danger:hover:not(:disabled) {
	background: var(--fmit-accent-tint-bg) !important;
}
.fmit-btn-pro:hover:not(:disabled) {
	background: var(--fmit-pro-accent-dark) !important;
	border-color: var(--fmit-pro-accent-dark) !important;
}
.fmit-btn-locked:hover:not(:disabled) {
	border-color: var(--fmit-pro-accent) !important;
	color: var(--fmit-pro-accent) !important;
}
/* TopNav's outline "Upgrade to Pro" button (Free only) - fills solid purple
 * on hover instead of just darkening, since it starts as an outline button
 * rather than a filled one. */
.fmit-topnav-upgrade:hover {
	background: var(--fmit-pro-accent) !important;
	color: #fff !important;
}

/* ============================================================
 * Fixed page shell
 * Locks #wpbody-content to the viewport height so this plugin's page never
 * scrolls the whole document - only the WP admin sidebar menu (when it has
 * enough items to overflow) or #fmit-admin-root's own inner scrolling panel
 * does. Paired with #fmit-admin-root's height/margin-right/border-radius
 * rule above.
 * ============================================================ */
#wpbody-content {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 32px);
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	overflow: hidden;
	padding-bottom: 0;
}
#wpfooter {
	display: none;
}
/* Matches WP's own admin-menu color (#1d2327 - see #adminmenuback in
 * wp-admin/css/admin-menu.css) so the margin-right/height-inset strip
 * around #fmit-admin-root reads as an intentional dark frame instead of a
 * blank void. */
#wpcontent {
	padding-left: 0;
	background: #1d2327;
}

/* The inner page-body region below the top nav - this is what scrolls
 * internally (TopNav itself stays pinned) now that #fmit-admin-root is a
 * fixed-height box rather than growing with page content. */
.fmit-app-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Thin, unobtrusive scrollbars wherever content scrolls: the app's main
 * vertical scroll and any horizontally-scrolling table body (see
 * EntriesTable.js). */
.fmit-app-scroll,
.fmit-table-scroll,
.fmit-thin-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--fmit-border-light) transparent;
}
.fmit-app-scroll::-webkit-scrollbar,
.fmit-table-scroll::-webkit-scrollbar,
.fmit-thin-scroll::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.fmit-app-scroll::-webkit-scrollbar-track,
.fmit-table-scroll::-webkit-scrollbar-track,
.fmit-thin-scroll::-webkit-scrollbar-track {
	background: transparent;
}
.fmit-app-scroll::-webkit-scrollbar-thumb,
.fmit-table-scroll::-webkit-scrollbar-thumb,
.fmit-thin-scroll::-webkit-scrollbar-thumb {
	background-color: var(--fmit-border-light);
	border-radius: 0;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.fmit-app-scroll::-webkit-scrollbar-thumb:hover,
.fmit-table-scroll::-webkit-scrollbar-thumb:hover,
.fmit-thin-scroll::-webkit-scrollbar-thumb:hover {
	background-color: var(--fmit-text-faint);
	background-clip: padding-box;
}

/* Same thin scrollbar, but tinted with the Pro accent - used inside popovers
 * anchored to a Pro-adjacent action (e.g. ReorderPopover.js) where the
 * default neutral thumb reads too heavy against the small popup. */
.fmit-accent-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--fmit-pro-accent) transparent;
}
.fmit-accent-scroll::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
.fmit-accent-scroll::-webkit-scrollbar-track {
	background: transparent;
}
.fmit-accent-scroll::-webkit-scrollbar-thumb {
	background-color: var(--fmit-pro-accent);
	border-radius: 0;
}

/* Icon+input search boxes (e.g. Settings -> Tracking Plugins' "Search
 * forms"): the wrapper div draws the box, and the bare <input> inside sets
 * border/outline/box-shadow to none - wp-admin's own .wp-core-ui focus
 * style still paints a blue box-shadow ring on the raw input though, which
 * pokes out past the wrapper's corners instead of matching them. Neutralize
 * that here and move the focus ring to the wrapper itself. */
.fmit-search-box:focus-within {
	border-color: var(--fmit-border-standard);
	box-shadow: 2px 2px 0 var(--fmit-accent);
}
.fmit-search-box input:focus {
	box-shadow: none;
	outline: none;
}

/* Small square icon button (e.g. RecordDetail's back arrow) - a visible
 * bordered hit target with a hover background, instead of a bare icon
 * floating with no affordance. */
.fmit-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: var(--fmit-radius-md);
	border: 1px solid var(--fmit-border-light);
	background: var(--fmit-bg-surface);
	color: var(--fmit-text-primary);
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.fmit-icon-btn:hover {
	background: var(--fmit-border-standard);
	color: #fff;
}

/* Subtle variant (e.g. Tracking Plugins' refresh button) - a light hover
 * instead of the inverted black/white one above, for icon buttons that sit
 * next to a lot of other content and shouldn't punch through the page. */
.fmit-icon-btn-subtle:hover {
	background: var(--fmit-bg-muted);
	color: var(--fmit-text-primary);
}

/* Table row hover - see EntriesTable.js/TrashTable.js. Applied via class
 * (rather than only inline style) so :hover can layer over the selected
 * base state without fighting inline-style specificity. The mockup has no
 * zebra striping - every row is plain white until hovered/selected - so
 * .fmit-row-zebra is intentionally a no-op here. Selected rows use the
 * accent tint (matches the mockup's selected-row example). */
.fmit-table-row {
	background: transparent;
}
.fmit-table-row:hover {
	background: var(--fmit-bg-zebra);
}
.fmit-table-row.fmit-row-zebra {
	background: transparent;
}
.fmit-table-row.fmit-row-zebra:hover {
	background: var(--fmit-bg-zebra);
}
.fmit-table-row.fmit-row-selected,
.fmit-table-row.fmit-row-selected:hover {
	background: var(--fmit-accent-tint-bg);
}

/* Actions column stays pinned to the right edge while the table scrolls
 * horizontally (see EntriesTable.js) - own background per row state (rather
 * than "inherit") since a sticky cell needs to be opaque to mask whatever
 * scrolls underneath it, and it doesn't otherwise pick up its row's
 * background (that's set on the row div, not passed down to children). */
.fmit-actions-cell {
	position: sticky;
	right: 0;
	z-index: 1;
	background: var(--fmit-bg-surface);
	box-shadow: -1px 0 0 var(--fmit-border-light);
}
.fmit-table-row:hover .fmit-actions-cell {
	background: var(--fmit-bg-zebra);
}
.fmit-table-row.fmit-row-selected .fmit-actions-cell {
	background: var(--fmit-accent-tint-bg);
}
.fmit-table-head .fmit-actions-cell {
	background: var(--fmit-bg-muted);
}

/* Shared affordance for an Entries table cell that's actually a dropdown
 * trigger (StatusBadge, AssigneeBadge) - without this, a Pill/avatar+name
 * reads as plain static text, giving no visual hint it's clickable. The
 * hover background plus the chevron each own trigger appends after its
 * label are the two signals; the chevron fades with the trigger itself
 * when disabled (nothing to open). */
.fmit-cell-trigger {
	padding: 3px 5px 3px 3px;
	margin: -3px -5px -3px -3px;
	border-radius: var(--fmit-radius-sm);
	transition: background 0.12s ease;
}
.fmit-cell-trigger:hover:not(:disabled) {
	background: var(--fmit-bg-muted);
}

/* Table header row - bold, uppercase, letter-spaced overline label, matching
 * the mockup's column-label type scale exactly (10px/600/uppercase/.1em). */
.fmit-table-head {
	font: 600 10px var(--fmit-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fmit-text-secondary);
}

/* Categorical colors cycled across the 5 supported form plugins. Kept
 * restrained/neutral in the Modernist palette (the mockup itself doesn't
 * color-code plugin swatches - each plugin row shows its own icon and plain
 * ink/grey text), so these are only used where a small distinguishing dot is
 * still useful (e.g. a legend), not as a loud brand color. */
.fmit-plugin-color-1 { background: #2148b8; }
.fmit-plugin-color-2 { background: #0f6b3d; }
.fmit-plugin-color-3 { background: #a06a06; }
.fmit-plugin-color-4 { background: #5c5854; }
.fmit-plugin-color-5 { background: #5b2bc9; }

.fmit-plugin-text-1 { color: #2148b8; }
.fmit-plugin-text-2 { color: #0f6b3d; }
.fmit-plugin-text-3 { color: #a06a06; }
.fmit-plugin-text-4 { color: #5c5854; }
.fmit-plugin-text-5 { color: #5b2bc9; }

/* ============================================================
 * Print / PDF (Record Detail "Print / PDF" menu)
 * PrintableEntry.js renders a hidden (.fmit-print-only), letterhead-style
 * copy of the entry alongside the normal on-screen view - hidden on screen,
 * shown only once window.print() actually opens the browser's print
 * dialog (@media print), at which point everything else (WP's own admin
 * chrome, this app's top nav, and RecordDetail's own action buttons/audit-
 * history/notes - all marked .fmit-no-print) is hidden instead. Colors here
 * are hardcoded rather than the usual --fmit-* tokens, deliberately - a
 * printed page should look the same regardless of the admin's light/dark
 * preference, and to match EntryPdfTemplate.php's own fixed palette so the
 * printed page and the downloaded PDF read the same. Out of scope for the
 * Modernist re-skin (print output, not on-screen UI).
 * ============================================================ */
.fmit-print-only {
	display: none;
}
@media print {
	#wpadminbar,
	#adminmenumain,
	#adminmenuback,
	#adminmenuwrap,
	#wpfooter,
	.fmit-no-print {
		display: none !important;
	}
	#wpbody-content,
	#wpcontent,
	#fmit-admin-root,
	.fmit-app-scroll {
		position: static !important;
		height: auto !important;
		overflow: visible !important;
		background: #fff !important;
		margin: 0 !important;
	}
	.fmit-print-only {
		display: block !important;
		padding: 24px;
		color: #1d2327;
		font-size: 12px;
	}
	.fmit-print-only h1 {
		font-size: 18px;
		margin: 0 0 4px;
	}
	.fmit-print-subtitle {
		color: #6b7280;
		font-size: 11px;
		margin: 0 0 20px;
	}
	.fmit-print-only h2 {
		font-size: 13px;
		margin: 20px 0 8px;
		padding-bottom: 4px;
		border-bottom: 2px solid #1d2327;
	}
	.fmit-print-table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 16px;
	}
	.fmit-print-table td {
		padding: 6px 8px;
		border-bottom: 1px solid #e5e7eb;
		vertical-align: top;
	}
	.fmit-print-label {
		width: 160px;
		color: #6b7280;
		font-weight: bold;
	}
	.fmit-print-group {
		text-align: left;
		padding: 10px 8px 4px;
		font-size: 10px;
		color: #9ca3af;
		text-transform: uppercase;
		letter-spacing: 1px;
		border-bottom: 1px solid #e5e7eb;
	}
	.fmit-print-note {
		padding: 8px;
		border-bottom: 1px solid #e5e7eb;
		break-inside: avoid;
	}
	.fmit-print-note-text {
		white-space: pre-wrap;
	}
	.fmit-print-note-when {
		color: #9ca3af;
		font-size: 10px;
		margin-top: 3px;
	}
	.fmit-print-footer {
		margin-top: 24px;
		padding-top: 10px;
		border-top: 1px solid #e5e7eb;
		font-size: 10px;
		color: #9ca3af;
	}
}

/* Onboarding.js only - the accent focus ring its own design handoff calls
 * for ("Focus everywhere ... never the browser default"), scoped to this one
 * page rather than made global, since nothing else in the plugin asked for
 * this treatment. */
.fmit-onboarding :focus-visible {
	outline: 2px solid var(--fmit-accent);
	outline-offset: 2px;
}

/* ============================================================
 * Welcome tour (components/Onboarding/WelcomeTour.js)
 * Pure CSS motion, app tokens only. Each illustration animates only while
 * its slide has .is-active, so it replays every time you arrive on it.
 * Base (un-animated) states are the fully visible ones, so with animations
 * off - prefers-reduced-motion, below - everything is simply shown.
 * ============================================================ */
.fmit-tour-viewport {
	overflow: hidden;
}
.fmit-tour-track {
	display: flex;
	transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fmit-tour-slide {
	flex: 0 0 100%;
	min-width: 0;
	opacity: 0;
	transition: opacity 280ms ease;
}
.fmit-tour-slide.is-active {
	opacity: 1;
}

/* Progress dots: the active one stretches and takes the accent. */
.fmit-tour-dot {
	width: 8px;
	height: 8px;
	background: var(--fmit-border-light);
	transition: width 250ms ease, background-color 250ms ease;
}
.fmit-tour-dot:hover {
	background: var(--fmit-text-faint);
}
.fmit-tour-dot.is-active {
	width: 24px;
	background: var(--fmit-accent);
}

/* 1 - Welcome: fade + slight scale-up. */
@keyframes fmit-tour-pop {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}
.fmit-tour-slide.is-active .fmit-tour-welcome {
	animation: fmit-tour-pop 450ms ease both;
}

/* 2 - Status pipeline: each stage lights up in turn (staggered by --i, all on
 * the same 4.8s loop so the order holds), with a marker following along. */
@keyframes fmit-tour-stage {
	0%, 21% { border-color: var(--c); background: var(--bg); color: var(--c); }
	25%, 100% { border-color: var(--fmit-border-light); background: var(--fmit-bg-surface); color: var(--fmit-text-muted); }
}
.fmit-tour-stage {
	border: 1px solid var(--fmit-border-light);
	background: var(--fmit-bg-surface);
	color: var(--fmit-text-muted);
}
.fmit-tour-slide.is-active .fmit-tour-stage {
	animation: fmit-tour-stage 4.8s ease infinite both;
	animation-delay: calc(var(--i) * 1.2s);
}
@keyframes fmit-tour-marker {
	0%, 21% { transform: translateX(0); }
	25%, 46% { transform: translateX(100%); }
	50%, 71% { transform: translateX(200%); }
	75%, 96% { transform: translateX(300%); }
	100% { transform: translateX(0); }
}
.fmit-tour-slide.is-active .fmit-tour-marker {
	animation: fmit-tour-marker 4.8s ease-in-out infinite;
}

/* 3 - Notes & tracking: the note, then each data row, rises in one after another. */
@keyframes fmit-tour-rise {
	0% { opacity: 0; transform: translateY(10px); }
	8%, 84% { opacity: 1; transform: translateY(0); }
	94%, 100% { opacity: 0; transform: translateY(0); }
}
.fmit-tour-slide.is-active .fmit-tour-rise {
	animation: fmit-tour-rise 6s ease infinite both;
	animation-delay: calc(var(--i) * 450ms);
}

/* 4 - Import / export / manual entry. */
@keyframes fmit-tour-bob-up {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes fmit-tour-bob-down {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}
@keyframes fmit-tour-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}
.fmit-tour-slide.is-active .fmit-tour-bob-up { animation: fmit-tour-bob-up 1.6s ease-in-out infinite; }
.fmit-tour-slide.is-active .fmit-tour-bob-down { animation: fmit-tour-bob-down 1.6s ease-in-out 0.25s infinite; }
.fmit-tour-slide.is-active .fmit-tour-pulse { animation: fmit-tour-pulse 1.6s ease-in-out 0.5s infinite; }

/* 5 - Send mail: the envelope flies in, then "Sent" appears. */
@keyframes fmit-tour-fly {
	0% { opacity: 0; transform: translateX(-46px); }
	22%, 88% { opacity: 1; transform: translateX(0); }
	100% { opacity: 0; transform: translateX(0); }
}
@keyframes fmit-tour-sent {
	0%, 30% { opacity: 0; transform: translateX(-6px); }
	42%, 88% { opacity: 1; transform: translateX(0); }
	100% { opacity: 0; transform: translateX(0); }
}
.fmit-tour-slide.is-active .fmit-tour-fly { animation: fmit-tour-fly 4s ease infinite both; }
.fmit-tour-slide.is-active .fmit-tour-sent { animation: fmit-tour-sent 4s ease infinite both; }

/* 6 - Webhooks: a dot travels from this plugin to the external tool. */
@keyframes fmit-tour-travel {
	0% { left: 0; opacity: 0; }
	12%, 88% { opacity: 1; }
	100% { left: calc(100% - 10px); opacity: 0; }
}
.fmit-tour-slide.is-active .fmit-tour-travel {
	animation: fmit-tour-travel 2.2s ease-in-out infinite;
}

/* Reduced motion: no sliding, fading or looping - slides just switch, and
 * every illustration sits in its plain, fully visible state. */
@media (prefers-reduced-motion: reduce) {
	.fmit-tour-track,
	.fmit-tour-slide,
	.fmit-tour-dot {
		transition: none !important;
	}
	.fmit-tour-slide *,
	.fmit-tour-slide.is-active * {
		animation: none !important;
	}
}