/* ! normalize.css v8.0.0 [selected] */
html{box-sizing:border-box;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:0.67em 0}code,kbd,samp,pre{font-family:monospace;font-size:1em}a{background-color:transparent}b,strong{font-weight:bolder}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}textarea{overflow:auto}[hidden]{display:none}
*,*::before,*::after{box-sizing:inherit} /* ! Paul Irish's border boxing: https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

/* ======================================= Variables aka Custom Properties */

:root { --fill: #333; --back: #ddd; } /* this is (re)set by JS on page load */

/* ======================================= Basics */

html {
	font-family: -apple-system, BlinkMacSystemFont, 'Droid Sans', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Helvetica Neue', sans-serif;
	/*font-size: 16px;*/
	font-size: 20px;
	letter-spacing: 0.02em;
	line-height: 1.5;
	font-weight:400;
	font-feature-settings: "kern" on, "liga" on, "calt" off;
	height: 100%;

	/*--fill: #333; --back: #ddd;*/
	/*min-height: 100vh;*/
}
body {

	/*--fill: #333; --back: #ddd;*/

	position: relative;
	margin: 0;
	padding: 2rem;
	background-color: var(--back);
	color: var(--fill);

	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/*min-height: 100%;*/
	align-items: center;
}


/* ======================================= Defaults */

a { color: inherit; cursor: pointer; text-decoration: none; }
p a { text-decoration: underline; }


a:hover,
input:hover,
input:focus,
button:focus { outline: none; }

/*h1, p { font-size: inherit; margin: 1rem 0; }*/
h1 { font-size: inherit; /*font-weight: normal;*/ }

svg { display: block; fill-rule: evenodd; clip-rule: evenodd; }
svg path,
svg circle { fill: transparent; stroke: transparent; stroke-width: 0; vector-effect: non-scaling-stroke; }
svg .fill1 { fill: var(--fill); }
svg .fill2 { fill: var(--back); }

ul { list-style: none; margin: 0; }

form { /*width: 100%;*/ margin: 0; border: none; }
label { cursor: pointer; }
input, button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background-color: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	border-radius: 0;
}

/*input::-moz-number-spin-box { display: none; }*/
/*input:focus::-moz-number-spin-box { display: block; }*/
/*input[type=number]::-moz-number-spin-box { display: none; appearance: none; }*/
/*input[type=number]::-moz-number-spin-box { display: none; -moz-appearance: none; }*/

/*input[type=number] {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
}*/
/*input[type=number]:focus { -moz-appearance: unset }*/
input::-webkit-inner-spin-button { display: none; }

::placeholder { color: inherit; opacity: 0.4; font: inherit; line-height: inherit; }

button {
    width: 2rem;
    height: 2rem;
    padding: 0.4rem;
}
/*input[type=radio] {
	-webkit-appearance: radio;
	-moz-appearance: radio;
	appearance: radio;
}
*/
/* ======================================= Shared */

.mode svg { background-color: transparent; }
.mode svg .fill { fill: var(--fill) }
/*.mode svg .stroke { stroke: #ddd ; stroke-width: 2px; }*/
svg .line { stroke: var(--fill); stroke-width: 1.7px; fill: none; }

/*.mode input:checked + svg { background-color: #ddd }*/
/*.mode input:checked + svg .fill { fill: #333 }*/

/*#frm1, #tline1, #line1 { color: #7d1f41 }*/
/*#frm1 .mode, #tline1 .bar, #line1 .bar { background-color: #7d1f41 }*/
/*#frm1 svg .fill { fill: #7d1f41 }*/
/*#frm1 .mode input:checked + svg .fill { fill: #7d1f41 }*/

.bar,
.diff {
	/*transition: all 100ms ease;*/
}

/* ======================================= Structure */

/*header, main, footer, .overlay {*/
header, main, footer, #overlays {
	max-width: 40rem;
	min-width: 13rem;
	width: 100%;
}
/*header, main {
	margin-bottom: 2rem;
}
*/

/* ============================== Header */

header {
	display: flex;
	flex-direction: row;
	/*line-height: 2rem;*/
	font-size: .8rem; /* 16px */

	/*margin: 0 0 2rem;*/
	/*padding-bottom: 2rem;
	height: 20vw;
	max-height: 4rem;*/

	position: relative;
	/*overflow: hidden;*/

	/*margin-bottom: 1rem;*/
	margin: 1rem 0;
	/*height: 13vh;*/
	/*min-height: 1.5rem;*/
	/*max-height: 7rem;*/
	height: 1.5rem;
	height: 2.5rem;
	/*border-bottom: 2px solid;*/
}

