/*
 * SAM Journeys — presentation for the saminfo/engagement block and the
 * runtime placements the plugin's format mounters create.
 *
 * Format differentiation (must read at a glance):
 *   Toast     — compact floating corner notice; fade + slight lift; minimal chrome
 *   Slide-in  — larger edge panel flush to the screen edge; slides from off-screen
 *   Modal     — centred dialog + navy scrim; matches header .sam-modal (no top band)
 *   Soft/hard wall — article gate panels (no decorative “fingernail” top band)
 *
 *   .sam-engagement[--toast|--slide-in|--modal|--soft-wall|--hard-wall]
 *       .is-position-* .is-size-{sm,md,lg} .is-tone-{light,navy}
 *     > .sam-engagement__close (dismiss) + .sam-engagement__body (core blocks)
 *   .sam-journeys-corner--{position}   stacked toasts / slide-ins (fixed)
 *   .sam-journey-unit--{toast|slide-in|modal|overlay|inline|docked}
 *   .is-entering / .is-open / .is-leaving   enter + exit (reduced-motion safe)
 *
 * Tokens only (theme.json): palette, spacing, font presets, shadow--float,
 * custom--engagement--{width,radius,inset,motion,motion-slide}. Loaded on the
 * front end when the journeys island is present, and in the editor canvas.
 */

/* ── Card (shared shell — no decorative top “fingernail” band) ─────── */

.sam-engagement {
	--sam-eng-surface: var(--wp--preset--color--base);
	--sam-eng-ink: var(--wp--preset--color--ink);
	--sam-eng-muted: var(--wp--preset--color--ink-3);
	--sam-eng-heading: var(--wp--preset--color--navy);
	--sam-eng-rule: var(--wp--preset--color--rule);
	/* Navy primary CTA (matches header .sam-modal); orange is hover/accent only. */
	--sam-eng-cta: var(--wp--preset--color--navy);
	--sam-eng-cta-ink: var(--wp--preset--color--base);
	--sam-eng-cta-hover: var(--wp--preset--color--orange);
	--sam-eng-close: transparent;
	--sam-eng-close-ink: var(--wp--preset--color--ink-3);
	--sam-eng-focus: var(--wp--preset--color--navy);

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--custom--engagement--width--md);
	padding: var(--wp--preset--spacing--50);
	background: var(--sam-eng-surface);
	color: var(--sam-eng-ink);
	border: 0;
	border-radius: var(--wp--custom--engagement--radius);
	box-shadow: var(--wp--preset--shadow--float);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.55;
	text-align: start;
}

.sam-engagement.is-size-sm {
	max-width: var(--wp--custom--engagement--width--sm);
	padding: var(--wp--preset--spacing--40);
}

.sam-engagement.is-size-lg {
	max-width: var(--wp--custom--engagement--width--lg);
}

.sam-engagement.is-tone-navy {
	--sam-eng-surface: var(--wp--preset--color--navy);
	--sam-eng-ink: var(--wp--preset--color--base);
	--sam-eng-muted: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
	--sam-eng-heading: var(--wp--preset--color--base);
	--sam-eng-rule: var(--wp--preset--color--navy);
	--sam-eng-cta: var(--wp--preset--color--orange);
	--sam-eng-cta-hover: var(--wp--preset--color--base);
	--sam-eng-cta-ink: var(--wp--preset--color--navy-deep);
	--sam-eng-close: transparent;
	--sam-eng-close-ink: var(--wp--preset--color--base);
	--sam-eng-focus: var(--wp--preset--color--yellow);
}

/* ── Format chrome ─────────────────────────────────────────────────── */

/* Toast: compact, ephemeral, floating inset from the corner. */
.sam-engagement--toast {
	max-width: var(--wp--custom--engagement--width--sm);
	padding: var(--wp--preset--spacing--40);
	box-shadow:
		0 8px 24px rgba(2, 0, 51, 0.12),
		0 1px 4px rgba(2, 0, 51, 0.08);
}

