@import url(https://fonts.googleapis.com/css?family=Questrial);
@import url(https://fonts.googleapis.com/css?family=Arvo);

/*
 Shared styles
 */

section h1,
#features li strong,
header h2,
footer p {
	font: 100% Rockwell, Arvo, serif;
}

/*
 Styles
 */

* {
	margin: 0;
	padding: 0;
}

body {
	font: 100%/1.5 Questrial, sans-serif;
	tab-size: 4;
	hyphens: auto;
}

a {
	color: inherit;
}

section h1 {
	font-size: 250%;
}

	section section h1 {
		font-size: 150%;
	}

	section h1 code {
		font-style: normal;
	}

	section h1 > a,
	section h2[id] > a {
		text-decoration: none;
	}

	section h1 > a:before,
	section h2[id] > a:before {
		content: '§';
		position: absolute;
		padding: 0 .2em;
		margin-left: -1em;
		border-radius: .2em;
		color: silver;
		text-shadow: 0 1px white;
	}

	section h1 > a:hover:before,
	section h2[id] > a:hover:before {
		color: black;
		background: #f1ad26;
	}

p {
	margin: 1em 0;
}

section h1,
h2,
h3 {
	margin: 1em 0 .3em;
}

h2,
h3 {
	font-weight: normal;

	> a {
		text-decoration: none;
	}
}

dt {
	margin: 1em 0 0 0;
	font-size: 130%;
}

	dt:after {
		content: ':';
	}

dd {
	margin-left: 2em;
}

code, pre {
	font-family: Consolas, Monaco, 'Andale Mono', 'Lucida Console', monospace;
	hyphens: none;
}

pre {
	max-height: 30em;
	overflow: auto;
}

mark {
	outline: .4em solid red;
	outline-offset: .4em;
	margin: .4em 0;
	background-color: transparent;
	display: inline-block;
}

header,
body > main {
	display: block;
	max-width: 900px;
	margin: auto;
}

header, footer {
	position: relative;
	padding: 30px -webkit-calc(50% - 450px); /* Workaround for bug */
	padding: 30px calc(50% - 450px);
	color: white;
	text-shadow: 0 -1px 2px black, 0 0 4px black,
	             0 -1px 0 black, 0 1px 0 black, -1px 0 0 black, 1px 0 0 black;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)), url(img/spectrum.png) fixed;
}