header h1,
header p#buttons { margin: 0; }
header p#buttons {
	flex-grow: 1;
	/*text-align: right;*/
	padding-left: .5rem;
}
header p#buttons a { text-decoration: none; display: inline-block; }
header p svg {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
}

/*svg.colours {}*/
/*svg.info {}*/


#modeform {
	position: relative;
	line-height: 1;
}
#modeform label {
	display: block;
	float: left;
	margin-right: -2px;
}
#modeform label svg {
	width: 1.5rem;
	display: inline-block;
}
#modeform input {
	display: block;
	float: left;
	background-color: var(--fill);
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	margin-top: .25rem;
	cursor: pointer;
}
label#moderel svg { margin-right: .2rem }
label#modeabs svg { margin-left:  .2rem; margin-right: -.2rem }
label#moderel input { float: right; border-radius: 1rem 0 0 1rem; border-right: none; /*padding: 2px 0 0 2px */}
label#modeabs input { float: left;  border-radius: 0 1rem 1rem 0; border-left: none;  /*padding: 2px 2px 0 0 */}

#modeform input:checked::after {
	content: '';
	display: block;
	width: .8rem; height: .8rem;
	margin: 2px;
	border-radius: 1rem;
	background-color: var(--back);
}


/* ======================================= Modals (in header) */

#modals {
	position: absolute;
	top: 100%;
	top: 2.25rem;
	/*width: 100%;*/
	/*height: 0;*/
	/*background-color: red;*/
}
.modal {
	width: 100%;
	position: relative;
	background-color: var(--back);
	border: 2px solid;
	/*padding: 1rem 4rem 1rem 2rem;*/
	padding: 1rem 2rem;
	z-index: 5;
	margin: 0;
	display: none;
	/*max-width: 26rem;*/
	box-shadow: 4px 4px 0 0;
}
/*.modal.active { display: block; }*/

#modal_info    { max-width: 26rem; padding-right: 4rem; }
#modal_colours { max-width: 14rem; padding-right: 1rem; }


#colours {}
#colours a {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	margin: 0 .5rem .25rem 0;
	border: 2px solid;
	border-radius: 50%;
	border-left-width: 1rem;
	transform: rotate(45deg);
}
/*#colours a::after {
	content: '';
	display: block;
	border: 0 solid;
	border-width: 0 2px .7rem 0;
	width: 1rem;
	height: 1rem;
	margin: .25rem 0 0 0;
	border-color: inherit;
}*/



/*body[data-modal='info'] main,
body[data-modal='colours'] main { opacity: 0.3; }*/
body[data-modal='info'] #modal_info,
body[data-modal='colours'] #modal_colours { display: block; }

/*.modal p { max-width: 26rem; }*/
.modal_close {
	display: block;
	width: 2rem;
	height: 2rem;
	/*background-color: red;*/
	text-align: center;
	text-decoration: none;
	font-size: 1.25rem;
	position: absolute;
	top: .1rem;
	right: .25rem;
	line-height: 2rem;
}

.modal:before {
	content: '';
	display: block;
	width: 1rem;
	height: 1rem;
	border: 2px solid;
	background-color: inherit;
	position: absolute;
	top: -.5rem;
	transform: rotate(45deg);
	/* border-width: 2px 0 0 2px; */
	/* margin: -1px 0 0 0; */
	border-right-color: transparent;
	border-bottom-color: transparent;
}
#modal_info::before { left: 3.85rem; }
#modal_colours::before { left: 5.35rem; }


/* ============================== Main */

main {
	flex-grow: 1;
	font-variant-numeric: tabular-nums;
	margin-bottom: 3rem;
}


.formgroup {
	display: flex;
	flex-direction: row;
	border: 2px solid;
	line-height: 2rem;
}
.formgroup form {
	position: relative;
}
form.inputs {
	display: flex;
	position: relative;
}

form.inputs:first-child {
	border-right: 2px solid;
}

form.inputs.name {
	flex-grow: 1;
}

svg.arrow {
	width: 1em;
	height: 2em;
	position: relative;
}