.sam-engagement--toast .wp-block-heading {
	font-size: var(--wp--preset--font-size--h6);
	padding-inline-end: var(--wp--preset--spacing--50);
}

.sam-engagement--toast .sam-engagement__body .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

.sam-engagement--toast .wp-block-button__link {
	padding-block: 0.7rem;
}

/* Slide-in: larger edge panel — denser type, stronger float, flush via unit CSS. */
.sam-engagement--slide-in {
	max-width: var(--wp--custom--engagement--width--md);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50)
		var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	box-shadow: var(--wp--preset--shadow--float);
}

@media (min-width: 783px) {
	.sam-engagement--slide-in .sam-engagement__body .wp-block-heading {
		font-size: 1.0625rem;
	}
}

/* Modal: centred dialog matching header .sam-modal (paper, navy CTA, no frame). */
.sam-engagement--modal {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	text-align: center;
	box-shadow: 0 24px 60px -16px rgba(20, 16, 63, 0.45);
}

.sam-engagement__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sam-eng-heading);
}

.sam-engagement__body > * {
	margin-block: 0;
}

.sam-engagement__body > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sam-engagement__body .wp-block-heading {
	padding-inline-end: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--h5);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: var(--sam-eng-heading);
}

.sam-engagement.is-size-sm .wp-block-heading {
	font-size: var(--wp--preset--font-size--h6);
}

.sam-engagement--modal .sam-engagement__eyebrow {
	margin-block-end: var(--wp--preset--spacing--40);
}

.sam-engagement--modal .wp-block-heading,
.sam-engagement--soft-wall .wp-block-heading,
.sam-engagement--hard-wall .wp-block-heading {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	padding-inline: var(--wp--preset--spacing--40);
	padding-inline-end: var(--wp--preset--spacing--60);
}

.sam-engagement--modal .sam-engagement__body > .wp-block-heading + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.sam-engagement__body p {
	color: var(--sam-eng-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.55;
}

.sam-engagement--modal .sam-engagement__body p {
	max-width: 36ch;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--body, 0.9375rem);
	color: var(--wp--preset--color--ink-2);
}

.sam-engagement--modal .sam-engagement__body p + p {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sam-engagement__body a:not(.wp-block-button__link) {
	color: var(--sam-eng-heading);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	overflow-wrap: anywhere;
}

.sam-engagement__body .wp-block-buttons {
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--50);
}

.sam-engagement__body .wp-block-button {
	flex: 1 1 auto;
}

.sam-engagement .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding-block: 0.9rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--sam-eng-cta);
	color: var(--sam-eng-cta-ink);
	border: 1px solid var(--sam-eng-cta);
	border-radius: 2px;
}

.sam-engagement .wp-block-button__link:hover,
.sam-engagement .wp-block-button__link:focus-visible {
	background: var(--sam-eng-cta-hover);
	border-color: var(--sam-eng-cta-hover);
	color: var(--wp--preset--color--base);
}

.sam-engagement .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--sam-eng-heading);
	border-color: currentColor;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.sam-engagement .is-style-outline .wp-block-button__link:hover,
.sam-engagement .is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}

/* Close (×) — calm chrome like header .sam-modal-close; bars, no glyph. */
.sam-engagement__close {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	display: grid;
	place-items: center;
	width: var(--wp--preset--spacing--60);
	height: var(--wp--preset--spacing--60);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sam-eng-close);
	color: var(--sam-eng-close-ink);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--engagement--motion) ease,
		color var(--wp--custom--engagement--motion) ease;
}

.sam-engagement__close:hover,
.sam-engagement__close:focus-visible {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--ink);
}

.sam-engagement.is-tone-navy .sam-engagement__close:hover,
.sam-engagement.is-tone-navy .sam-engagement__close:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
	color: var(--wp--preset--color--base);
}

.sam-engagement__close-icon {
	position: relative;
	display: block;
	width: 42%;
	height: 42%;
}

