/* data layer */

#data
{
	--header-top:50px;

	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
body:not(.data) #data
{
	overflow:hidden;
	position:fixed;
}
#data:not(.data-list)
{
	overflow:hidden;
}
#blur
{
	background-color:rgba(29,29,29,.3);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transition:opacity .4s var(--curve) 0s;
	
	z-index:800; /* above data, just below pages (900) */
}
.data #blur
{
	transition-delay:.6s;
}
#data .page
{
	color:var(--data);
	background-color:var(--page-bg);
	transition:none;
}
#data .page.list
{
	height:auto;
}
#data .page.active:not(.landing)
{
	/* fade transition for active page, placed above other pages */
	transition: opacity 1.6s ease 0s;
	z-index:101;
}
#data .page:not(.active),
.data #blur
{
	opacity:0;
	pointer-events:none;
}

#data .block.intro
{
	background-color:var(--page-bg); /* make block appear tranparent */
}
#data .block.intro > *,
#data-header:not(.fixed) h1
{
	max-width:var(--body-width);
	margin-left:auto;
	margin-right:auto;
}

#data .block.intro
{
	margin-top:var(--header-top);
	font-size:var(--data-intro-type);
	line-height:var(--data-intro-line);
	
	text-align:center;
}
#data .block.intro p:first-child
{
	margin-top:.5em;
}
#data .block.intro p:last-child
{
	margin-bottom:.5em;
}
#data .block.intro a
{
	color:var(--data-light);
}

#data-lan
{
	position:fixed;
	
	right:0px;
	top:12px;

	color:var(--light);

	z-index:101;
}


/* header / query menu */

#data-header
{
	position:absolute;
	width:100%;
	
	padding:0 var(--page-padding);
	
	top:var(--header-top);
	z-index:101;
}
#data-header.fixed
{
	position:fixed;
	top:var(--header-top) !important;
}
body.data.transition #data-header
{
	transition:top .4s var(--curve) .3s;
}

#data-header .block
{
	display:grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: repeat(4, auto);
 
  /* padding:calc(var(--block-x-padding)/2) var(--block-x-padding); */
  padding-bottom:18px;
	
	background-color:rgba(51,51,51,.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	color:var(--data-light);
}
#data-header .data-guide
{
	grid-column:1/-1;
}
#data-header .data-guide p
{
	max-width:var(--body-width);
	margin:1em auto;
}
#data-header h2
{
	margin-bottom:0;
	transition: font-size .2s ease 0s;
	font-size:var(--data-intro-type);
	white-space: nowrap;
}
#data-header h2 .icon
{	
	display:none;
	margin-left:6px;
	vertical-align:middle;
}
#data-header .block:not(.collapsed) h2 .icon
{
	transform:rotate(90deg);
}
#data-header .top
{
	position:absolute;
	margin-top:5px;
}
#data-header .data-query
{
	position:relative;
	
	grid-column:1/-1;
	grid-row:2;

	margin:6px 0 24px 0;
	justify-self: center;
	align-items: flex-start;
}

#data-header .data-query .label
{
	font-size:var(--data-query-type);
	line-height:var(--data-label-h);
	
	height:auto;
	padding:0 var(--data-label-p);
}
#data-header .data-query .label.round
{
	padding:calc(var(--data-label-h) / 2);
	width:var(--data-label-h);
}
#data-header .data-query .label svg.icon
{
	width:1em;
	height:1em;
	left:calc((var(--data-label-h) - 1em) / 2);
	top:calc((var(--data-label-h) - 1em) / 2);
}
#data-header select
{
	position:absolute;
	opacity:0;
	left:0;
	top:0;
	width:100%;
}
#data-header select[name="query"]
{
	width:calc(100% + var(--data-label-h)); /* label + round */
	width:100%;
}

#data-header .data-query .questions
{
	/* display:none; */
	position:absolute;
	top:100%;
	z-index:1001;
	/* align-items: flex-start; */
	min-width:calc(100% - var(--data-label-h));
}
#data-header .data-query.expanded .round svg
{
	transform:rotate(90deg);
}
#data-header .data-query .questions a
{
	/* display:block; */
	border-bottom:0;
	margin-top:3px;
	white-space:nowrap;
	
	font-size:18px !important;
	line-height:30px !important;

	min-width:100%;
	
	
	opacity:0;
}
#data-header .data-query.expanded .questions a
{
	opacity:1;
	pointer-events:all;
	transition:var(--select-reveal);
}
#data-header .close-questions
{
	display:none;
}
#data-header:has(.data-query.expanded) .close-questions
{
	display:block;
	position:fixed;
	inset:0;
	background-color: rgba(29,29,29,.3);
	/* backdrop-filter:blur(10px) */
}



#data-header .data-count
{
	grid-column:1;
	grid-row:3;
	justify-self: start;
	align-self: end;
	white-space:nowrap;
}
#data-header .data-menu
{
	display:flex;
	grid-row:3;
	grid-column:1/-1;
	
	justify-self: center;

	color:var(--light);
	
	display:flex;
	align-items: center;
}
#data-header .data-menu .label
{
	white-space:nowrap;
	margin:0 20px 3px 0;
}
#data-header .data-menu a
{
	margin:0 20px;
}

#data-header .data-filter
{
	grid-column:3/4;
	grid-row:3;
	justify-self: end;
}
#data:not(.data-list) #data-header .data-filter .sort 
{
	display:none;
}
#data-header .data-filter .sort .label
{
	color:var(--data-light);
	margin-right:6px;
	white-space:nowrap;
}
#data-header .data-filter .input-ui
{
	border:1px solid var(--data-light);
	width:200px;
	margin:0;
}
#data-header .data-filter .input-ui.field input
{
	color:var(--data-light);
}
#data-header .data-filter .input-ui.field input::placeholder
{
	color:var(--data-light);
	opacity:.6;
}
#data-header .data-filter .label.filter::after
{
	content:url(../media/search-data.svg);
}
#data-header .data-filter .label.filter.clear::after
{
  content: url(../media/close-data.svg);
}


/* fixed header */

#data-header.fixed .block
{
	margin-top:0 !important;
	padding:12px var(--block-x-padding);
}
#data-header.fixed .data-guide
{
	grid-column:1;
}

#data-header.fixed .data-guide p
{
	display:none;
}
#data-header.fixed h2
{
	font-size:var(--data-title-type);
}
#data-header.fixed .top
{
	visibility:visible;
}
#data-header.fixed .data-query
{
	grid-column:2;
	grid-row:1;
	
	margin:2px 0 18px 0;
}
#data-header.fixed .data-query .label
{
	font-size:15px;
	line-height:var(--data-label-small-h);
	
	height:auto;
	padding:0 var(--data-label-small-p);
}
#data-header.fixed .data-query .label.round
{
	flex-shrink:0;
	padding:calc(var(--data-label-small-h) / 2);
	width:var(--data-label-small-h);
}
#data-header.fixed .data-query .label svg.icon
{
	left:calc((var(--data-label-small-h) - 1em) / 2);
	top:calc((var(--data-label-small-h) - 1em) / 2);
}
#data-header.fixed .data-query select
{
	font-size:20px;
}
#data-header.fixed select[name="query"]
{
	width:calc(100% + var(--data-label-small-h)); /* label + round */
	
	width:100%;
}


#data-header.fixed .data-menu
{
	font-size:18px;
}



/* list */

#data .result-list
{
	line-height:0;
	padding:var(--page-padding);
	min-height:calc(100vh - var(--header-top) - 148px - 12px);
}
#data .result-list .label
{
	display:inline-block;
  margin: 0 4px 4px 0;
  max-width: 100%;
  
	/* transition:opacity .1s linear 0s; */
  
  overflow:hidden;
}
#data .result-list .label.count:not(.processing)
{
	display:none;
}
#data .result-list .label .count
{
	font-size:11px;
}
#data .result-list .row
{
	display:inline;
	transition:opacity .2s linear 0s;
}
#data .result-list .label:not(.in-view)
{
	/* opacity:0; */
}
#data .result-list .row:not(.in-view)
{
	opacity:0;
}


/* grid //TODO needs cleanup */

#data .page.grid
{
	margin:0;
	overflow:hidden;
}

#grid-zoomer,
#zoomer-nodes,
#scan-zoomer
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	overflow:hidden;
}

#zoomer
{
	position:absolute;
	left:50%;
	top:50%;
}

#grid-view
{
	position:fixed;
}

#grid-view .graph-explore
{
	position:fixed;
	left:50%;
	bottom:100px;
	transform:translateX(-50%);
}
#grid-view .grid
{
	margin:0;
	
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:grid;
  justify-items:center;
  align-items:center;
}

#grid-view .grid-scan
{
	position:relative;
	width:100%;
	height:100%;
	background:transparent none no-repeat 50% 50%;
	background-size:contain;

	overflow:visible;
	pointer-events:none;

	transition:
		opacity .4s ease 0s,
		filter 1s ease 0s;
	
	font-size:22px;
	
	
}

#grid-view .grid-scan:not(.loaded)
{
	opacity:0;
}

#grid-view .grid-scan.active
{
	will-change:filter;
	
	/* filter:brightness(115%); */
	/* filter:drop-shadow(10px 10px 80px var(--dark)); */
	filter:brightness(115%) drop-shadow(10px 10px 80px var(--dark));
	z-index:1000 !important;

	transition:filter .3s ease 0s;
}

#grid-view .grid-scan .hover
{
	/* background-color:#24AF91; */
	background-color:#C0D9D4;
}
#grid-view .grid-scan .hover img
{
	width:100%;
	height:100%;
	
	/* filter:grayscale(100%); */
	mix-blend-mode: luminosity;
}

#grid-view .grid-scan.active .hover
{
	opacity:0;	
}

.is-touch #grid-view .grid-scan.active
{
	filter:none;
}
#grid-view .closeup .grid-scan
{
	/* will-change:auto; */
}
#grid-view .closeup .grid-scan.active
{
	filter:none;
}

.is-safari #grid-view .grid-scan.active.hd
{
	will-change:auto;
	filter:none;
}

.is-safari #grid-view .is-animating .grid-scan
{
	transition:none;
}

#grid-view .grid-scan.active img
{
 
/* 
	filter:drop-shadow(10px 10px 80px var(--dark));
	filter:brightness(115%);
 */
}
/* 
#grid-view .grid-scan.active::before
{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:red;
	z-index:-1;
	
}
 */
#grid-view #zoomer.hover .grid-scan:not(.active)
{
	/* filter:brightness(85%); */
	/* opacity:.8; */
	/* transition-delay:1s; */
}
#grid-view .grid-scan .hover
{
	position:absolute;
	cursor:pointer;
	
	/* opacity:0; */
	/* border:1px solid red; */
}

#grid-view .grid-scan .graph-explore
{
	position:absolute;
	left:50%;
	top:50%;
	filter: brightness(85%);
	pointer-events:all;
}


/* #page.view-grid:not(.graph) .hover */
#grid-view .hover
{
	pointer-events:all;
}
#grid-view .grid .hover:hover
{
	/* background-color:rgba(250,0,0,.5); */
}

#grid-controls
{
	transform:none;
}
#grid-paging
{

}
#grid-paging a.prev svg
{
	transform:rotate(180deg);
}
#grid-paging a.disabled
{
	visibility:hidden;
}


/* map */

#map
{
	position:absolute;
}
#map-ui
{
	position:absolute;
	inset:0;
}
#map-ui > .label
{
	position:absolute;
	z-index:102;
}
#map-ui > .cluster
{
	max-width:70%;
	min-height:0;
	max-height:calc(100% - 24px);

	background-color:transparent;
	
	text-align:center;

/* 
	background-color:rgba(51,51,51,.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
 */
	
	overflow-y:auto;
	
	z-index:102;
}
#map-ui > .cluster.in-view.has-scroll,
#map-ui > .cluster.in-view .clickable
{
	pointer-events:all;
}


/* data card */

.block.data-card
{
	position:fixed;
	right:6px;
	top:24px;
	width:max(400px,26vw);
	
	padding:16px 24px 24px 24px;
	
	color:var(--dark);
	font-size:var(--data-card-type);
	
	background-color:rgba(232,232,232,.8);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	
	max-height:calc(100vh - 84px);
	overflow-y:auto;

	transition:
		opacity var(--block-transition),
		max-height .5s var(--curve) 0s;	

	transition-delay: 0s !important;
	

	z-index:201;
}
.block.data-card.collapsed
{
	max-height:52px;
	overflow:hidden;
}

.data-card:not(.in-view)
{
	pointer-events:none;
}

.data-card .smallcaps
{
	
}
.data-card .header svg
{
	margin-left:6px;
}
.data-card:not(.collapsed) .header svg
{
	transform:rotate(90deg);
}

.data-card .header
{
	text-align:center;
}
.data-card label
{
	display:block;
	margin:24px 0 0 16px;
	font-size:var(--data-card-label);
}
.data-card h1
{
	font-weight:normal;
	font-size:var(--data-card-title-type);
	line-height:var(--data-card-title-line);
	margin:0;
}
.data-card h1 span
{
	font-size:13px;
}
.data-card .label
{
	margin:0 3px 3px 0;
	height:auto;
}

.data-card a
{
	border-bottom:1px solid;
}



/* graph view */

body.data.graph-explore
{
	overflow:hidden;
	height:0;
}

.graph-controls
{
	z-index:1000;

  position: fixed;
  right: 8px;
  bottom: 12px;
  display: flex;
  transition: transform var(--slide-in-fast);
  transition-delay:.3s;
}

.graph-controls .control
{
  margin: 0 4px;
}

body:not(.graph-explore) .graph-controls
{
  transform: translateX(calc(100% + 4px));
}

.fill.action
{
	background-color:var(--data-light);
}

#explore-view
{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;

	padding:0 !important;
	
	
	visibility:hidden;
	pointer-events:none;

	/* background-color:rgba(5,1,0,.3); */
	background-color:rgba(29,29,29,.3);
	
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	
	transition:opacity .6s var(--curve) 0s;
	
	z-index:200;
}
#explore-view > svg
{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#explore-view.active
{
	visibility:visible;
	pointer-events:all;
}


#explore-view .label.blur-bg:hover
{
	background-color:var(--button-hover);
}



.graph-ui
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: 50% 50%;
	z-index: 1;
}
.graph-ui > *
{
	z-index:1;
	position:absolute;
	left:0;
	top:0;
	/* transform-origin:50% 50%; */
	pointer-events:none;
	background-size:contain;
	
	/* transition:opacity 1s ease 0s; */
	transition:filter 1s ease 0s;
}
.graph-ui.simplify label
{
	visibility: hidden;
}
.graph-ui .collapse
{
	position:absolute;
	top:0;
	right:-30px;
	/* pointer-events:all; */
}
.graph-ui .active
{
	transition:none;
	/* background-color:rgba(250,0,0,.2); */
}

.graph-ui .label.active,
.graph-ui .graph-scan.active,
.graph-ui .graph-scan.keep-active
{
	z-index:200 !important;
}
.graph-ui .label.active.hover,
.graph-ui .label.keep-active
{
	z-index:300 !important;
	min-height:30px;
}

.graph-ui .label.object
{
	z-index:100;
}

.graph-ui .label label
{
	word-wrap:break-word;
}

/* 
#page-graph canvas
{
	position
}
 */
#explore-view > svg,
#page-graph > svg
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#explore-view svg rect,
#page-graph svg rect
{
	cursor: pointer;
}
.graph-ui.hover > *:not(.active)
{
	/* opacity:.5; */
	filter:brightness(60%);
}

#scan-zoom
{	
	z-index:1000;
}

.graph-scan
{
	/* background-color:rgba(250,0,0,.2) */
	border-radius:6px;
}

#legend,
/* #explore-exit, */
#grid-paging
{
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 1000;
  transform: translateX(-50%);
  transition: transform var(--slide-in-fast);
  border:none;
}
#explore-exit .icon {
  margin-top: 3px;
}