input.name {
	min-width: 0;
	padding: 0 2rem 0 .75rem;
	width: 100%;
}

input.year {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
	width: 4rem;
	padding: 0;
	text-align: center;
	letter-spacing: .03em;
}

form button {
	position: relative;
	/*width: 2.25rem;*/
	width: 2rem;
	height: 2rem;
	flex: 0 0 2rem;
	cursor: pointer;
}

form button svg {
	position: absolute;
	width: 1rem;
	height: auto;
	top: .525rem;
	left: .55rem;
}

/*main form:focus,*/
main input:focus,
main form.showlist input,
/*form.showlist,*/
main button:focus {
	background-color: var(--focus);
}


/* Group states */

form.name[data-state='searching'] button {
	display: none;
}

form.name::after {
	content: '';
	display: block;
	position: absolute;
	top: .5rem;
	right: .55rem;
	pointer-events: none;
}
form.name[data-state='searching']::after {
	border: 2px solid;
	width:  .9rem;
	height: .9rem;
	border-radius: 50%;
	border-left-color: transparent;
}
form.name[data-state='listed']::after {
	top: .8rem;
	right: 2.75rem;
	width: 0;
	height: 0;
	border: .3rem solid transparent;
	border-bottom-width: 0;
	border-top-color: var(--fill);
}

form.name[data-state='notfound']::after {
	content: '?';
	color: var(--back);
	background-color: var(--fill);
	width: 1rem;
	height: 1rem;
	text-align: center;
	border-radius: 50%;
	font-size: .8rem;
	line-height: 1rem;
	right: 2.5rem;
}





.list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 2rem;
	border: 2px solid;
	background-color: var(--focus);
	font-size: .8rem;
	line-height: 1.2;
	/*padding: .5rem .75rem;*/
	/*padding: .8rem .3rem .3rem .8rem;*/
	/*padding: .8rem .8rem .4rem .8rem;*/
	padding: .8rem;
	column-count: 2;
	box-shadow: 4px 4px 0 0;
	/*margin: 0 0 2em -2px;*/
	margin: 0 -2px 2rem -2px;
	z-index: 3;
}

.list li {
	margin: 0 0 .5em 0;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.list a {
	display: inline-block;
	text-decoration: none;
	line-height: 1.1;
	/*max-width: 100%;*/
	max-width: calc(100% - 1.25rem);
	text-overflow: ellipsis;
	overflow: hidden;

}
.list a:hover {
	/*text-decoration: underline;*/
	/*border-bottom: 2px solid;*/
	box-shadow: 0 2px 0 0;
}
.list a.wikilink {
	display: inline-block;
	/*background-color: #333333;*/
	width: .6rem;
	height: .6rem;
	border-radius: 1rem;
	text-align: center;
	border: 2px solid;
	margin: 0 0 .1rem .3rem;
}
.list a.wikilink.dead {
	background-color: var(--fill);
}
/*.list li:hover a.wikilink { display: inline-block; }*/

.list a.wikilink:hover,
.list a.wikilink:active,
.list a.wikilink:focus { box-shadow: none; }

/*.list a.wikilink::after {
	content: '';
	position: absolute;
	top: -1px; right: 0;
	display: block;
	width: .7rem;
	border: 1px solid;
	transform: rotate(-45deg);
	transform-origin: top right;
}
*/
/*.list:focus,*/
/*.list:active,*/
/*.list:hover,*/
/*.names input:focus + .list {*/
/*.names input:hover + .list,*/
/*.names[data-state='results'] input:focus + .list {*/
input:focus ~ .list {
	display: block;
}
form.showlist .list {
	display: block;
}
form.showlist input {

}



/* ================ Bars */

#bars {
	margin: 1rem 1px;
	position: relative;
	height: 6rem;
}
#bars.invalid {
	/*background-color: #333;*/
	background: repeating-linear-gradient(-45deg, var(--fill), var(--fill) 2px, transparent 2px, transparent 6px);
	/*border: 2px solid;*/
	text-align: center;
}
#bars #message {
	/*display: inline-block;*/
	background-color: var(--back);
	line-height: 2;
	padding: 0 .5rem;
	/*position: absolute;*/
	/*top: 50%;*/
	/*left: 50%;*/
	margin: 2em 1em;
	display: none;
}
#bars.invalid #message {
	display: inline-block;
}
svg.warning {
	display: inline-block;
	width: 1.5rem;
	margin: .25rem .5rem 0 0;
	float: left;
	/*background-color: red*/
}
.bar.alive {
	/* background: red; */
	/*background-image: linear-gradient(-90deg, var(--back), transparent);*/
	/*background-size: 1rem;*/
	background-image: linear-gradient(0deg, var(--back), var(--back));
	background-size: 3px;
	background-repeat: no-repeat;
	background-position: top right;
}