.sam-engagement__close-icon::before,
.sam-engagement__close-icon::after {
	content: "";
	position: absolute;
	inset-block-start: calc(50% - 1px);
	inset-inline-start: 0;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transform: rotate(45deg);
}

.sam-engagement__close-icon::after {
	transform: rotate(-45deg);
}

.sam-engagement :focus-visible {
	outline: 2px solid var(--sam-eng-focus);
	outline-offset: 2px;
}

/* Walls: gate panels — paper band, no fingernail top rule. */
.sam-engagement--soft-wall,
.sam-engagement--hard-wall {
	background: var(--wp--preset--color--base-2);
	border: 0;
	box-shadow: none;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	text-align: center;
}

.sam-engagement--soft-wall.is-tone-navy,
.sam-engagement--hard-wall.is-tone-navy {
	background: var(--wp--preset--color--navy);
}

/* Soft/hard wall headings: keep horizontal padding symmetric (the shared
 * modal rule sets a larger padding-inline-end for the close control). */
.sam-engagement--soft-wall .wp-block-heading,
.sam-engagement--hard-wall .wp-block-heading {
	padding-inline: var(--wp--preset--spacing--60);
}

.sam-engagement--soft-wall .wp-block-buttons,
.sam-engagement--hard-wall .wp-block-buttons,
.sam-engagement--modal .wp-block-buttons {
	justify-content: center;
	flex-wrap: wrap;
}

.sam-engagement--modal .wp-block-button,
.sam-engagement--soft-wall .wp-block-button,
.sam-engagement--hard-wall .wp-block-button {
	flex: 1 1 10rem;
	max-width: 100%;
}

.sam-engagement--soft-wall .wp-block-button__link,
.sam-engagement--hard-wall .wp-block-button__link,
.sam-engagement--modal .wp-block-button__link {
	padding-inline: var(--wp--preset--spacing--60);
}

.sam-engagement--soft-wall .has-meta-font-size,
.sam-engagement--hard-wall .has-meta-font-size,
.sam-engagement--modal .has-meta-font-size {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ── Runtime placement ─────────────────────────────────────────────── */

.sam-journey-unit {
	transition:
		opacity var(--wp--custom--engagement--motion) ease,
		transform var(--wp--custom--engagement--motion) ease;
}

.sam-journeys-corner {
	position: fixed;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--30);
	width: calc(100vw - 2 * var(--wp--custom--engagement--inset));
	max-width: var(--wp--custom--engagement--width--md);
	pointer-events: none;
}

.sam-journeys-corner > * {
	width: 100%;
	display: flex;
	justify-content: inherit;
	pointer-events: auto;
}

.sam-journeys-corner--bottom-right,
.sam-journeys-corner--top-right {
	inset-inline-end: var(--wp--custom--engagement--inset);
}

.sam-journeys-corner--bottom-left,
.sam-journeys-corner--top-left {
	inset-inline-start: var(--wp--custom--engagement--inset);
	align-items: flex-start;
}

.sam-journeys-corner--bottom,
.sam-journeys-corner--top {
	inset-inline-start: 50%;
	align-items: center;
	transform: translateX(-50%);
}

.sam-journeys-corner--bottom-right,
.sam-journeys-corner--bottom-left,
.sam-journeys-corner--bottom {
	inset-block-end: var(--wp--custom--engagement--inset);
}

.sam-journeys-corner--top-right,
.sam-journeys-corner--top-left,
.sam-journeys-corner--top {
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--engagement--inset));
}

.sam-journeys-corner--bottom-right > *,
.sam-journeys-corner--top-right > * {
	justify-content: flex-end;
}

.sam-journeys-corner--bottom > *,
.sam-journeys-corner--top > * {
	justify-content: center;
}

/* Slide-in: flush edge panel (toast keeps the inset float). Caps share one
 * toast-slot unit per pageview, so toast + slide-in rarely cohabit a corner.
 * `.sam-journeys-corner--panel` is set by the formats mounter; `:has()` is a
 * fallback for static editor/demo markup. */
