#toc-nav, .secno { display: none; }

.issue::before { content: "Issue:"; }
.note::before { content: "Example:"; }
.note, .issue { font-style: italic; }

.example {
	margin: 1em;
	padding: 1em;
	border: 1px solid;
	color: gray;
}

h1 { margin-bottom: 0; }

body {
	max-width: 60em;
	margin: auto;
}

h1, h2, h3, h4, h5, h6 {
	color:  #48037c ;
}

:link, :visited { color:  #48037c; }
[data-link-type=dfn] { color: inherit; text-decoration: none; font-style: italic; }

.self-link.self-link { opacity: 0.1; }
.heading > a.self-link.self-link::before { content: "#"; }

.css {
	font-family: monospace;
	color: inherit;
	background: #eee;
	padding: 0 0.2em;
	white-space: nowrap;
}

dfn { font-style: normal; font-weight: bold; }

pre {
	margin: 1em 4em;
}

#toc {
	background: #c5e3f9;
	padding: 1em 2em;
	border-radius: 1em;
	position: relative;
	z-index: 1;
}
@media (min-width: 600px) {
	#toc[open] {
		float: right;
		margin: 0 1em;
		max-width: 33%;
	}
}
.toc li {
	list-style: square;
}
.toc.toc * { margin-block: 0; padding-block: 0; }


/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-color: var(--datacell-border);
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		border-top: 1px solid var(--datacell-border);
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		border: 1px solid var(--datacell-border);
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}