/* ******************************************************* */
/* ************************ RESET ************************ */
/* ******************************************************* */
*{box-sizing:border-box;margin:0;padding:0;}

/* ******************************************************* */
/* ******************** PAGE LAYOUT ************************ */
/* ******************************************************* */
html,body{
	width:1920px;
	height:980px;
	overflow:hidden;
	background:#111111;
	}

canvas{
	display:block;
	}

button{
	margin-top:10px;
	}

/* ******************************************************* */
/* ******************** CANVAS OVERLAY ********************* */
/* ******************************************************* */
#canvas-wrap{
	position:relative;
	width:512px;
	height:288px;
	overflow:hidden;
	}

#canvas-wrap canvas{
	margin:0;
	}

.tab{
	position:absolute;
	left:0;
	top:0;
	margin:0;
	box-sizing:border-box;
	background:#2a2a2a;
	color:#ffffff;
	border:1px solid #555555;
	border-left:none;
	border-radius:0 6px 6px 0;
	font-family:sans-serif;
	font-size:13px;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	overflow:hidden;
	z-index:3;
	transition:transform 0.3s ease;
	}

.tab-label{
	display:inline-block;
	white-space:nowrap;
	transform:rotate(-90deg);
	}

.panel{
	position:absolute;
	left:0;
	top:0;
	height:100%;
	box-sizing:border-box;
	background:rgba(20,20,20,0.92);
	color:#ffffff;
	font-family:sans-serif;
	font-size:12px;
	overflow:hidden;
	padding:6px;
	z-index:2;
	transform:translateX(-100%);
	transition:transform 0.3s ease;
	}

.panel-heading{
	margin:6px 0 18px 0;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	color:#32bbbb;
	}

.layer-row{
	display:flex;
	align-items:center;
	white-space:nowrap;
	padding:2px 0 2px 10px;
	}

.layer-row input[type=checkbox]{
	margin-right:10px;
	}

.axis-master-row{
	margin-top:1em;
	}

.axis-master-label{
	text-decoration:underline;
	}

/* ******************************************************* */
/* ******************** DRAWING CONTROLS ******************* */
/* ******************************************************* */
.bordered-box{
	/* Browsers' UA stylesheet gives <fieldset> a default min-width:min-content, letting nowrap content
	   (e.g. the long UTC' readout in the date-time-box) force the fieldset wider than the fixed-width
	   panel it sits in, with the excess clipped by the panel's own overflow:hidden - overridden here so
	   every bordered-box fieldset always respects the panel's width like a normal block element would. */
	min-width:0;
	border:1px solid #555555;
	padding:6px;
	margin-bottom:10px;
	color:#ffffff;
	}

#btn-reset-view{
	position:absolute;
	top:8px;
	right:8px;
	width:28px;
	height:28px;
	margin-top:0;
	padding:0;
	z-index:4;
	background:linear-gradient(#3a3a3a,#222222);
	border:1px solid #555555;
	border-radius:4px;
	box-shadow:0 2px 0 #000000,inset 0 1px 0 rgba(255,255,255,0.15);
	color:#cccccc;
	font-size:16px;
	line-height:1;
	cursor:pointer;
	}

.bordered-box legend{
	font-size:10px;
	padding:0 4px;
	}

.mini-heading{
	font-size:10px;
	font-weight:bold;
	color:#aaaaaa;
	margin:6px 0 2px 0;
	}

.centered-subheading{
	margin-top:4px;
	margin-bottom:4px;
	}

.range-scale-heading{
	margin-top:2px;
	}

#reduction-to-equator-value{
	margin-bottom:16px;
	}

#svg-modified-value{
	margin-bottom:16px;
	}

.preset-spacer{
	height:10px;
	}

.unit-row{
	display:flex;
	align-items:center;
	white-space:nowrap;
	padding:2px 0;
	}

.unit-row input[type=checkbox]{
	margin-right:10px;
	}

.control-row{
	display:flex;
	align-items:center;
	white-space:nowrap;
	margin-bottom:10px;
	}

.range-scale-toggle-row{
	margin-bottom:2px;
	}

.control-row input[type=checkbox]{
	margin-right:10px;
	}

.radio-row{
	display:flex;
	align-items:center;
	white-space:nowrap;
	padding:2px 0;
	}

.radio-row input[type=radio]{
	margin-right:10px;
	}

.date-row{
	display:flex;
	align-items:center;
	white-space:nowrap;
	margin-bottom:10px;
	}

.date-label{
	width:50px;
	flex:0 0 auto;
	}

.date-row select{
	flex:1 1 auto;
	background:#222222;
	color:#ffffff;
	border:1px solid #555555;
	padding:2px 4px;
	}