.sam-journeys-corner--panel.sam-journeys-corner--bottom-right,
.sam-journeys-corner--panel.sam-journeys-corner--top-right,
.sam-journeys-corner--bottom-right:has(.sam-journey-unit--slide-in),
.sam-journeys-corner--top-right:has(.sam-journey-unit--slide-in) {
	right: 0;
	inset-inline-end: 0;
	width: min(100vw, var(--wp--custom--engagement--width--md));
	max-width: var(--wp--custom--engagement--width--md);
}

.sam-journeys-corner--panel.sam-journeys-corner--bottom-left,
.sam-journeys-corner--panel.sam-journeys-corner--top-left,
.sam-journeys-corner--bottom-left:has(.sam-journey-unit--slide-in),
.sam-journeys-corner--top-left:has(.sam-journey-unit--slide-in) {
	left: 0;
	inset-inline-start: 0;
	width: min(100vw, var(--wp--custom--engagement--width--md));
	max-width: var(--wp--custom--engagement--width--md);
}

.sam-journeys-corner--panel.sam-journeys-corner--bottom-right,
.sam-journeys-corner--panel.sam-journeys-corner--bottom-left,
.sam-journeys-corner--panel.sam-journeys-corner--bottom,
.sam-journeys-corner--bottom-right:has(.sam-journey-unit--slide-in),
.sam-journeys-corner--bottom-left:has(.sam-journey-unit--slide-in),
.sam-journeys-corner--bottom:has(.sam-journey-unit--slide-in) {
	bottom: 0;
	inset-block-end: 0;
}

.sam-journeys-corner--panel.sam-journeys-corner--top-right,
.sam-journeys-corner--panel.sam-journeys-corner--top-left,
.sam-journeys-corner--panel.sam-journeys-corner--top,
.sam-journeys-corner--top-right:has(.sam-journey-unit--slide-in),
.sam-journeys-corner--top-left:has(.sam-journey-unit--slide-in),
.sam-journeys-corner--top:has(.sam-journey-unit--slide-in) {
	top: var(--wp-admin--admin-bar--height, 0px);
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
}

/* Panel shadow pulls inward from the open edge (matches header drawer). */
.sam-journeys-corner--bottom-right .sam-engagement--slide-in,
.sam-journeys-corner--top-right .sam-engagement--slide-in {
	box-shadow: -16px 0 40px -12px rgba(20, 16, 63, 0.35);
}

.sam-journeys-corner--bottom-left .sam-engagement--slide-in,
.sam-journeys-corner--top-left .sam-engagement--slide-in {
	box-shadow: 16px 0 40px -12px rgba(20, 16, 63, 0.35);
}

.sam-journeys-corner--bottom .sam-engagement--slide-in {
	box-shadow: 0 -16px 40px -12px rgba(20, 16, 63, 0.35);
}

.sam-journeys-corner--top .sam-engagement--slide-in {
	box-shadow: 0 16px 40px -12px rgba(20, 16, 63, 0.35);
}

.sam-journeys-corner--bottom-right .sam-engagement--slide-in {
	border-radius: var(--wp--custom--engagement--radius) 0 0 0;
}

.sam-journeys-corner--bottom-left .sam-engagement--slide-in {
	border-radius: 0 var(--wp--custom--engagement--radius) 0 0;
}

.sam-journeys-corner--top-right .sam-engagement--slide-in {
	border-radius: 0 0 0 var(--wp--custom--engagement--radius);
}

.sam-journeys-corner--top-left .sam-engagement--slide-in {
	border-radius: 0 0 var(--wp--custom--engagement--radius) 0;
}

.sam-journeys-corner--bottom .sam-engagement--slide-in,
.sam-journeys-corner--top .sam-engagement--slide-in {
	border-radius: 0;
	max-width: none;
}

