.js-only{
	display: unset
}

/* layout */
/* ------- */

#pattern-left{
	display: block;
}

.meta-controls {
    text-align: center;
    font-size: 0.8em;
    display: grid;
    padding: 0.3em;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 2.4em;
    background-image: var(--bg-pattern);
    /*border-bottom: solid 1px var(--text-color);*/
    margin: 0;
}

.meta-controls>li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.meta-controls>li>span,
.meta-controls>li>.switch>span{
	padding: 0.5em;
	background-color: var(--background-color);
	border-radius: 1rem;
}
.meta-controls>li>button,
.meta-controls>li>div.switch{
	margin: 0;
}

/* landscape */
@media only screen and (min-width: 769px) {
	.meta-controls{
		position: fixed;
		left: 0.5rem;
    	grid-template-columns: 1fr;
    	grid-template-rows: auto auto;
    	width: calc(var(--left-margin) - 1rem);
    	top: 4rem;
    	box-sizing: border-box;
    	background-color: var(--background-color);
    	border-radius: 1rem;
    	background-image: none;
		/*border-left: solid var(--layout-border-width) var(--text-color);
		width: calc(100vw - 5em);
		max-width: 1024px;
		margin-left: auto;*/
	}
	.meta-controls>li {
		flex-direction: column;
		margin-bottom: 1em;
	}
	.meta-controls>li>span{
		padding-right: 0;
		padding-bottom: 0.5em;
	}
}

/* tabs */
.tabs>section[hidden]:target{
	display: none;
}