.date-row select+select{
	margin-left:4px;
	}

.toggle-btn{
	display:block;
	margin-bottom:10px;
	background:linear-gradient(#3a3a3a,#222222);
	border:1px solid #555555;
	border-radius:4px;
	box-shadow:0 2px 0 #000000,inset 0 1px 0 rgba(255,255,255,0.15);
	color:#cccccc;
	padding:4px 10px;
	cursor:pointer;
	}

.toggle-btn.pressed{
	background:#2ecc71;
	border-color:#1a8f4c;
	box-shadow:inset 0 2px 4px rgba(0,0,0,0.6);
	color:#003300;
	transform:translateY(1px);
	}

.button-row{
	display:flex;
	gap:6px;
	margin-bottom:10px;
	}

.button-row button{
	flex:1 1 auto;
	background:linear-gradient(#3a3a3a,#222222);
	border:1px solid #555555;
	border-radius:4px;
	box-shadow:0 2px 0 #000000,inset 0 1px 0 rgba(255,255,255,0.15);
	color:#cccccc;
	padding:4px 6px;
	cursor:pointer;
	}

.button-row button:disabled{
	background:#222222;
	color:#666666;
	box-shadow:none;
	cursor:default;
	}

.location-row{
	display:flex;
	align-items:center;
	gap:14px;
	margin-bottom:10px;
	}

.location-row label{
	display:flex;
	align-items:center;
	white-space:nowrap;
	}

.location-row input[type=checkbox]{
	margin-right:6px;
	}

.track-label{
	color:#aaaaaa;
	font-size:12px;
	}

.coord-row{
	display:flex;
	align-items:center;
	margin-bottom:4px;
	}

.coord-label{
	width:14px;
	display:inline-block;
	}

.range-row{
	display:flex;
	align-items:center;
	padding:2px 0;
	}

.range-row input[type=range]{
	flex:1;
	margin-right:10px;
	}

.range-value{
	width:20px;
	text-align:right;
	font-family:monospace;
	}

.fake-input{
	flex:1;
	min-width:0;
	overflow:hidden;
	border:1px solid #777777;
	background:#1a1a1a;
	color:#ffffff;
	padding:2px 4px;
	font-family:monospace;
	font-size:12px;
	height:20px;
	}

/* ******************************************************* */
/* ************************ TUTORIAL *********************** */
/* ******************************************************* */
#tutorial-overlay{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:10;
	display:none;
	pointer-events:none;
	}

#tutorial-overlay.active{
	display:block;
	}

#tutorial-overlay.dim{
	background:rgba(0,0,0,0.55);
	pointer-events:auto;
	}

.tutorial-box{
	position:absolute;
	background:#1a1a1a;
	color:#ffffff;
	border:1px solid #32bbbb;
	border-radius:8px;
	box-shadow:0 4px 16px rgba(0,0,0,0.6);
	padding:12px 14px;
	font-family:sans-serif;
	font-size:12px;
	pointer-events:auto;
	display:none;
	}

#tutorial-image{
	position:absolute;
	border:1px solid #32bbbb;
	border-radius:4px;
	box-shadow:0 4px 16px rgba(0,0,0,0.6);
	height:auto;
	pointer-events:none;
	display:none;
	}

#tutorial-question{
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:240px;
	}

#tutorial-bubble{
	right:12px;
	bottom:12px;
	width:260px;
	max-width:calc(100% - 24px);
	}

.tutorial-step-count{
	font-size:10px;
	color:#aaaaaa;
	margin-bottom:6px;
	}

.tutorial-title{
	font-size:13px;
	font-weight:bold;
	color:#32bbbb;
	margin-bottom:6px;
	}

.tutorial-question-text,
.tutorial-para{
	line-height:1.4;
	margin-bottom:10px;
	}

.tutorial-buttons{
	display:flex;
	gap:8px;
	justify-content:flex-end;
	}

.tutorial-buttons button{
	margin-top:0;
	background:linear-gradient(#3a3a3a,#222222);
	border:1px solid #555555;
	border-radius:4px;
	box-shadow:0 2px 0 #000000,inset 0 1px 0 rgba(255,255,255,0.15);
	color:#cccccc;
	padding:4px 10px;
	cursor:pointer;
	}

.tutorial-buttons button.tutorial-primary{
	background:#2ecc71;
	border-color:#1a8f4c;
	color:#003300;
	}

.tutorial-highlight{
	outline:2px solid #32bbbb;
	outline-offset:2px;
	box-shadow:0 0 10px 3px rgba(50,187,187,0.75);
	border-radius:4px;
	}