/* ! 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; }
/*a:hover { color: #7af; }*/
a:hover, input:hover, input: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 {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background-color: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

/*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; }

/*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 {
	/*overflow: hidden;*/
	position: relative;
	line-height: 1;
}

#modeform label {
	display: block;
	float: left;
	/*overflow: hidden;*/
	margin-right: -2px;
}
#modeform label svg {
	width: 1.5rem;
	display: inline-block;
}

#modeform input {
	display: block;
	float: left;
	/*border: 2px solid;*/
	background-color: var(--fill);
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	margin-top: .25rem;
	cursor: pointer;
}
#modeform input:checked {

}
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 label[for=moderel] { padding-right: .25rem }*/
/*#modeform label[for=modeabs] { padding-left:  .25rem }*/
/*#modeform input#moderel { border-right: none; border-radius: 1rem 0 0 1rem; padding: 4px 0 0 4px }*/
/*#modeform input#modeabs { border-left: none;  border-radius: 0 1rem 1rem 0; padding: 4px 4px 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-size: 1.25rem;*/
	/*letter-spacing: 0.05em;*/
	/*background-color: yellow;*/
	font-variant-numeric: tabular-nums;
	
	/*display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 0 10vh;*/

	/*margin: 3rem 0;*/
	margin-bottom: 3rem;
}

main form {
	display: flex;
	/*overflow: hidden;*/
	position: relative;
	/*min-width: 20em;*/
	/*border: 2px solid;*/
}

form .names,
form .years {
	border: 2px solid;
	position: relative;
	background-color: var(--back);
	/*transition: all 200ms ease;*/
}

form .names {
	flex-grow: 1;
	border-right: 2px solid var(--fill);
	position: relative;
	margin-right: -2px;
}





/*form .names.listed::after {*/
form .names::after {
	content: '';
	position: absolute;
	display: block;
}
form .names[data-state='results']::after { /* down arrow for drop-down list of names */
	top: .85rem;
	right: .7rem;
	border: .3rem solid transparent;
	border-bottom: none;
	border-top-color: unset;
}
form .names[data-state='searching']::after { /* spinner for loading */
	top: .5rem;
	right: .7rem;
	border: 2px solid;
	width:  .9rem;
	height: .9rem;
	border-radius: 50%;
	border-left-color: transparent;
}
form .names[data-state='error']::after { /* error symbol */
	content: '!';
	top: .5rem;
	right: .7rem;
	font-size: .75rem;
	background-color: var(--fill);
	color: var(--back);
	width:  .9rem;
	height: .9rem;
	border-radius: 50%;
	line-height: .86rem;
	text-align: center;
}




form .years {
	display: flex;
	flex-shrink: 0;
	position: relative;
	width: 9em;
	flex-basis: 9em;
	/*overflow: hidden;*/
}


form .years .dash {
	/*position: absolute;
	width: 1em;
	left: 50%;
	margin-left: -.6em;
	text-align: center;*/
	line-height: 2;
	flex: 0;
}

main form input {
	position: relative;
	line-height: 2em;
	/*min-width: 4em;*/
	/*font-variant-numeric: tabular-nums;*/
}

svg.search {
	position: absolute;
	/*width: 1.25rem;*/
	width: 1em;
	top: 0;
	left: 0.5em;
	height: 2em;
	pointer-events: none;
	z-index: 4;
}
svg.arrow {
	width: 1em;
	height: 2em;
	position: relative;
}




input.name {
	min-width: 0;
	padding: 0 1.5em 0 2em;
	width: 100%;
}


input.year {
	/*padding: 0 .2em 0 .7em;
	padding: 0;
	text-align: center;
	width: 50%;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;*/
	width: 50%;
	
	/*padding: 0 .1em 0 .5em;*/
	padding: 0 .3em;
	text-align: center;
	letter-spacing: .03em; 
	flex-grow: 1;
	/*flex-basis: 30%;*/
	min-width: 0;
}


/*main input:hover { background-color: rgba(255,255,255,.3) }*/
main input:focus {
	/*background-color: #fff;*/
	background-color: var(--focus);
	/*z-index: 3;*/
}