header:before,
footer:before {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 20px;
	background-size: 20px 40px;
	background-repeat: repeat-x;
	background-image: linear-gradient(45deg, transparent 34%, white 34%, white 66%, transparent 66%),
	                  linear-gradient(135deg, transparent 34%, white 34%, white 66%, transparent 66%);
}

	header .intro,
	html.simple header {
		overflow: hidden;
	}

	header h1 {
		float: left;
		margin-right: 30px;
		color: #7fab14;
		text-align: center;
		font-size: 140%;
		text-transform: uppercase;
		letter-spacing: .25em;
	}

	header h2 {
		margin-top: .5em;
		color: #f1ad26;
	}

		header h1 a {
			text-decoration: none;
		}

		header img {
			display: block;
			width: 150px;
			height: 128px;
			margin-bottom: .3em;
			border: 0;
		}

	header h2 {
		font-size: 300%;
	}

	header .intro p {
		margin: 0;
		font: 150%/1.4 Questrial, sans-serif;
		font-size: 150%;
	}

	#features {
		margin-top: 1.6em;
	}

		#features li {
			margin: 0 0 1.6em 0;
			list-style: none;
			display: inline-block;
			width: 49%;
			box-sizing: border-box;
			vertical-align: top;
		}

		#features li:nth-child(odd) {
			padding-right: 2em;
		}
		#features li:nth-child(even) {
			padding-left: 2em;
		}

			#features li:before {
				content: '✓';
				float: left;
				margin-left: -.8em;
				color: #7fab14;
				font-size: 320%;
				line-height: 1;
			}

				#features li strong {
					display: block;
					margin-bottom: .1em;
					font-size: 160%;
				}

	header .download-button {
		float: right;
		margin: 0 0 .5em .5em;
	}

	#theme {
		position: relative;
		z-index: 1;
		float: right;
		margin-right: -9em;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: .2em;
		text-shadow: 0 -1px 2px black;
	}

		#theme > p {
			position: absolute;
			left: 100%;
			transform: translateX(50%) rotate(90deg) ;
			transform-origin: top left;
			font-size: 130%;
		}

		#theme > label {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 8.5em;
			height: 8.5em;
			line-height: 1em;
			border-radius: 50%;
			background: hsla(0,0%,100%,.5);
			cursor: pointer;
			font-size: 90%;
			padding: 0;
		}

		#theme > label:before {
			content: '';
			position: absolute;
			top: 0; right: 0; bottom: 0; left: 0;
			z-index: -1;
			border-radius: inherit;
			background: url(img/spectrum.png) fixed;
		}

		#theme > label:nth-of-type(n+2) {
			margin-top: -2.5em;
		}

		#theme > input:not(:checked) + label:hover {
			background: hsla(77, 80%, 60%, .5);
		}

		#theme > input {
			position: absolute;
			left: 0;
			clip: rect(0,0,0,0);
		}

		#theme > input:checked + label {
			background: #7fab14;
		}

		@media (max-width: 1300px) and (min-width: 1051px) {
			#theme {
				position: relative;
				z-index: 1;
				float: left;
				margin: 1em 0;
				width: 100%;
			}
			#theme + * {
				clear: both;
			}

				#theme > p {
					margin-top: .5em;
				}

				#theme > label {
					float: left;
					font-size: 82.6%;
				}

				#theme > label:before {
					display: none;
				}

				#theme > label:nth-of-type(n+2) {
					margin-top: 0;
				}
		}

		@media (max-width: 1050px) {
			#theme {
				position: relative;
				z-index: 1;
				float: left;
				margin: 1em 0;
			}
			#theme + * {
				clear: both;
			}

				#theme > p {
					left: inherit;
					right: -1em;
				}

				#theme > label {
					float: left;
				}

				#theme > label:before {
					display: none;
				}

				#theme > label:nth-of-type(n+2) {
					margin-top: 0;
				}
				#theme > label:nth-of-type(n+5) {
					margin-top: -2.5em;
				}
				#theme > label:nth-of-type(4n+1) {
					margin-left: 12.5em;
				}
		}

		@media (max-width: 800px) {
			#theme > label:nth-of-type(4) {
				margin-right: 4em;
			}
			#theme > label:nth-of-type(4n+1) {
				margin-left: 4em;
			}
		}


footer {
	margin-top: 2em;
	background-position: bottom;
	color: white;
}

	footer:before {
		bottom: auto;
		top: 0;
		background-position: bottom;
	}

	footer p {
		font-size: 150%;
	}

	footer ul {
		column-count: 3;
	}

.download-button {
	display: block;
	padding: .2em .8em .1em;
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 10px;
	background: #39a1cf;
	box-shadow: 0 2px 10px black,
	   inset 0 1px hsla(0,0%,100%,.3),
	   inset 0 .4em hsla(0,0%,100%,.2),
	   inset 0 10px 20px hsla(0,0%,100%,.25),
	   inset 0 -15px 30px rgba(0,0,0,0.3);
	color: white;
	text-shadow: 0 -1px 2px black;
	text-align: center;
	font-size: 250%;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	hyphens: manual;
}

.download-button:hover {
	background-color: #7fab14;
}

.download-button:active {
	box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
}

