/* home */

:root
{	--show-back:#048;
	--show-glass:transparent;
	--show-glass:RGBA(0,0,0,.03);

	--second:RGBA(0,70,140,1);
}

task.hosted main>menu { background-color:transparent; }

/* backsic */

task.themed
{	backdrop-filter:none;
}

task.themed page
{	background-color:RGBA(0,80,160,.75);
	color:#CDE;	
}

task.themed article s, task.themed article u { font-weight:bold; }

/* --- runtime --- */
/* à replacer @ wb */

task.by
{	backdrop-filter:none;
}

task.by main /* futur backdrop */
{	background-color:#000;
}

task.by page
{ 	/*height:auto; aspect-ratio:1.75; */
	overflow:hidden; 
	display:flex;
	justify-content:space-around;
	align-items:center;

	justify-content: center;
  	align-items: center;
}

task.by section /* centré, fit */
{	overflow:hidden; width:auto; margin:auto; 
	flex-grow:0;
	flex-basis:auto;
	width:100%;
	display:block;
}

task.by article
{	
	display:block;	
	margin:auto;
	position:relative; top:0px;	
	max-width:100%;
	max-height:100%;
	padding:0;
}

canvas
{	width:100%;
	height:100%;	
	
  	display:block;
	max-width:100%;
	max-height:100%;
	
	margin:auto;	
	background:transparent; z-index:100; 
	font-family:inherit;
}


canvas>p { margin:0; border:1px solid #F80; /* usage ? */ }

canvas.d2
{	/* mix-blend-mode: screen;*/
	/* z-index:120;  */
	position:absolute; top:0px;
}

canvas.d3
{ 	/* PAS via Layer */
	/* z-index:110;*/
	position:relative; top:0px;
	image-rendering: pixelated;
}


/* --- coded --- */

task.coded page
{   background-color:RGBA(0,80,160,1);
	width:100%; height:100%;
	overflow:hidden !important;
}


task.coded section
{	padding:0; margin:0;
	overflow:hidden; 
	/*height:100%; */
	/*align-items:stretch; */
	flex-grow:1;
	flex-basis:100%;
	flex-wrap:nowrap;	
}


task.coded article
{	padding:0; 
	/*height:100%; surtout pas */
}

task.coded article.map
{ 	background-color:var(--second);
	flex:0 0 15em; padding:1em; 
	overflow-y:scroll;
	font-size:90%;
}

task.coded article.map a { display:block; }

/* task.coded section>aside
{	background-color:var(--second);
} */

task.coded section>form
{	flex:3 1 0;
	height:100%; 
	overflow-x:scroll;
	overflow-y:scroll;	

	position:relative; top:0; left:0; /* positionnement cursor hover */
	z-index:0; 
}

output.src
{	/* flex-grow:1; */	
	width:100%;
	min-height:100%; /* important .hover() */ 
	text-wrap:nowrap;
	line-height:1.3em;	
	border:none;
	padding:0 0 0 .5em; 
	border-radius:0;
	/* z-index:10; */
	text-align:left; /* pour smallable*/
}

code
{	display:block;
	white-space:pre-wrap;
	padding:.5em; 
	margin-bottom:.5em;
	font-size:var(--small);
	border:1px solid var(--line);
}

code.src
{	/* help, debug, tokenizer */
	background-color:var(--hover);	
}

code.result
{	background-color:var(--line0);
}

output.debug
{	display:block; background-color:var(--black);
	height:auto; align-self: flex-start;
	white-space:pre; /* pourquoi ? */
}



.src s, .src b, .src i
.src v, .src m, .src k, .src w, .src d
.src err, .src rgb, .src rem
{	text-decoration:none; font-style:normal; font-weight:normal; display:inline; margin:0;
}



.src w { color:RGBA(127,255,255,.65); /* word incertain, err line */ }
.src v { color:#AFF; /* Variable */ }
.src i { color:#8DF !important; /* Identity, enum_structure */ }
.src m { color:#FFF; /* Math - numeric, operator, assign */ }
.src s { color:#FFB; /* String */ }
.src k { color:#CFA; padding:0; margin:0; /* Keyword, eval, separator */ }
.src b { color:#4FA; border-left:1px solid #4FA; padding-left:.1em; /* block */ }
.src d { background-color:var(--line0); }
.src d.done { background-color:transparent; }

/* spé */ 
.src rgb { color:#DDD; border-left:.5em solid #000; /* RGB */ }
.src err { color:#FFF; background-color:var(--bad); border-radius:.1em; /* mot erreur */ }
.src rem { color:RGBA(255,255,255,.5); /* com (ex rem) */ }

/*	TBD
.src dirty { position:absolute; backgorund-color:var(--hover); left:0; z-index:0; display:block; height:1em; width:100%;}
*/


div.hover
{	position:absolute; display:block; width:100%;
	background-color:var(--hover);
	pointer-events:none;
	z-index:-5;
	height:1.2em;
	margin:0;
}