@use '../variables' as *;

.modula-gallery-takeover__mount .modula-settings-editor__app {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.modula-gallery-takeover__mount .modula-settings-editor__status,
.modula-gallery-takeover__mount .modula-settings-editor__shell-loading {
	display: flex;
	flex: 1;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: $mod-space-8;
	margin: 0;
	padding: $mod-space-24;
	min-height: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--mod-se-status-muted, #{$mod-takeover-status-muted});
}

.modula-gallery-takeover__mount .modula-settings-editor__app>.modula-settings-editor__shell-loading {
	min-height: min(320px, 50vh);
}

.modula-gallery-takeover__shell {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	color: var(--mod-se-shell-ink, #{$mod-takeover-shell-ink});

	/* Accent: inherited from `.modula-settings-editor__app` → fixed style-kit --mod-se-accent */
}

/* Redesign: stage beside sidebar; optional shared-ui AuxiliaryPanel column. */
.modula-gallery-takeover__shell--redesign-topbar-only,
.modula-gallery-takeover__shell--redesign-sidebar {

	/* Canvas column under the app topbar: toolbar chrome, then padded stage/artboard. */
	.modula-gallery-takeover__canvas-column {
		flex: 1;
		min-width: 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.modula-gallery-takeover__redesign-stage {
		flex: 1;
		min-height: 0;
		min-width: 0;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: $mod-takeover-canvas-gap;
		padding: $mod-space-12 $mod-takeover-canvas-gap $mod-space-16;
		box-sizing: border-box;
		background: var(--mod-se-stage, var(--mod-se-canvas-bg, #{$mod-takeover-canvas-bg}));
	}

	.modula-gallery-takeover__redesign-stage-fill,
	.modula-gallery-takeover__preview-column {
		flex: 1;
		min-width: 0;
		min-height: 0;
	}

	/*
	 * Redesign artboard: desktop = full stage width + 18px inset.
	 * Tablet/mobile wrap modifiers keep device frames (viewport toolbar).
	 */
	.modula-gallery-takeover__preview-card {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.modula-gallery-takeover__preview-wrap:not(.modula-gallery-takeover__preview-wrap--tablet):not(.modula-gallery-takeover__preview-wrap--mobile) .modula-gallery-takeover__live-preview-body {
		max-width: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: $mod-space-18;
	}

	.modula-gallery-takeover__preview-wrap--tablet .modula-gallery-takeover__live-preview-body,
	.modula-gallery-takeover__preview-wrap--mobile .modula-gallery-takeover__live-preview-body {
		padding: $mod-space-18;
	}

	.modula-ui-auxiliary-panel {
		/* Keep room for the previewer — same scale as sorting aux. */
		flex: 0 0 min(320px, 36vw);
		width: min(320px, 36vw);
		max-width: 420px;
		min-width: 0;
		align-self: stretch;
	}
}

.modula-gallery-takeover__skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	z-index: 100001;

	&:focus {
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		position: fixed;
		left: $mod-space-12;
		top: $mod-space-12;
		padding: $mod-space-10 $mod-space-16;
		background: var(--mod-se-skip-bg, #{$mod-takeover-skip-bg});
		color: var(--mod-se-skip-ink, #{$mod-takeover-skip-ink});
		font-weight: 600;
		text-decoration: none;
		border-radius: $mod-space-2;
		box-shadow: 0 0 0 $mod-space-focus-ring var(--modula-takeover-accent, #{$modula-takeover-accent}),
		$mod-takeover-skip-shadow;
		white-space: normal;
	}
}