/*#bars.invalid::after {
	content: '';
	background-color: #ddd;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	border: 2px solid;
}*/
#bars.invalid .bar,
#bars.invalid #diffs {
	display: none;
}

.bar {
	position: absolute;
	background-color: var(--fill);
	line-height: 2em;
	text-align: right;
	/*padding: 0 .5rem 0 0;*/
	padding: 0;
	min-width: 2px;
	/*margin-bottom: 1rem;*/
	z-index: 2;

	left: 0; right: 0; /* setting these as defaults to be overridden by inline styles from JS */
}
#bar_a { top: 0; }
#bar_b { top: 4em; }

.bar span {
	color: var(--back);
	padding: 0 .5em 0 0;
}

#bar_a::before, #bar_a::after,
#bar_b::before, #bar_b::after {
	content: '';
	position: absolute;
	display: block;
	height: 3.5em;
	border: 1px solid;
	/*box-shadow: -2px 0 0 2px solid var(--back);*/
}
#bar_a::before { top: 0; left: -1px	}
#bar_a::after  { top: 0; right: -1px }
#bar_b::before { bottom: 0; left: -1px }
#bar_b::after  { bottom: 0; right: -1px }

/*#bar_a.alive::after,
#bar_b.alive::after {
	border-style: dashed;
}*/
/*#bar_a { width: 60%; margin-left: 40%; }*/
/*#bar_b { width: 60%; margin-left: 0; }*/




#diffs {
	position: absolute;
	width: 100%;
	height: 2em;
	top: 2em;
	/*background-color: red;*/
	overflow: hidden;
	z-index: 1;
}
.diff {
	height: 100%;
	position: absolute;
	text-align: center;
	/*box-shadow: 0 0 0 #333;*/
	overflow: hidden;
}
.diff#diff1 { left: 0 }
.diff#diff2 { left: 50%; }
.diff#diff3 { right: 0; }

#bars[data-mode=absolute] #diff1,
#bars[data-mode=absolute] #diff2,
.diff.hide,
#bars.equal .diff { display: none; }

#diffs span {
	line-height: 2;
	background-color: var(--back);
	padding: 0 .25em;
	display: inline-block;
	position: relative;
	text-align: center;
}


.diff::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%; left: 0; right: 0;
	height: 0;
	border: 1px solid;
	margin-top: -1px;
}

/* ============================== Footer */

/*footer {
}
*/






/* ======================================= State changes */





/* ======================================= Animation */

.anim1 {
	transition: all 200ms ease-out;
}

.flash { animation: flash 1s step-start infinite }
@keyframes flash { 50% { opacity: 0 } }

/*form .names[data-state='searching']::after,*/
form.name[data-state='searching']::after,
.spin { animation: spin 700ms infinite linear }
@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }


/* ======================================= Media Queries */

/*@media (min-width: 60rem) { .list { column-count: 3; } }*/
/*@media (min-width: 40rem) { .list { column-count: 2; } }*/
@media (max-width: 45rem) { .list { column-count: 1; } }

@media (max-width: 30rem) {
	body { padding: 1rem }
	main { font-size: 1rem; letter-spacing: 0 }
	
	input.year { letter-spacing: 0; width: 3.5rem }
	svg.arrow { width: .75rem; }
	input.name { padding: 0 .5rem }
	form button { width: 2rem }
	form button svg { left: .45rem }

	/*input.year {}*/
	/*.modal { padding: 0 2rem 0 1rem }*/
	.modal { padding: 0.5rem 2rem 0.5rem 1.5rem }
	/*.list { min-width: 70vw }*/
	.list {
		right: 0;
	}
}
@media (max-height: 30rem) {
	body { padding: 0 1rem }
	header { margin-bottom: 0; }
	/*.modal { padding: 0 2rem 0 1rem }*/
	.modal { padding: 0.5rem 2rem 0.5rem 1.5rem }
}