/* Refs #528. Shared customer content, not the editor chrome. States are immediate. */
.alki-flow {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--flow-gap, 16px);
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: 100%;
	overflow-wrap: anywhere;
}
.alki-flow[data-flow-align="center"] {
	align-items: center;
}
.alki-flow[data-flow-align="end"] {
	align-items: flex-end;
}
.alki-flow .alki-flow-object {
	box-sizing: border-box;
	min-inline-size: 0;
	max-inline-size: 100%;
	margin: 0;
	overflow-wrap: anywhere;
}
.alki-flow .alki-flow-text {
	color: var(--flow-color, #111111);
	font-size: var(--flow-font-size, 16px);
	font-weight: var(--flow-weight, 400);
	font-family: inherit;
	line-height: 1.5;
	white-space: pre-wrap;
}
.alki-flow .alki-flow-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--flow-radius, 8px);
	background: var(--flow-background, #111111);
	color: var(--flow-color, #ffffff);
	font: inherit;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	box-shadow: none;
	transform: none;
	transition: none;
}
@media (hover: hover) {
	.alki-flow .alki-flow-button:hover {
		background: var(--flow-hover-background, var(--flow-background, #111111));
		color: var(--flow-hover-color, var(--flow-color, #ffffff));
	}
}
.alki-flow .alki-flow-button:active {
	background: var(--flow-pressed-background, var(--flow-background, #111111));
	color: var(--flow-pressed-color, var(--flow-color, #ffffff));
}
.alki-flow .alki-flow-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px #111111;
}
@media (max-width: 520px) {
	.alki-flow .alki-flow-button {
		inline-size: 100%;
	}
}

/* Version 2 is opt-in. Each container owns its breakpoint variables. */
.alki-flow[data-flow-version="2"],
.alki-flow[data-flow-version="2"] .alki-flow-object {
	--flow-display: var(--flow-d-display);
	--flow-direction: var(--flow-d-direction);
	--flow-columns: var(--flow-d-columns);
	--flow-gap: var(--flow-d-gap);
	--flow-align: var(--flow-d-align);
	--flow-object-display: var(--flow-d-hidden);
	--flow-width: var(--flow-d-width);
	--flow-grow: var(--flow-d-grow);
	--flow-max: var(--flow-d-max);
	--flow-self: var(--flow-d-self);
}
.alki-flow[data-flow-version="2"].alki-flow-container,
.alki-flow[data-flow-version="2"] .alki-flow-container {
	display: var(--flow-display);
	flex-direction: var(--flow-direction);
	flex-wrap: wrap;
	grid-template-columns: repeat(var(--flow-columns), minmax(0, 1fr));
	align-items: var(--flow-align);
	gap: var(--flow-gap);
}
.alki-flow[data-flow-version="2"] .alki-flow-object {
	display: var(--flow-object-display);
	inline-size: var(--flow-width);
	max-inline-size: min(100%, var(--flow-max));
	align-self: var(--flow-self);
	flex: var(--flow-grow) 1 auto;
}
.alki-flow[data-flow-version="2"] .alki-flow-image {
	border: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: var(--flow-image-radius);
}
.alki-flow[data-flow-version="2"] .alki-flow-image img {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--flow-image-aspect);
	object-fit: var(--flow-image-fit);
	border-radius: var(--flow-image-radius);
}
.alki-flow[data-flow-version="2"] .alki-flow-image-trigger {
	display: block;
	inline-size: 100%;
	min-block-size: 44px;
	min-inline-size: 44px;
	border: 0;
	padding: 0;
	background: none;
	border-radius: var(--flow-image-radius);
	cursor: zoom-in;
}
.alki-flow[data-flow-version="2"] .alki-flow-image-trigger:focus-visible,
.alki-flow[data-flow-version="2"] .alki-flow-playback:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px #111111;
}
.alki-flow[data-flow-version="2"] .alki-flow-playback {
	min-block-size: 44px;
	margin-block-start: 8px;
	padding: 8px 12px;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: #ffffff;
	color: #111111;
	font: inherit;
	cursor: pointer;
}
.alki-flow[data-flow-version="2"] .alki-flow-playback[aria-pressed="true"] {
	background: #111111;
	color: #ffffff;
}
@media (max-width: 900px) {
	.alki-flow[data-flow-version="2"],
	.alki-flow[data-flow-version="2"] .alki-flow-object {
		--flow-display: var(--flow-t-display);
		--flow-direction: var(--flow-t-direction);
		--flow-columns: var(--flow-t-columns);
		--flow-gap: var(--flow-t-gap);
		--flow-align: var(--flow-t-align);
		--flow-object-display: var(--flow-t-hidden);
		--flow-width: var(--flow-t-width);
		--flow-grow: var(--flow-t-grow);
		--flow-max: var(--flow-t-max);
		--flow-self: var(--flow-t-self);
	}
}
@media (max-width: 520px) {
	.alki-flow[data-flow-version="2"],
	.alki-flow[data-flow-version="2"] .alki-flow-object {
		--flow-display: var(--flow-m-display);
		--flow-direction: var(--flow-m-direction);
		--flow-columns: var(--flow-m-columns);
		--flow-gap: var(--flow-m-gap);
		--flow-align: var(--flow-m-align);
		--flow-object-display: var(--flow-m-hidden);
		--flow-width: var(--flow-m-width);
		--flow-grow: var(--flow-m-grow);
		--flow-max: var(--flow-m-max);
		--flow-self: var(--flow-m-self);
	}
}
/* Device tools preview the same explicit breakpoints even on a wide monitor. */
#siteCanvas.desktop .alki-flow[data-flow-version="2"],
#siteCanvas.desktop .alki-flow[data-flow-version="2"] .alki-flow-object {
	--flow-display: var(--flow-d-display);
	--flow-direction: var(--flow-d-direction);
	--flow-columns: var(--flow-d-columns);
	--flow-gap: var(--flow-d-gap);
	--flow-align: var(--flow-d-align);
	--flow-object-display: var(--flow-d-hidden);
	--flow-width: var(--flow-d-width);
	--flow-grow: var(--flow-d-grow);
	--flow-max: var(--flow-d-max);
	--flow-self: var(--flow-d-self);
}
#siteCanvas.tablet .alki-flow[data-flow-version="2"],
#siteCanvas.tablet .alki-flow[data-flow-version="2"] .alki-flow-object {
	--flow-display: var(--flow-t-display);
	--flow-direction: var(--flow-t-direction);
	--flow-columns: var(--flow-t-columns);
	--flow-gap: var(--flow-t-gap);
	--flow-align: var(--flow-t-align);
	--flow-object-display: var(--flow-t-hidden);
	--flow-width: var(--flow-t-width);
	--flow-grow: var(--flow-t-grow);
	--flow-max: var(--flow-t-max);
	--flow-self: var(--flow-t-self);
}
#siteCanvas.mobile .alki-flow[data-flow-version="2"],
#siteCanvas.mobile .alki-flow[data-flow-version="2"] .alki-flow-object {
	--flow-display: var(--flow-m-display);
	--flow-direction: var(--flow-m-direction);
	--flow-columns: var(--flow-m-columns);
	--flow-gap: var(--flow-m-gap);
	--flow-align: var(--flow-m-align);
	--flow-object-display: var(--flow-m-hidden);
	--flow-width: var(--flow-m-width);
	--flow-grow: var(--flow-m-grow);
	--flow-max: var(--flow-m-max);
	--flow-self: var(--flow-m-self);
}