#toc {
	position: fixed;
	bottom: 15px;
	max-width: calc(50% - 450px - 40px);
	font-size: 80%;
	z-index: 999;
	background: white;
	color: rgba(0,0,0,.5);
	padding: 0 10px 10px;
	border-radius: 0 3px 3px 0;
	box-sizing: border-box;

	&:hover {
		color: rgba(0,0,0,1);
	}

	h2 {
		font-family: Rockwell, Arvo, serif;
		font-size: 180%;
		margin-top: .75rem;
	}

	li {
		list-style: none;
		line-height: 1.2;
		padding: .2em 0;

		a {
			padding: .2em 0;
		}
	}

	> nav.toc {
		li > ul {
			margin-inline-start: .5rem;
		}
	}

	&:has(+ main .back-to-top) {
		position: static;
		max-width: 900px;
		margin-inline: auto;
		font-size: 100%;
		color: black;

		:is([data-inputpath="known-failures.md"] &) > .toc {
			column-count: 4;
	
			li > ul {
				/* Show top-level headings only */
				display: none;
			}
		}
	}

	@media (max-width: 1200px) {
		&:not(:has(+ main .back-to-top)) {
			display: none;
		}
	}
}


#logo {
	float: right;
	margin-block-start: 3.5em;
	margin-inline-start: .5em;
	height: 5em;
	filter: brightness(0) invert(1);
}

.used-by-logos {
	overflow: hidden;
}
	.used-by-logos > a {
		float: left;
		width: 33.33%;
		height: 100px;
		text-align: center;
		background: #F5F2F0;
		box-sizing: border-box;
		border: 5px solid white;
		position: relative;
	}
		.used-by-logos > a > img {
			max-height: 100%;
			max-width: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

label a.owner {
	margin: 0 .5em;
}

label a.owner:not(:hover) {
	text-decoration: none;
	color: #aaa;
}

#languages-list {
	column-count: 3;
	column-gap: 2em;

	li {
		padding: .2em;
	}
	
	li[data-id="javascript"] {
		border-bottom: 1px solid #aaa;
		padding-bottom: 1em;
		margin-bottom: 1em;
		margin-right: 1em;
	}
}

ul.plugin-list {
	column-count: 2;
	column-gap: 2em;

	> li {
		break-inside: avoid;
		page-break-inside: avoid;

		> a {
			font-size: 110%;
		}

		> div {
			margin-bottom: .5em;
		}
	}
}

[data-inputpath="examples.md"] {
	#languages {
		column-count: 4;

		> h1 {
			margin-top: 0;
			column-span: all;
		}

		label {
			display: block;
			padding: .2em;

			&[data-id="javascript"] {
				border-bottom: 1px solid #aaa;
				padding-bottom: 1em;
				margin-bottom: 1em;
			}
		}

		.unavailable {
			color: #aaa;
		}

		input {
			margin-right: .7em;
		}
	}

	#examples {
		> section {
			display: block;
			margin: auto;
			max-width: 900px;
		}

		h3 {
			margin: 1em 0 0.3em;
		}
	}

	main ul {
		padding-left: 40px;
	}
}

[data-inputpath="known-failures.md"] {
	main h2 {
		font-size: 1.2em;

		&[id] > a::before {
			content: "";
		}
	}
}

[data-inputpath="tokens.md"] {
	table.styled {
		border: 1px solid #ccc;
		border-spacing: 0;

		tr:not(:first-child) > * {
			border-top: 1px solid #ccc;
		}

		tr > *:not(:first-child) {
			border-left: 1px solid #ccc;
		}

		tr:nth-child(2n + 1) {
			background-color: #F8F8F8;
		}

		tr > * {
			padding: .5em .75em;
		}

		tr > th {
			text-align: left;
		}
	}
}

[data-inputpath="extending.md"] {
	ol.indent {
		margin: 1em 0;
		padding-left: 2em;
	}

	table.stylish {
		border-collapse: collapse;

		&, tr, td, th {
			border: 1px solid #CCC;
		}

		td, th {
			padding: .5em .75em;
		}
	
		th, td:first-child {
			background-color: #F8F8F8;
		}
	}
}

