/* WearUS Design Studio mobile control clarity. */
.wu-canvas-controls {
	width: min(100%, 720px);
	margin: 0 auto 6px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px;
}

.wu-canvas-controls .wu-view-tabs,
.wu-canvas-controls .wu-canvas-toolbar {
	min-width: 0;
	margin: 0;
}

.wu-canvas-controls .wu-view-tabs {
	justify-content: flex-start;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.wu-canvas-controls .wu-view-tabs::-webkit-scrollbar { display: none; }
.wu-canvas-controls .wu-view-tabs button { flex: 0 0 auto; }

.wu-canvas-controls .wu-canvas-toolbar {
	width: auto;
	justify-content: flex-end;
}

.wu-precise-controls {
	margin-top: 8px;
	border-top: 1px solid var(--wu-line);
}

.wu-precise-controls summary {
	min-height: 48px;
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 800;
}

.wu-precise-controls > p {
	margin: 0 0 10px;
	color: var(--wu-muted);
	font-size: 13px;
	line-height: 1.45;
}

@media (max-width: 767px) {
	.wu-canvas-controls {
		gap: 8px;
		padding-right: 48px;
	}

	.wu-canvas-controls .wu-view-tabs {
		padding: 0 2px;
		overscroll-behavior-inline: contain;
	}

	.wu-customizer.is-mobile-preview-open .wu-canvas-controls .wu-view-tabs { margin-right: 0; }

	.wu-canvas-controls .wu-view-tabs button {
		min-height: 44px;
		padding-inline: 12px;
		flex: 0 0 auto;
	}

	.wu-canvas-controls .wu-canvas-toolbar {
		gap: 6px;
	}

	.wu-canvas-controls #wu-zoom-status {
		min-width: 40px;
		font-size: 11px;
		text-align: right;
	}

	.wu-canvas-controls #wu-zoom-status::first-line { line-height: 1; }

	.wu-canvas-controls .wu-canvas-toolbar > div { flex: 0 0 auto; }
	.wu-canvas-controls .wu-canvas-toolbar button { min-width: 42px; min-height: 44px; padding: 5px 8px; }
	.wu-canvas-controls .wu-canvas-toolbar #wu-zoom-reset { min-width: 50px; }

	.wu-completion-ui.wu-fabric-ui.is-mobile-preview-open .wu-layer-toolbar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wu-completion-ui.wu-fabric-ui.is-mobile-preview-open .wu-layer-toolbar button,
	.wu-completion-ui.wu-fabric-ui.is-mobile-preview-open .wu-layer-toolbar [data-fabric-action] {
		grid-column: auto;
		min-height: 48px;
		justify-content: flex-start;
		padding-inline: 12px;
	}

	.wu-completion-ui.wu-fabric-ui.is-mobile-preview-open .wu-layer-toolbar button > span:not(.dashicons) {
		display: inline;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wu-completion-ui.wu-fabric-ui.is-mobile-preview-open .wu-layer-toolbar [data-fabric-action="remove"] {
		grid-column: 1 / -1;
	}

	.wu-completion-ui.wu-fabric-ui.is-mobile-preview-open .wu-layer-tools {
		max-height: min(46dvh, 390px);
		flex-basis: min(46dvh, 390px);
	}

	.wu-layer-inspector > legend { padding-inline: 4px; }
	.wu-precise-controls .wu-inspector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 374px) {
	.wu-canvas-controls { gap: 5px; }
	.wu-canvas-controls .wu-view-tabs button { padding-inline: 7px; }
	.wu-canvas-controls #wu-zoom-status { display: none; }
	.wu-canvas-controls .wu-canvas-toolbar button { min-width: 40px; }
	.wu-canvas-controls .wu-canvas-toolbar #wu-zoom-reset { min-width: 48px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.wu-canvas-controls .wu-view-tabs { scroll-behavior: auto; }
}