@charset "UTF-8";

/* Design Styles - For constructing base of the page. */

:root {
	--lightness: 90%;
	font-family: sans-serif;
	color: var(--root-color);
	scroll-behavior: smooth;
	--active-hue: 200;
	--bgcolor: #222;
	--soft-color: hsl(var(--active-hue) 100% var(--lightness));
	--root-color: #bbb;
}
#\/ {
	text-decoration: none;
	color: white;
	&:hover { text-decoration: underline; }
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bgcolor);
}
header,#Content,footer {
	backdrop-filter: blur(10px);
	background: #000c;
}

header {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: monospace;
	color: white;
	font-size: 3em;
}
footer { bottom: 0; }

#Content .indexed,/* .indexed is used to refer to links that are contained in an index so that they style the same even when inline. */
#Content nav.index>section li>a:first-child,#Leftbar>.sitemap>nav a {
		color: var(--clr, initial);
		border: .05em solid transparent;
		padding: 0 .2em;
		border-radius: .3em;
		text-decoration: none;
		&:hover { border-color: currentColor; }
	}

#Leftbar,#Rightbar { &>*>h1 { font-size: 1.5em; } } /* section>h1 may be smaller than normal without this */
#Leftbar {
	.sitemap section {
		color: #000a;
		a {
			display: inline-block;
			white-space: nowrap;
		}
	}
	&>.toc nav>a {
		display: block;
		text-decoration: none;
		margin-top: .25em;
		&::before {
			content: '> ';
			color: hsl(var(--active-hue) 100% 50%);
		}
		&:hover { text-decoration: underline; }
	}
}
#Rightbar ul:empty::before { content: 'This page has not yet been translated...'; }

#Content {
	padding: 1em 3.5em;
	min-height: 100%;
}

/* Functional Styles - Serve a functional purpose during page-writing. */
wrapper { display: contents; }
h1,h2,h3,h4,h5,h6,#Content details>summary { 
	color: var(--soft-color);
	&>code { color: var(--soft-color); }
}
h1,h2,h3,h4,h5,h6 {
	.normal {
		color: #bbb;
		font-weight: normal;
	}
	&+p.deck {
		color: lightgray;
		font-style: italic;
	}
}
a, ::marker { color: var(--soft-color); }
strong,em,.light { color: white; }
ol.par>li,ol.deepar li { &::marker { content: '(' counter(list-item) ')'; } }

.todo {
	--color: hsl(var(--active-hue) 100% 50%);
	padding: 2.5em .5em .5em 1em;
	border-radius: 0 .35em .35em 0;
	margin: 1em 0;
	border: 1px solid var(--color);
	background: linear-gradient(to right, var(--color) .5rem, transparent .5rem), linear-gradient(black, black);
	color: white;
	position: relative;
	font-family: monospace;
	font-size: .9rem;
	&::before {
		font-size: 1rem;
		color: var(--color);
		position: absolute;
		top: 0;
		left: 0;
		padding: .3rem .4rem .1rem .9rem;
		border: 1px solid currentColor;
		border-width: 0 1px 1px 0;
		content: 'To Do';
		font-family: sans-serif;
	}
}

code {
	font-style: normal;
	color: #bbb;
	font-size: 1.25em;
}
t,w,c,e,byte,reg,asm,addr,figure>pre {
	font-size: 1rem;
	font-family: monospace;
	font-style: normal;
}

