/* ================================
GLOBAL
================================ */

body{
	margin:0;
	font-family: Inter, system-ui, Arial, sans-serif;
	background:#020617;
	color:#e2e8f0;
	overflow:hidden;
}

/* ================================
GRAPH BACKGROUND
================================ */

#graph{
	width: 100%;
	height: 96vh;

	background:
	radial-gradient(circle at 30% 20%, #1e293b 0%, transparent 40%),
	radial-gradient(circle at 70% 60%, #0f172a 0%, transparent 50%),
	#020617;

}

/* ================================
NODE PREVIEW
================================ */

.preview{
	position:absolute;
	display:none;
	pointer-events:none;

	background:rgba(15,23,42,0.95);
	border:1px solid #334155;

	padding:8px;
	border-radius:8px;

	backdrop-filter:blur(6px);

	box-shadow:
	0 10px 25px rgba(0,0,0,0.6),
	0 0 10px rgba(59,130,246,0.2);

	z-index:1000;

}

.preview img{
	max-width:220px;
	border-radius:6px;
}

/* ================================
DETAILS PANEL
================================ */

#details{

	position:absolute;
	right:25px;
	top:25px;

	width:380px;
	max-height:90vh;

	overflow-y:auto;

	padding:22px;

	border-radius:12px;

	background:rgba(2,6,23,0.85);

	border:1px solid rgba(148,163,184,0.15);

	backdrop-filter:blur(10px);

	box-shadow:
	0 20px 50px rgba(0,0,0,0.7),
	0 0 25px rgba(59,130,246,0.15);

	animation:panelAppear 0.35s ease;

}

/* ================================
PANEL ANIMATION
================================ */

@keyframes panelAppear{

	from{
		opacity:0;
		transform:translateX(20px);
	}

	to{
		opacity:1;
		transform:translateX(0);
	}

}

/* ================================
VIEWER CONTENT
================================ */

#viewer{
	font-size:15px;
	line-height:1.65;
}

/* ================================
HEADINGS
================================ */

#viewer h1,
#viewer h2,
#viewer h3{

	color:white;

	margin-top:20px;
	margin-bottom:10px;

	letter-spacing:0.5px;

}

#viewer h1{
	font-size:24px;
}

#viewer h2{
	font-size:20px;
}

#viewer h3{
	font-size:17px;
}

/* ================================
TEXT
================================ */

#viewer p{
	color:#cbd5f5;
}

/* ================================
IMAGES
================================ */

#viewer img{
	max-width:100%;
	border-radius:8px;

	margin-top:10px;

	box-shadow:0 10px 30px rgba(0,0,0,0.5);

}

/* ================================
LISTS
================================ */

#viewer ul{
	padding-left:20px;
}

#viewer li{
	margin-bottom:6px;
}

/* ================================
SCROLLBAR
================================ */

#details::-webkit-scrollbar{
	width:8px;
}

#details::-webkit-scrollbar-track{
	background:transparent;
}

#details::-webkit-scrollbar-thumb{
	background:#334155;
	border-radius:6px;
}

/* ================================
CYTOSCAPE NODE GLOW
================================ */

/* glow illusion via container shadow */

#graph:after{

	content:"";

	position:absolute;
	inset:0;

	pointer-events:none;

	background:
	radial-gradient(circle at center,
	rgba(59,130,246,0.05),
	transparent 60%);

}

/* ================================
MOBILE
================================ */

@media (max-width:900px){

	#details{

		width:90%;
		right:5%;

		top:auto;
		bottom:15px;

		max-height:50vh;
	}

}

/* panel hidden */

.hidden{
	display:none;
}


/* details header */

.details-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:15px;
}

#details h3{
	margin:0;
	font-size:20px;
	color:white;
}

#close-details{
	background:none;
	border:none;
	color:#94a3b8;
	font-size:18px;
	cursor:pointer;
}

#close-details:hover{
	color:white;
}


/* viewer spacing */

#viewer{
	padding-top:10px;
}

#viewer .ce-block{
	margin:15px 0;
}

#viewer p{
	margin:10px 0;
	line-height:1.6;
}

#viewer img{
	margin:20px 0;
}


/* node label */

.cy-node-label{
	color:white;
}


.codex-editor__redactor {
	padding-bottom: 0px !important;
}

.codex-editor--narrow .codex-editor__redactor {
	margin-right: 0px !important;
}


.site-footer {
	height: 4vh;
	max-height: 4vh;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
	background-color: #1e1e1e;
	color: #ffffff;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 0.9rem;
}

.footer-link {
	color: #4ea1ff;
	text-decoration: none;
	margin-right: 1rem;
	white-space: nowrap;
}

.footer-link:hover {
	text-decoration: underline;
}

.footer-version {
	margin: 0;
	opacity: 0.7;
	font-size: 0.8rem;
}