[data-inputpath="test.md"] {
	textarea {
		width: 100%;
		height: 10em;
		padding: 1em;
		box-sizing: border-box;
		margin: .5em 0;
		background: #f5f2f0;
		color: black;
		text-shadow: 0 1px white;
		tab-size: 4;
		font: 100% Consolas, Monaco, monospace;
		white-space: pre;
		word-wrap: normal;
		resize: vertical;
	}

	#language {
		column-count: 4;

		label {
			display: block;
			padding: .2em;
		}
	
		label[data-id="javascript"] {
			border-bottom: 1px solid #aaa;
			padding-bottom: 1em;
			margin-bottom: 1em;
		}
	
		input {
			margin-right: 1em;
		}
	
		strong {
			display: block;
			column-span: all;
		}
	}

	pre.show-tokens {
		line-height: calc(1.5em + 12px);
	}

	.show-tokens {
		.token:not(:first-child) {
			margin-left: 1px;
		}

		.token:empty {
			background: red;
		}

		.token:empty::before {
			color: white;
			content: 'empty';
			font-style: italic;
			text-shadow: black 0 0 .3em;
		}
	
		.token {
			border: 1px solid;
			padding: 6px 1px;
		}

		.token > .token {
			padding: 4px 1px;
		}

		.token > .token > .token {
			padding: 2px 1px;
		}

		.token > .token > .token > .token {
			padding: 0 1px;
		}

		.token > .token > .token > .token > .token {
			border: none;
			border-left: 1px solid;
			border-right: 1px solid;
			padding: 0;
			margin: 0 1px;
		}
	}

	#options {
		position: relative;
	}

	.link-wrapper {
		position: absolute;
		top: 0;
		right: 0;
		background-color: white;

		.hidden-wrapper {
			display: none;
		}
	
		&:hover {
			top: -.5em;
			right: -1em;
			width: 300px;
			padding: .5em 1em;
			outline: 1px solid #888;

			.hidden-wrapper {
				display: block;
			}
		}
	
		input {
			width: 100%;
			box-sizing: border-box;
		}
	
		button {
			border: none;
			background: none;
			font: inherit;
			text-decoration: underline;
			cursor: pointer;
		}
	}
}

[data-inputpath^="download"] {
	form label {
		display: block;
		padding: .2em;
		padding-left: 1.9em;
		page-break-inside: avoid;
		break-inside: avoid;

		.name {
			margin-right: .3em;
		}
		
		a.owner {
			margin-left: 0;
			hyphens: none;
		}
		
		input {
			margin-right: .7em;
			margin-left: -1.7em;
		}
	}


	form > p:first-of-type > label {
		font-size: 150%;

		input {
			vertical-align: .3em;
		}
	}


	.filesize:empty {
		display: none;
	}

	#components {
		overflow: hidden;
	}

	section.options {
		width: 33.3%;
		width: calc(100% / 3);
		float: left;

		label[data-id^="check-all-"] {
			border-bottom: 1px solid #aaa;
			padding-bottom: 1em;
			margin-bottom: 1em;
		}
	}

	section.options#category-languages,
	section.options#category-plugins {
		width: 100%;
		float: none;
		column-count: 3;
		padding-top: 2em;
		overflow: visible;

		label {
			break-inside: avoid;
		}

		> h1 {
			margin-top: 0;
			column-span: all;
		}
		
		label[data-id="javascript"] {
			border-bottom: 1px solid #aaa;
			padding-bottom: 1em;
			margin-bottom: 1em;
		}
	}


	section.options#category-themes {
		width: 66.6%;
		width: calc(100% * 2/3);
		column-count: 2;
		overflow: visible;
		float: none;

		> h1 {
			column-span: all;
		}
	}


	section.download {
		width: 50%;
		float: left;
	}

	#download {
		overflow: hidden;
		padding: .3em;
		.error {
			color: #B61500;
			display: none;
		}
		pre {
			height: 20em;
		}
		.download-button {
			cursor: pointer;
			width: 100%;
		}

	}

	#download-js .download-button {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	#download-css .download-button {
		background-color: #dc9e23;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}

/* Decorate only the first link in headings */
section :is(h1, h2, h3)[id] {
	a:not(:first-of-type) {
		text-decoration: revert;

		&::before {
			display: none;
		}
	}
}