t {	color: green; } /* ASCII chars with a TEXT name (EOT, SI, etc.); appear as GREEN in my text editor */
w { color: #0aa; } /* Whitespace chars; appear as dark turquoise in my editor */
c { color: white; } /* Normal chars (or outside of ascii); appear as white (or red if outside of range; see below) in my editor. */
e {  color: red; } /* Outside of ASCII range; appear as red in my editor. Editor prefixes hex code w/ backslash. */
	  			   /* These are chars with values 0x80 to 0xff. They are contained in the "Extended ASCII table", but their extended ASCII glyphs are not used here. */
n { color: #253da1; } /* Null and Delete chars */
byte { color: white; }
reg { color: #304fff; }
addr { color: #ffb300; }
asm { color: #ff5543; }
asm {
	background-color: #1a100f;
	border: 1px solid #731a11;
	border-radius: 2px;
}
t,w,c,e,n,byte,reg,addr {
	display: inline-block;
	white-space: nowrap;
}
c { white-space: pre; }

hr {
	margin: 0 35%;
	border-radius: 50%;
	color: var(--soft-color);
}

#Content {
	sup[info] {
		&::before {
			content: '['attr(info)']';
			color: gold;
			cursor: pointer;
		}
		&:hover::before { color: red; }
	}
	span,div { &[info] {
		font-style: italic;
		color: #999;
		display: none;
		font-size: .8em;
		&::before {
			color: gold;
			content: '['attr(info)']';
		}
		&>:first-child, &>:last-child { margin: 0; }
		&.active { display: unset; }
	} }
	div[info].active {
		display: table;
		margin: 1em 0;
	}
	&>h1 {
		display: flex;
		font-size: 2em;
		margin-top: 2em;
		margin-bottom: 1em;
		color: white;
		&::after,&::before {
			content: '';
			height: .21rem;
			margin: auto 0;
		}
		&::after {
			background: linear-gradient(to right, var(--soft-color), transparent);
			flex-grow: 1;
			margin-left: .8rem;
		}
		&::before {
			background-color: var(--soft-color);
			width: 1.2rem;
			margin-right: .8rem;
		}
		&.title,&:first-child {
			color: var(--soft-color);
			margin-top: revert;
			margin-bottom: revert;
			display: block;
			font-size: 2.5em;
			text-align: center;
			border-bottom: solid 1px currentcolor;
			@supports selector(:not(:first-child)) { &:not(:first-child) { margin-top: 2em; } }
			&::after,&::before { content: none; }
		}
	}
	span,a { &.why::before {
			font-size: 0.5em;
			content: "Why?";
			color: lightblue;
			display: inline-block;
			transform: translateY(-.6em);
			margin-left: .3em;
			letter-spacing: .4px;
	} }
	a.why { &:hover::before { border-bottom: solid 1px currentColor; } }
	section.roadmap,section#Roadmap,section.summary,section#Summary {
		position: relative;
		border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='4'><polyline points='0,0 2,2 0,4' stroke='white' stroke-width='0.15'/></svg>");
		border-image-slice: 1;
		border-image-width: 0 6px 0 0;
		border-image-repeat: repeat;
		padding-right: 2em;
		&.roadmap,&#Roadmap { &::before,&::after { content: 'Roadmap'; } }
		&.summary,&#Summary { &::before,&::after { content: 'Summary'; } }
		&::before {
			color: var(--soft-color);
			font-size: 1.5em;
			font-weight: bold;
		}
		&::after {
			text-transform: uppercase;
			color: white;
			font-weight: bold;
			position: absolute;
			right: -3.35em;
			top: 50%;
			background: #070707;
			padding: 0 1em;
			transform: translateY(-50%) rotate(90deg);
		}
	}
	.imglist {
		overflow-x: hidden;
		cursor: pointer;
		position: relative;
		&::before {
			position: absolute;
			top: 0;
			right: 0;
			font-family: monospace;
			font-size: 1.2em;
			content: "Click to Expand";
			border-bottom-left-radius: .7em;
			background: #000A;
			padding: .3em 1em .5em;
			color: var(--soft-color);
			border: 1px solid currentColor;
			opacity: .2;
			backdrop-filter: blur(2px);
		}
		&:hover::before { opacity: 1; }
		&>.imgwrap {
			text-align: center;
			overflow-x: auto;
			&>* {
				display: inline-block;
				margin: 0 1em;
				height: var(--height, 20em);
				transition: height .3s ease-in-out;
				max-width: 94vw;
				&:first-child,&:last-child { margin: 0; }
			}
		}
		&.expanded {
			&::before { content: "Click to Shrink"; }
			&>.imgwrap>* {
				height: var(--expanded-height, 50em);
				max-width: unset;
			}
		}
	}
	/* Large Functional Features */
	aside[type],figure,details { /* Blocks */
		display: block;
		background: linear-gradient(to right, var(--box-color) 0%, var(--box-color) .3rem, var(--bgcolor) .3rem);
		padding-left: .3rem;
		box-shadow: 2px 2px 5px #0009;
		&.shadowless { box-shadow: unset; }
	}
	aside[type], details[open] { &::before {
			content: var(--name);
			display: inline-block;
			padding: 0.325rem;
			border-right: 1px solid currentcolor;
			border-bottom: 1px solid currentcolor;
			margin: 0 .7em 0 -.675rem;
			font-variant: small-caps;
			color: var(--box-color);
	} }
	aside[type], details {
		margin: 1em 0;
		padding: 0 1em 1px 1em;
		--name: attr(type);
		&[type='quirk'] {
			--box-color: #ffc800;
			--name: 'Hardware/Software Quirk';
		}
		&[type='detail'] {
			--box-color: #11ff00;
			--name: 'Additional Details';
		}
		&[type='prereq'] {
			--box-color: #bbb;
			--name: 'Prerequisites';
			font-style: italic;
			.normal { font-style: initial; }
			&aside,summary { &::before { font-style: initial; } }
		}
		&[type='warning'] {
			--goldcol: #ffe100;
			--blackcol: black;
			--box-color: var(--goldcol);
			--name: "Warning";
			background: linear-gradient(to right, transparent 0%, transparent .3rem, var(--bgcolor) .3rem), repeating-linear-gradient(45deg, var(--goldcol), var(--goldcol) 8px, var(--blackcol) 8px, var(--blackcol) 18px);
		}
		&[type='history'] {
			--box-color: #a448fa;
			--name: 'History';
		}
		&[type='exp'] {
			--box-color: #29e2ff;
			--name: 'Explanation';
		}
		&[type='example'] {
			--box-color: #29e2ff;
			--name: "Example";
		}
		&[type='custom'] { &::before { content: var(--content, 'custom'); } }
	}
	aside[type] { min-height: 4em; }
	details {
		--box-color: #11ff00;
		padding: 0 1em 0.01px;
		&>summary {
			margin-left: -.7rem;
			padding: .25em;
			font-variant: small-caps;
			border: 1px solid color-mix(in srgb, var(--box-color), black 60%);
			transition: border-color .2s ease-in-out;
			cursor: pointer;
			display: block;
			width: calc(100% + 1em);
			position: relative;
			&:hover { border-color: var(--box-color); }
			&::before {
			  content: var(--name);
				color: var(--box-color);
			}
			&::after {
				position: absolute;
				left: 0;
				top: 0;
				margin: .5rem 0;
				content: '\2219\2219\2219';
				display: inline-block;
				font-size: .8em;
				text-align: center;
				width: 100%;
				color: var(--box-color);
			}
			&::marker, &::-webkit-details-marker { display: none; }
		}
		&[open] {
			position: relative;
			&>summary {
				border: none;
				position: absolute;
				top: 0;
				left: 0em;
				width: calc(100%);
				padding: 0;
				margin: 0;
				&::before {
					content: var(--name);
					visibility: hidden;
					border: transparent solid 1px;
					display: block;
					padding: .325rem;
				}
				&::after { content: none; }
			}
		}
	}
	aside[type='warning']::before,details[type='warning'][open]::before,details[type='warning']>summary:hover {
		content: 'Warning';
		background: linear-gradient(var(--bgcolor), var(--bgcolor)), repeating-linear-gradient(45deg, var(--goldcol), var(--goldcol) 8px, var(--blackcol) 8px, var(--blackcol) 18px);
		background-clip: padding-box, border-box;
		border-right: 1px solid transparent;
		border-bottom: 1px solid transparent;
		border-left: 2px solid var(--bgcolor);
	}
	details[type='warning']>summary {
		--c2: color-mix(in srgb, var(--goldcol), transparent 60%);
		--c3: color-mix(in srgb, var(--blackcol), transparent 60%);
		background-image: linear-gradient(var(--bgcolor), var(--bgcolor)), repeating-linear-gradient(45deg, var(--c2), var(--c2) 8px, var(--c3) 8px, var(--c3) 18px);
		background-clip: padding-box, border-box;
		border-right: 1px solid transparent;
		border-bottom: 1px solid transparent;
		border-top: 1px solid transparent;
		border-left: 2px solid var(--bgcolor);
	}
	details[type='warning'][open]>summary {
		background: none;
		border-left: none;
	}
	figure {
		margin-left: 0;
		margin-right: 0;
		--box-color: var(--soft-color);
		padding: 0 1.2em;
		figcaption {
			padding: .2em 0;
			border-top: var(--box-color) 1px solid;
			font-style: italic;
			&,&>* { font-size: .7rem; }
			color: var(--box-color);
			max-width: 100%;
			text-wrap: wrap;
		}
		&.visual {
			text-align: center;
			font-size: 1.5em;
			white-space: pre;
			background: var(--bgcolor);
		}
		&[type] {
			--box-color: hsl(var(--shade) 100% 90%);
			--bgcolor: hsl(var(--shade) 27% 8%);
			color: hsl(var(--shade) 100% 63%);
			&>pre {
				white-space: pre;
				overflow-x: auto;
				padding: .3em;
				margin: .7em 0;
				display: inline-block;
				width: 100%;
				font-size: 1.2em;
				cmnt { color: hsl(var(--shade) 59% 25%); }
			}
		}
		&[type=""],&[type='hex' i],&[type="cpu" i] {
			--box-color: var(--soft-color);
			--bgcolor: #222;
		}
		&[showlang] {
			padding-top: 2em;
			position: relative;
			&::before {
				position: absolute;
				top: 0;
				left: 0;
				font-size: 1rem;
				padding: .3em .7em;
				border-right: var(--box-color) 1px solid;
				border-bottom: var(--box-color) 1px solid;
				font-family: monospace;
				content: var(--name, "Machine Code");
				color: var(--box-color);
			}
		}
		&[type=""]>pre,&[type='hex' i]>pre,&[type="cpu" i]>pre,pre {
			padding: 1.2em 0;
			margin: 0;
			white-space: normal;
		}
		
		/* Specific Languages: */
		&[type='asm' i] {
			--shade: 5deg;
			--name: "Assembly";
		}
		&[type='c++' i], &[type='cpp' i] {
			--shade: 63deg;
			--name: "C++";
		}
		&[type='c' i] {
			--shade: 80deg;
			--name: "C";
		}
		&[type='c/cpp' i], &[type='c/c++' i] {
			--shade: 180deg;
			--name: "C/C++";
		}
		&[type='hex' i] { --name: "Machine Code (Hex)"; }
		&[type='cmc' i] {
			--shade: 17deg;
			--name: "Machine Code (Commented)"; }
			>pre { white-space: pre; }
		}
	}
	nav.index>section {
		--bdcol: var(--clr, #fff);
		--bgcol: #ffffff07;
		border: 1px solid var(--bdcol);
		background: var(--bgcol);
		border-top: none;
		border-bottom: none;
		padding-bottom: 1.2em;
		&:first-child {
			border-top: 1px solid var(--bdcol);
			&::before {
				margin: 0;
				border-top: none;
			}
		}
		&:last-child { border-bottom: 1px solid var(--bdcol); }
		&::before {
				content: attr(title);
				display: inline-block;
				border-bottom: 1px solid var(--bdcol);
				border-right: 1px solid var(--bdcol);
				border-top: 1px solid var(--bdcol);
				padding: .55em;
				color: var(--shade, #fff);
				font-variant: small-caps;
				font-size: 1.18em;
				margin-top: .5px;
		}
		@supports (--bgcol: color-mix(in srgb, var(--clr, #fff) 8%, transparent 92%)) {
			--bdcol: color-mix(in srgb, var(--clr, #fff) 38.8%, transparent 61.2%);
			--bgcol: color-mix(in srgb, var(--clr, #fff) 8%, transparent 92%);
		}
		& ::marker { color: var(--clr, initial); }
		li>a:first-child:hover { /* Workaround for firefox */ border-color: currentColor; }
	}
	.indexed { font-style: initial; }
	table {
		border-collapse: collapse;
		&,th,td { border: 2px solid #fff3; }
		th,td { padding: 0.1em .4em; }
	}
}