/*
 * Embed du renderer GalaxyGraph (repo W2Wizard/GalaxyGraph, MIT) dans la page
 * frise : copie SCOPÉE de www/style/main.css (vendored intact dans
 * galaxy-src/www/style/main.css). Règles de scoping :
 *  - tout est préfixé #graphe-viz-root : aucune fuite vers la page (le body du
 *    repo — margin/height/overflow:hidden — n'est PAS porté) ;
 *  - la charte du repo est CONSTANTE dans les deux palettes de la page (fond
 *    radial bleu nuit, turquoise 42, gris sombre unavailable) — seuls le h2 et
 *    la note de section suivent le thème de la page (frise-viz.css) ;
 *  - pas de Google Fonts (zéro CDN au runtime) : sans-serif natif, le renderer
 *    mesure ses labels avec 'Roboto' → fallback système automatique du canvas.
 */
#graphe-viz-root {
	--text-color: #f2f2ff;
}

#graphe-viz-root .galaxy-wrap {
	position: relative;
	height: 880px;
}

#graphe-viz-root canvas {
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at bottom, #002534 25%, #090a0f 100%);
	cursor: default;
	user-select: none;
}

/* Décor injecté par re-rendu (svg anneaux/rangs) : jamais cliquable — mesuré
   en recette, il se peint au-dessus du canvas et avalait tous les pointer
   events (elementFromPoint = rect, 0 sélection). Le canvas reste la seule
   surface d'interaction de la section. */
#graphe-viz-root svg {
	pointer-events: none;
}

#graphe-viz-root canvas#galaxy-graph.pointercursor {
	cursor: pointer;
}

#graphe-viz-root select,
#graphe-viz-root input {
	flex: 1;
	padding: 8px;
	font-size: 1.05em;
	border-radius: 4px;
	border: solid 1px #474b54;
	color: var(--text-color);
	backdrop-filter: blur(5px);
	background-color: rgba(6, 19, 28, 0.68);
}

#graphe-viz-root select {
	max-width: 120px;
}

#graphe-viz-root select:disabled,
#graphe-viz-root input:disabled {
	display: none;
}

/* ************************************************************************** */

#graphe-viz-root .options {
	display: flex;
	position: absolute;
	gap: 5px;
	padding: 10px;
	width: 100%;
	max-width: 300px;
}

#graphe-viz-root #graph_description {
	display: flex;
	flex-direction: column;
	gap: 10px;

	right: 0;
	backdrop-filter: blur(5px);
	box-sizing: border-box;

	position: absolute;
	margin: 10px;

	width: 100%;
	max-width: 300px;
	min-height: 100px;

	border: solid 1px #474b54;
	color: var(--text-color);

	background-color: rgba(6, 19, 28, 0.68);
	border-radius: 5px;
	padding: 20px;

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
}

#graphe-viz-root #graph_description.active {
	opacity: 1;
	pointer-events: initial;
	transition: opacity 0.1s;
}

@media (max-width: 992px) {
	#graphe-viz-root #graph_description {
		top: 40px;
		left: 0;
	}
}

/* ************************************************************************** */

#graphe-viz-root #graph_description #header {
	display: flex;
	justify-content: space-between;
}

#graphe-viz-root #graph_description #header a {
	text-decoration: none;
	font-weight: bold;
	color: #00ecef;
}

#graphe-viz-root #graph_description #header span {
	color: var(--text-color);
	font-size: 0.95em;
	border-radius: 4px;
	padding: 5px;
	text-transform: lowercase;
}

#graphe-viz-root #graph_description #header span[data-project-state="done"] {
	background-color: #5cb85c;
}

#graphe-viz-root #graph_description #header span[data-project-state="in_progress"] {
	background-color: #474b54;
}

#graphe-viz-root #graph_description #header span[data-project-state="fail"] {
	background-color: #d8636f;
}

#graphe-viz-root #graph_description #header span[data-project-state="available"] {
	color: #090a0f;
	background-color: #fff;
}

#graphe-viz-root #graph_description #header span[data-project-state="unavailable"] {
	background-color: #373c48;
}

#graphe-viz-root #graph_description #header span[data-project-state="not_recommended"] {
	background-color: #df9539;
}

#graphe-viz-root #graph_description #time {

}

#graphe-viz-root #graph_description #description {
	color: #909090;
	white-space: pre-line;
}

#graphe-viz-root #graph_description #requirements {

}