:root {
	/* the M, L and G colours - also used by the MLG tool (css/mlg.css, js/mlg/) */
	--management: rgba(89, 189, 255, 1);
	--leadership: rgba(255, 69, 56, 1);
	--the_good_life: rgba(33, 206, 140, 1);

	--management-50: rgba(89, 189, 255, 0.5);
	--leadership-50: rgba(255, 69, 56, 0.5);
	--the_good_life-50: rgba(33, 206, 140, 0.5);

	--colour_today_0: #F58C26;
	--colour_today_1: #9E43EF;
	--colour_today_2: #423C7B;
	--colour_today_3: #FCCB3D;
	--colour_today_4: #F385FD;
	--colour_today_5: #ba7d41;
	--colour_today_6: #5e2d8a;
	--colour_today_7: #7a71c4;
	--colour_today_8: #9f8639;
	--colour_today_9: #a46baa;


	--colour_data_source_entered_by_person: #7d7d7e;
	--colour_data_source_entered_by_leader: #ee7614;
	--colour_data_source_agreed_upon: #F93EFF;
}

.mlg_visualizer{

	position: relative;


	/* .stop-start{
		stop-color: rgba(240, 12, 198, 0.5);
	}
	.stop-end{
		stop-color: rgba(255,255,255,0.5);
	} */

	svg{
		margin: auto;
		/* width: 1171px; */
		/* height: 478px; */
		max-width: 1171px;
		/* max-height: 478px; */
	}


	.person{


		/*& means it's .person.today not .person .today */
		&.today, &.future{
			cursor: pointer; 
		}



	}

	/* if select mode is on in the visualizer */
	#persons.selectable{
		.person{ opacity: 0.3; }
		.person.selected{
			opacity: 1;
			pointer-events: none; /* so we can click others behind it */
		}
	}


	/* for checkboxes to show/hide today/future */
	#persons.hide_today .person.today,
	#persons.hide_future .person.future{
		display: none;
	}


	/* controls with checkboxes */
	.timeframe_checkboxes{
		position: absolute;
		top: 0; right: 0;
		display: flex; 
		flex-direction: column;
		gap: 5px;
	}
	
}



/* MLGVisualizerWidget: the diagram with dropdowns under it, and the values and their text next to it.
   Doesn't depend on Bootstrap classes for its layout */
.mlg_visualizer_widget{



	display: flex;
	gap: 8.333%;
	margin: 0;
	padding: 0;

	.hidden{ display: none !important; }


	/* dark mode (MLGVisualizerWidget::build() with dark_mode, or set_dark_mode()) - e.g. on the dark Lovable pages */
	&.dark_mode{
		/* soft_b5's text colour - used by body and by h1/h2 (with !important), so all the widget's text follows it */
		--color_neutral: #ffffff;
		color: var(--color_neutral);

		/* the diagram's axis numbers are dark paths in diagram.svg */
		.mlg_visualizer #axis_numbers path{ fill: rgba(255, 255, 255, 0.7); }

		/* the Good Life smiley as a filled face with dark eyes and mouth, not outlines - the svg's background is the face,
		   its ring (path.face, see smileys.svg) the same colour */
		.results .smiley svg{ background: var(--the_good_life); border-radius: 50%; }
		.results .smiley svg path{ fill: #040339; }
		.results .smiley svg path.face{ fill: var(--the_good_life); }
	}

	> .diagram, > .texts{ flex: 1 1 0; }


	/* a dropdown per value, coloured as the value */
	.controls{
		display: flex;
		gap: 12px;
		width: 300px;
		margin: 0 auto;
		margin-top: 30px;

		.control{ flex: 1; }

		select{
			appearance: none;
			width: 100%;
			padding: .375rem 2.25rem .375rem .75rem;
			font-size: 1rem;
			line-height: 1.5;
			border: 0;
			border-radius: 6px;
			color: white;
			font-weight: 600;
			cursor: pointer;
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
			background-repeat: no-repeat;
			background-position: right .75rem center;
			background-size: 16px 12px;
		}
		option{ color: black; background: white; }

		.management select{ background-color: var(--management); }
		.leadership select{ background-color: var(--leadership); }
		.the_good_life select{ background-color: var(--the_good_life); }
	}


	/* the values and their text */
	.header{
		display: flex;
		justify-content: space-between;
		margin-bottom: 3rem;

		.update_mlg_button{ max-width: 150px; }
	}

	.results{
		display: flex;
		gap: 1rem;
		margin-bottom: 1.5rem;

		.result{ flex: 1; }
		.label{ font-size: 1.25rem; }
		.value_row{ display: flex; align-items: center; gap: .25em; font-size: 2.5rem; font-weight: 500; line-height: 1.2; }
		.smiley svg{ display: block; width: .8em; height: .8em; }
		.smiley svg path{ fill: var(--the_good_life); }

		.management .value{ color: var(--management); }
		.leadership .value{ color: var(--leadership); }
		.the_good_life .value{ color: var(--the_good_life); }
	}

	.title{ margin-bottom: 1.5rem; }
	.description{ font-weight: 400; opacity: 1; }
}

/* stacked when there's no room side by side - block, not a flex column, since in that Chrome sizes the diagram's svg too short */
@media (max-width: 899px){
	.mlg_visualizer_widget{
		display: block;

		> .texts{ margin-top: 2rem; }
	}
}