:root {
	--color-browser-chrome: var(--color-surface-toolbar);
}

html,
body {
	width: 100%;
	height: 100dvh;
	/* The site's 100vh body minimum extends beneath mobile browser chrome. */
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

body {
	display: block;
}

body > main {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	height: 100%;
	background: var(--color-surface-workspace);
	color: var(--color-text-primary);
	font-family: var(--font-family-body);
}

s-hashing-playground,
s-hashing-code-editor {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	min-width: 0;
}

#split-direction,
#share {
	flex: none;
}

#split-direction::part(option) {
	min-width: var(--control-min-height);
	padding-inline: var(--space-2);
}

.toolbar-icon {
	display: inline-flex;
	align-items: center;
}

.toolbar-icon svg {
	display: block;
	width: var(--control-icon-size);
	height: var(--control-icon-size);
	fill: currentColor;
}

#share {
	--button-min-width: var(--control-min-height);
	white-space: nowrap;
}

#share .copy-check,
#share[data-copied] .copy-link {
	display: none;
}

#share[data-copied] .copy-check {
	display: inline-flex;
}

@media (max-width: 480px) {
	.share-label {
		display: none;
	}
}