/* home */

:root
{	
	--show-back:RGBA(0,30,60,1);
	--show-glass:RGBA(0,0,0,.03);
	--show-high:#FF4; /* MENU */

	--show-studio:RGBA(0,55,110,1);
	--show-studio-page:RGBA(0,60,120,1);
}

/* CM : ce qui dépend de config root */

.CodeMirror-gutters
{	background-color:var(--show-back); /* important pour passer par dessus le code */
	border-right:1px solid var(--line); /* important pour focus high */
}

task.aside section#pop { padding:0; background-color:var(--black); }

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

/* 479 - early (help, info, ...) */

task.backsic.early section { background-color:var(--black); }
task.backsic.early article { margin:auto; max-width:720px; }

/* 478 - Studio Vs Version Web dark */

task.backsic.studio page { background-color:var(--show-studio) !important; }
task.backsic.studio section { padding:0; }
task.backsic.studio section#page-side { background-color:var(--show-studio-page) ;}
task.backsic.studio .CodeMirror-gutters { background-color:var(--show-studio) !important; }
task.backsic.studio section#a-side { border-left:1px solid var(--line); } 

task.backsic.studio section#page-side:focus { border-left:1px solid var(--high); }

/* APP */

task.backsic
{ 	scrollbar-color:RGBA(255,255,255,.25) transparent !important ;
	backdrop-filter:none;
	font-size:1rem;	
}

task.backsic main { font-size:100%;  }

task.backsic section { padding:1rem; /* 479 */  }

task.backsic section picture { border:1px solid var(--line); }

task.backsic footer { padding:.5em; }

task.backsic main>header a { padding:0 1em 0 1em; padding:1em; }

task.backsic page { background-color:var(--show-back); color:#CDE; }

task.backsic banner { background-color:var(--black); }


/* APP */

section.source { padding:0 !important; /* discard web pad */ }

section#menu-side
{ 	flex-grow:1; max-width:15em; /*flex-basis:14em;*/
	display:flex; flex-direction:column; /* pour 2x NAV */
}

section#menu-side>menu { flex-grow:1; overflow:hidden; flex-basis:0; width:100%; margin:.5em;}

page menu a.selected>icon { background-color:#000 ; }

page menu bu>a.selected>icon { background-color:transparent ; /* discard */ }

page menu a.selecting { animation:selecting .3s forwards !important;  }


section#page-side
{ 	flex-grow:3; background-color:var(--show-page);
	display:flex;
}

section#a-side 
{ 	flex-grow:1.5; max-width:35em; ; 
	display:flex; flex-direction:column;
	flex-wrap:nowrap; /* surtout */
	/* overflow:hidden; pas possible */
}

section#a-side>article
{ 	width:100%; flex-grow:0; padding:0;
	transition:opacity .5s ease,flex-grow .5s ease-out,max-height .5s ease-out;
}

/* l'un ou l'autre */
section#a-side>article#xside { padding:1rem; /* classique 1em */ }
section#a-side>article#map { padding:0em; /* 1 seul doit avoir du padding */ }

page>article#err { font-size:1rem; /* 442 forcer pour runtime error */ }

task.aside article.off
{ 	flex-grow:0 !important; flex-basis:0; overflow:hidden; 
	max-height:0; opacity:0; /* opacity car padding 1 */
}

task.aside article.on
{ 	flex-grow:1; opacity:1;
	max-height:100vh;
}


/* MAP */

index { display:block; font-size:var(--small); padding:0 .5em 0 .5em; }
index a { display:block; padding:.3em 0 .3em 0; transition:none; }
index a:hover { background-color:var(--hover); border-color:var(--line); color:var(--search); }

/* 472, navigation open */

a.run { background-color:#4B4; color:#FFF; }
a.source { background-color:#48C; color:#FFF; }
a.info { color:#FFF; }

/* 479 - simplification */

picture.playlist
{	padding:0; margin:0; min-width:0; width:4em; height:4em; border-radius:.3em; overflow:hidden;
	border:none !important; /* border moche sur petite image */
}

picture.playlist>img { width:100%; height:100%; object-fit:cover; display:block; }