@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

:root {
	background-color: hsla(0, 0%, 0%, 1%);
}

body {
	display: flow-root;
	width: max-content;
	background-color: hsl(45, 5%, 85%);
	padding: 0 0.5rem 0.5rem;
}

header h1 {
	font-size: medium;
	font-weight: bold; 
}

textarea {
	font-size: small;
	resize: none; 
}

input[type="number"] {
	text-overflow: ellipsis; 
}

textarea:read-only {
	background-color: silver; border-color: gray;
}

table#data {
	border-collapse: collapse;

	> thead > tr > td:empty {
		border: none !important; 
		background: transparent;
	}

	> * > tr > * {
		width: 4em;
		padding: 0;
		border: thin solid gray; 
	}

	> * > tr > th {
		font-weight: normal;
		background: silver; 
	}

	> tbody > tr > td {
		background: white;
	}

	> tbody > tr > td > input[type="number"] {
		box-sizing: border-box;
		width: 100%;
		border: none;
		vertical-align: middle;
	}

	> tbody > tr > td > input:read-only {
		color: gray; 
	}
}

div#out {
	width: 30rem;

	> * {
		display: block;
		margin: 0.5rem 0;
	}

	> textarea#dText {
		box-sizing: border-box;
		border: thin solid;
		width: 100%;
		height: 8em;
	}

	> svg|svg {
		display: block;
		box-sizing: border-box;
		width: 100%;
		border: thin solid;
		background-color: silver;
		border-color: gray;
	}
}