#explore-exit
{
	position: absolute;
	top:30px;
	left:12px;
	border:none;
	z-index:1000;
	
	/* color:var(--light); */
}
#explore-exit:hover
{
	/* background-color:var(--light); */
}


#legend
{
	position:fixed;
	left:6px;
	bottom:6px;
	transform:none;
	
	
	padding: var(--block-y-padding);
	padding:0px;

	display:flex;
	align-items: flex-start;
	flex-direction: column;
	
	/* background-color:rgba(51,51,51,.8); */
/* 
	background-color:rgba(51,51,51,.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
 */
	
	background-color:transparent;
	
	
}
#legend > .label
{
	margin-bottom:3px;
	width:100%;
	
	box-shadow:0 2px 4px rgba(0,0,0,.4);
	
	opacity:0;
}
#legend.active > .label
{
	opacity:1;
	transition:var(--select-reveal);
}

#legend button 
{
	padding:0;
}
/* #legend.active .toggle .label, */
body:not(.is-touch) #legend .toggle:hover .label,
body:not(.is-touch) .data-query:hover > .label,
body:not(.is-touch) .data-query.expanded > .label,
body:not(.is-touch) .data-query .label:hover,
body:not(.is-touch) #explore-exit:hover
{
	background-color: var(--light);
	color:var(--dark);
	/* color:var(--light); */
}
.round svg
{	
	transition:transform .15s var(--curve) 0s;
}
#legend.active .round svg
{
	transform:rotate(-90deg);
}


