body.viewport {
	background: var(--jqx-industrial-canvas, var(--jqx-body-background-color));
	color: var(--jqx-text-color);
	font-family: var(--jqx-font-family);
	font-size: 13px;
	margin: 0;
	padding: 16px;
}

.tile-demo {
	max-width: 1120px;
}

.tile-demo-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.tile-demo h2 {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 10px;
}

.tile-demo h3 {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jqx-text-tertiary-color);
	margin: 26px 0 10px;
}

.tile-note {
	font-size: 12px;
	line-height: 1.6;
	color: var(--jqx-text-secondary-color);
	margin: 0 0 14px;
	max-width: 100ch;
}

.tile-note code {
	font-family: Consolas, Monaco, monospace;
	font-size: 11.5px;
	color: var(--jqx-industrial-accent-text);
}

/* Auto-fit rather than a fixed count: a KPI strip is read across a wall display and on a
   laptop, and the tile should not care which. */
.tile-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

.tile-strip jqx-status-tile {
	min-height: 104px;
}

.tile-button {
	background: transparent;
	border: 1px solid var(--jqx-border);
	border-radius: var(--jqx-border-radius);
	color: var(--jqx-text-secondary-color);
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	height: 30px;
	letter-spacing: .06em;
	padding: 0 14px;
	text-transform: uppercase;
}

.tile-button:focus-visible {
	outline: 2px solid var(--jqx-industrial-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--jqx-industrial-focus-halo);
}

.tile-code {
	background: var(--jqx-industrial-panel-background, var(--jqx-surface));
	border: 1px solid var(--jqx-industrial-panel-border, var(--jqx-border));
	border-radius: 3px;
	color: var(--jqx-text-color);
	font-family: Consolas, Monaco, monospace;
	font-size: 11.5px;
	line-height: 1.6;
	margin: 0;
	overflow: auto;
	padding: 10px 12px;
}