/*[data-active=names] .names,
[data-active=years] .years { background-color: #fff; }*/

/*
[data-active=names] .names::after,
[data-active=years] .years::after {
	content: '';
	position: absolute;
	display: block;
	left: 50%; 
	width: 1em; height: 1em;
	margin: -0.5em;
	
	border: 2px solid;
	background-color: #fff;
	border-top-color: #fff;
	border-left-color: #fff;
	background-color: var(--back);
	border-top-color: var(--back);
	border-left-color: var(--back);
}
form#p1[data-active=names] .names::after,
form#p1[data-active=years] .years::after {
	top: 100%;
	transform: rotate(45deg);
}
form#p2[data-active=names] .names::after,
form#p2[data-active=years] .years::after {
	bottom: 100%;
	transform: rotate(-135deg);
}
*/

/* //// nice n simple */
/*[data-active=names] .names,
[data-active=years] .years { box-shadow: 0 0 0 1px inset; }*/

/* //// fancy shadow and rise */
/*[data-active=names] .names,
[data-active=years] .years { box-shadow: 4px 4px 0 0; transform: translate(-4px, -4px); }
[data-active=names] .list { box-shadow: 4px 4px 0 0; }*/

/* //// simple border (causes complications with middle line) */
/*[data-active=names] .names,
[data-active=years] .years { border: 2px solid }*/

/*
form#p1[data-active=names] .names,
form#p1[data-active=years] .years { box-shadow: 0 2px 0 0; }
form#p2[data-active=names] .names,
form#p2[data-active=years] .years { box-shadow: 0 -2px 0 0; }
*/

/*input:focus + .list,
.list:focus {
	display: block;
}
*/

.list {
	/*display: block;*/
	display: none;
	position: absolute;
	top: 100%;
	left: 1em;
	/*top: calc(100%);*/
	/*left: calc(1em - 2px);*/
	right: -2px;
	border: 2px solid;
	border-top-width: 0;
	/*border-top-color: var(--focus);*/
	/*background-color: #fff;*/
	/*background-color: var(--back);*/
	background-color: var(--focus);
	/*padding: .5em 1em;*/
	line-height: 1.75;
	padding: .5em 1em ;
	/*line-height: 1;*/
	column-count: 2;
	box-shadow: 4px 4px 0 0;
	margin: 0 0 2em -2px;
}
.list.show {
	display: block;
}
.list li {
	/*margin: 0 0 .5em 0;*/
}
.list a {
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
	text-decoration: none;
	line-height: 1;
}
.list a:hover {
	/*text-decoration: underline;*/
	/*border-bottom: 2px solid;*/
	box-shadow: 0 2px 0 0;
}
.list a.wiki {

}

.list:focus,
.list:active,
.list:hover,
/*.names input:focus + .list {*/
.names[data-state='results'] input:focus + .list {
	display: block;
}




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

#bars {
	margin: 1em 1px;
	position: relative;
	height: 6em;
}
#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 .5em;
	/*position: absolute;*/
	/*top: 50%;*/
	/*left: 50%;*/
	margin: 2em 1em;
	display: none;
}
#bars.invalid #message {
	display: inline-block;
}
svg.warning {
	display: inline-block;
	width: 1.5em;
	margin: .25em .5em 0 0;
	float: left;
	/*background-color: red*/
}



/*#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 .5em 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;
}
#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 { 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,
.spin { animation: spin 700ms infinite linear }
@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }


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

@media (max-width: 30rem) {
	body { padding: 1rem }
	main { font-size: 1rem; letter-spacing: 0 }
	input.year { letter-spacing: 0; padding: 0; }
	/*.modal { padding: 0 2rem 0 1rem }*/
	.modal { padding: 0.5rem 2rem 0.5rem 1.5rem }
}
@media (max-height: 30rem) {
	body { padding: 1rem }
	header { margin-bottom: 0.5rem; }
	/*.modal { padding: 0 2rem 0 1rem }*/
	.modal { padding: 0.5rem 2rem 0.5rem 1.5rem }
}