@media (max-width:1280px)
{
	:root
	{
		--data-title-type:22px;
	}
	#data-header .data-guide p
	{
		margin-top:1.5em;
	}
}


@media (min-width:901px) and (max-width:1080px)
{
	#data-header.fixed .data-guide
	{
		margin-right:12px;
	}
	#data-header.fixed .data-query
	{
		grid-column:2/4;
		justify-self:end;
	}
	#data-header.fixed .data-query .questions
	{
		right:0;
	}

/* 
	#data-header.fixed .block
	{
		grid-template-columns:auto;
	}
	#data-header.fixed .data-query
	{
		justify-self:end;
	}
	#data-header.fixed .data-menu
	{
		grid-column: 2;
		justify-self: left;
	}
	
	
	#data-header.fixed .data-filter
	{
		grid-column:2;
	}
 */


	
/* 
	#data-header .data-menu
	{
		justify-self:start;
	}
 */
}

@media (max-width:900px)
{
	:root
	{
		--data-intro-type:24px;
		--data-query-type:20px;
		--data-title-type:22px;
	}
	
/* 
	#data .header.fixed .block
	{
		flex-wrap:wrap;
	}
	#data .header.fixed .block > div
	{
		width:100%;
	}
 */
 
 	
 
 	#data .intro
 	{
 		padding-left:0;
 		padding-right:0;
 	}
 	
 	#data-header .block
 	{
 		
 	}
 
 	.data:not(.data-transition) .page-menu a.language
 	{
 		margin:0 20px;
 	}

	#data-header.fixed .data-query
	{
		margin-top:12px;
		grid-column:1/-1;
		grid-row:2;
	}
	#data-header .data-query .questions a
	{
		white-space:normal;
	}

	#data-header.fixed .top
	{
		right:var(--block-x-padding);
		top:12px;
	}
	#data-header .data-count,
	#data-header .data-filter
	{
		grid-row:4;
	}
 

 
 
 .graph-controls
 	{
 		display:none;
 	}
 	#explore-exit
 	{
 		top:12px;
 	}
	.data.graph-explore:not(.data-transition) #data-toggle
	{
		justify-content: flex-end;
		padding-right: var(--page-padding);
	}
	.block.data-card
	{
		top:var(--header-top);
		margin-top:0;
		max-width:calc(100% - 24px);
		max-height:calc(100vh - 100px);
	}
 
	
}

@media (max-width:700px)
{
	#data-header .block
	{
		grid-template-columns:auto;
		padding:12px !important;
		overflow:hidden;
	}
	#data-header:has(.data-query.expanded) .block
	{
		overflow:visible;
	}
	#data-header.fixed .block.collapsed
	{
		max-height:52px;
	}
	#data-header.fixed .block.collapsed .top
	{
		margin-top:15px;
	}
	#data-header .block *
	{
		grid-column:1;
	}
	#data-header.fixed h2 .icon
	{
		display:inline-block;
	}

	#data-header .data-menu
	{
		margin-bottom:20px;
	}
	
	#data-header .data-filter .input-ui
	{
		width:130px;
	}
}

@media (max-width:700px)
{
	#data-header.fixed .data-guide
	{
		justify-self: center;
	}
	#data-header.fixed .top
	{
		position:relative;
		display:block;
		right:auto;
		top:auto;
		text-align:center;
	}
	#data-header.fixed .data-query
	{
		margin-top:18px;
	}

}