/* Toast motion: fade + slight lift (ephemeral). */
.sam-journey-unit--toast {
	transition:
		opacity var(--wp--custom--engagement--motion) ease,
		transform var(--wp--custom--engagement--motion) ease;
}

.sam-journey-unit--toast.is-entering,
.sam-journey-unit--toast.is-leaving {
	opacity: 0;
	transform: translateY(var(--wp--preset--spacing--30));
}

/* Slide-in motion: travel from off-screen along the edge (panel). */
.sam-journey-unit--slide-in {
	transition:
		opacity var(--wp--custom--engagement--motion-slide, 320ms) ease,
		transform var(--wp--custom--engagement--motion-slide, 320ms) cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sam-journeys-corner--bottom-right .sam-journey-unit--slide-in.is-entering,
.sam-journeys-corner--bottom-right .sam-journey-unit--slide-in.is-leaving,
.sam-journeys-corner--top-right .sam-journey-unit--slide-in.is-entering,
.sam-journeys-corner--top-right .sam-journey-unit--slide-in.is-leaving {
	opacity: 1;
	transform: translateX(110%);
}

.sam-journeys-corner--bottom-left .sam-journey-unit--slide-in.is-entering,
.sam-journeys-corner--bottom-left .sam-journey-unit--slide-in.is-leaving,
.sam-journeys-corner--top-left .sam-journey-unit--slide-in.is-entering,
.sam-journeys-corner--top-left .sam-journey-unit--slide-in.is-leaving {
	opacity: 1;
	transform: translateX(-110%);
}

.sam-journeys-corner--bottom .sam-journey-unit--slide-in.is-entering,
.sam-journeys-corner--bottom .sam-journey-unit--slide-in.is-leaving {
	opacity: 1;
	transform: translateY(110%);
}

.sam-journeys-corner--top .sam-journey-unit--slide-in.is-entering,
.sam-journeys-corner--top .sam-journey-unit--slide-in.is-leaving {
	opacity: 1;
	transform: translateY(-110%);
}

/* Modal + centred soft wall */
html.sam-journeys-scroll-locked,
html.sam-journeys-scroll-locked body {
	overflow: hidden;
}

.sam-journey-unit--overlay {
	position: fixed;
	inset: 0;
	z-index: 99995;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--50);
}

.sam-journey-unit--overlay:has(> .is-position-top) {
	align-items: start;
	padding-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--70));
}

.sam-journey-unit--overlay:has(> .is-position-bottom) {
	align-items: end;
}

.sam-journeys-backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--navy-deep) 68%, transparent);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: opacity var(--wp--custom--engagement--motion) ease;
}

.sam-journey-unit--overlay > .sam-engagement {
	position: relative;
	max-height: calc(100vh - 2 * var(--wp--preset--spacing--50));
	overflow: auto;
	transition: transform var(--wp--custom--engagement--motion) ease;
}

.sam-journey-unit--overlay > .sam-engagement--modal {
	width: min(100%, var(--wp--custom--engagement--width--md));
}

/* Soft wall (centred): card owns the chrome. Explicit width + auto margins so
 * a narrower max-width never left-aligns inside the overlay or a leftover
 * fallback .sam-wall__panel (toast/slide-in/modal rules untouched). */
.sam-journey-unit--overlay > .sam-engagement--soft-wall,
.sam-wall--soft.sam-wall--overlay > .sam-engagement {
	width: min(100%, var(--wp--custom--engagement--width--lg));
	margin-inline: auto;
}

/* If a soft-wall unit still has the fallback white panel wrapping a shell
 * (pre-fix markup / import without .wp-block-*), collapse the panel so the
 * gray engagement is the only card and the close control sits on its edge. */
.sam-wall--soft .sam-wall__panel:has(> .sam-engagement) {
	max-width: none;
	width: auto;
	padding: 0;
	background: transparent;
	border: 0;
	overflow: visible;
}

.sam-wall--soft .sam-wall__panel > .sam-engagement {
	width: min(100%, var(--wp--custom--engagement--width--lg));
	margin-inline: auto;
}

.sam-journey-unit--overlay.is-entering,
.sam-journey-unit--overlay.is-leaving {
	opacity: 0;
}

.sam-journey-unit--overlay.is-entering > .sam-engagement,
.sam-journey-unit--overlay.is-leaving > .sam-engagement {
	transform: translateY(var(--wp--preset--spacing--40)) scale(0.98);
}

/* Wall shells */
.sam-journey-unit--inline {
	display: flex;
	justify-content: center;
	margin-block: var(--wp--preset--spacing--60);
}

.sam-journey-unit--docked {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 99990;
	display: flex;
	justify-content: center;
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

.sam-journey-unit--docked > .sam-engagement {
	box-shadow: var(--wp--preset--shadow--float);
}

.sam-journey-unit--inline.is-entering,
.sam-journey-unit--docked.is-entering,
.sam-journey-unit--inline.is-leaving,
.sam-journey-unit--docked.is-leaving {
	opacity: 0;
	transform: translateY(var(--wp--preset--spacing--40));
}

/* Phones: every corner unit becomes a bottom sheet; modals rise from the bottom. */
@media (max-width: 599px) {
	.sam-journeys-corner,
	.sam-journeys-corner--bottom,
	.sam-journeys-corner--top {
		inset: auto 0 0;
		width: 100%;
		max-width: none;
		gap: 0;
		transform: none;
	}

	.sam-journeys-corner .sam-engagement,
	.sam-journey-unit--overlay > .sam-engagement,
	.sam-journey-unit--docked > .sam-engagement {
		max-width: none;
		max-height: 75vh;
		overflow: auto;
		border-inline: 0;
		border-radius: var(--wp--custom--engagement--radius) var(--wp--custom--engagement--radius) 0 0;
	}

	.sam-journeys-corner .sam-journey-unit--toast.is-entering,
	.sam-journeys-corner .sam-journey-unit--toast.is-leaving,
	.sam-journeys-corner .sam-journey-unit--slide-in.is-entering,
	.sam-journeys-corner .sam-journey-unit--slide-in.is-leaving,
	.sam-journeys-corner .sam-journey-unit--corner.is-entering,
	.sam-journeys-corner .sam-journey-unit--corner.is-leaving {
		opacity: 1;
		transform: translateY(100%);
	}

	.sam-journey-unit--overlay,
	.sam-journey-unit--overlay:has(> .is-position-top) {
		align-items: end;
		padding: 0;
	}

	.sam-journey-unit--docked {
		padding: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sam-journey-unit,
	.sam-journeys-backdrop,
	.sam-journey-unit--overlay > .sam-engagement {
		transition-duration: 1ms;
	}

	.sam-journey-unit.is-entering,
	.sam-journey-unit.is-leaving,
	.sam-journeys-corner .sam-journey-unit.is-entering,
	.sam-journey-unit--overlay.is-entering > .sam-engagement,
	.sam-journey-unit--overlay.is-leaving > .sam-engagement {
		transform: none;
	}
}

/* ── Live-region announcer + staff preview label ───────────────────── */

.sam-journeys-announcer {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sam-journeys-preview-badge {
	position: fixed;
	inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--20));
	inset-inline-start: 50%;
	z-index: 100000;
	max-width: calc(100vw - 2 * var(--wp--preset--spacing--40));
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	transform: translateX(-50%);
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--navy-deep);
	border-radius: var(--wp--custom--engagement--radius);
	box-shadow: var(--wp--preset--shadow--float);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.4;
}

.sam-journeys-preview-badge a {
	color: inherit;
	font-weight: 700;
}

@media (max-width: 599px) {
	.sam-journeys-preview-badge {
		white-space: nowrap;
	}

	.sam-journeys-preview-badge__detail {
		display: none;
	}
}

/* Editor canvas: the card sits in the flow (placement is simulated by the block's editor styles). */
.editor-styles-wrapper .sam-engagement {
	box-shadow: var(--wp--preset--shadow--float);
}