/***	IMPORT	CSS BASED ON MEDIA QUERIES	***/
@import	url( 'phone.css' )				only screen	and	( max-width: 599px );
@import	url( 'tablet_portrait.css' )	only screen	and	( min-width: 600px ) and ( max-width: 899px );
@import	url( 'tablet_landscape.css' )	only screen	and	( min-width: 900px ) and ( max-width: 1199px );
@import	url( 'desktop.css' )			only screen	and	( min-width: 1200px );


/***	IMPORT DEVELOPER CSS	***/
/* @import	url( 'developer.css' ); */


/***	GLOBAL VARIABLES	***/
:root
{
	/***	FLEET COLORS	***/
	--flt_white		:	#F3EFE7;
	--flt_black		:	#4A4A4A;
	--flt_shadow	:	rgba( 74, 74, 74, 0.1 );	

	--flt_red		:	#C25B50;
	--flt_orange	:	#D8A06E;
	--flt_yellow	:	#E8D38A;
	--flt_green		:	#9AB9A2;
	--flt_blue		:	#6F94B6;


	/***	HEEREMA COLORS	***/	
	--hmc_black			:	#393939;
	--hmc_white			:	#EEE;
	
	--hmc_darkred		:	#AB2238;	/*	BOURBON		*/
	--hmc_red			:	#DC321F;	/*	RED			*/
	--hmc_brightred		:	#E8421B;	/*	BRIGHT RED	*/
	--hmc_orange		:	#ED6F27;	/*	ORANGE		*/
	--hmc_gold			:	#EAA900;	/*	PALE ORANGE	*/
	--hmc_yellow		:	#FFDC00;	/*	YELLOW		*/	
	--hmc_green			:	#00A154;	/*	GREEN		*/	
	--hmc_brightblue	:	#0096DA;	/*	BRIGHT BLUE	*/
	--hmc_blue			:	#0182D0;	/*	BLUE		*/
	--hmc_darkblue		:	#005E8F;	/*	BLUEGREY	*/	
	--hmc_navy			:	#0B3A8D;	/*	DEEP BLUE	*/
}


/***	DEFAULT STYLES	***/


/*	STANDARD ELEMENT STYLES	*/
*
{
	font		: 	normal 16px Calibri, sans-serif;
	color		:	var( --flt_black );
	
	box-sizing	:	border-box;
}

header
{
	display			:	grid;
	grid-template	:	2em / 2em auto 2em;
}

body
{
	width	:	100vw;

	margin	:	0;
	padding	:	0;
	
	background-color	: var( --flt_white );
}

main
{
	max-width	:	1200px;
	margin		:	0 auto;
	padding		:	0 1rem;
}


/*	CLASS STYLES	*/
.icon
{
	height			:	1.2em;
	aspect-ratio	:	1;	
}

.cards
{
	display	:	grid;

	font-family		:	'Crimson Pro', serif;
}

.cards *
{
	font	:	inherit;
}

.card-marker
{
	font-weight	:	bold;

	grid-column	:	1 / -1;
}

.card-container
{
	container-type	:	inline-size;
}

.card
{
	position	:	relative;

	--card-border	:	3.2cqw;
	--card-radius	:	calc( var( --card-border ) * 1.6 );

	background-color	: var( --flt_black );

	border			:	var( --card-border ) solid var( --flt_black );
	border-radius	:	var( --card-radius );

	box-shadow	:	.05em .1em .25em rgba( 0, 0, 0, .22 ),
					0 -.03em .15em rgba( 0, 0, 0, .12 );

	overflow		:	hidden;
}

.card input[ type="checkbox" ]
{
	display	:	none;
}

.card-face
{
	position	:	relative;
	z-index		:	2;

	display			:	flex;
	flex-direction	:	column;
	height			:	100%;

	font-size	:	clamp( .8rem, 5.3cqw, 2rem );

	border-radius	:	calc( .27 * var( --card-radius ) );

	overflow		:	hidden;
}
.card[ data-type="tug" ] .card-face
{
	background-color: var( --flt_yellow );
}
.card[ data-type="construction" ] .card-face
{
	background-color: var( --flt_green );
}
.card[ data-type="barge" ] .card-face
{
	background-color: var( --flt_blue );
}
.card-face::after
{
	content	:	"";
	position:	absolute;
	inset	:	0;

	background-image	:	url(
									"data:image/svg+xml;utf8,\
									<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>\
										<filter id='n'>\
											<feTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='2' stitchTiles='stitch'/>\
										</filter>\
										<rect width='100%' height='100%' filter='url(%23n)' opacity='0.15'/>\
									</svg>" 
								);
	mix-blend-mode		:	multiply;
	pointer-events		:	none;
}

.card-title
{
	flex	:	0 0 8%;

	display			:	flex;
	align-items		:	center;
	justify-content	:	space-between;
	margin			:	.5em .5em;
	padding			:	0.2em .5em;	

	font-weight		:	bold;
	text-transform	:	capitalize;
	letter-spacing	:	.06em;

	overflow		:	hidden;
	text-overflow	:	ellipsis;
	white-space		:	nowrap;

	background-color:	rgba( 255, 255, 255, .35 );

	border			:	.08em solid rgba( 0, 0, 0, .35 );
	border-radius	:	.35em / .9em;

	box-shadow	: inset 0 .06em .08em rgba( 0, 0, 0, .18 );
}

.vessel-motion
{
	display		:	flex;
	align-items	:	center;
	gap			:	0.2em;

	text-transform	:	lowercase;
	font-variant	:	small-caps;
}
.card-face > .vessel-motion
{
	position	:	absolute;
	bottom		:	.2em;
	right		:	.2em;
	padding		:	.1em .35em;

	font-size		:	1.1em;

	background-color	:	var( --flt_white );

	border				:	.08em solid rgba( 0, 0, 0, .45 );
	border-radius		:	.35em / .9em;
	
	box-shadow	:	inset 0 .06em .08em rgba( 0, 0, 0, .18 );
}

.heading
{
	display				:	block;
	height				:	1em;

	transform-origin	:	center;
	transform-box		:	fill-box;

	stroke			:	var( --flt_black );
	stroke-width	:	.08em;
	fill			:	var( --flt_black );
}

.card-image
{
	flex	:	0 0 45%;

	margin	:	0 .5em;
	padding	:	.15em;

	background-color	:	var( --flt_white );
	border				:	.08em solid rgba( 0, 0, 0, .45 );
	border-radius		:	.3em;

	box-shadow	:	inset 0 .08em .15em rgba( 0, 0, 0, .25 );
}

.card-type-status
{
	display			:	flex;
	align-items		:	center;
	justify-content	:	space-between;
	gap				:	1cqw;

	margin		:	.25em .5em;
	padding		:	0 .5em;
}

.card-type
{
	font-size		:	.85em;
	font-weight		:	bold;
	letter-spacing	:	.02em;	
}

.card-status .icon
{
	display			:	block;
	
	stroke			:	var( --flt_black );
	stroke-width	:	calc( .08 * var( --card-border ) );
	fill			:	var( --flt_white );
}
.card-status[ data-age="1" ] .icon
{
	fill	:	var( --flt_green );
}
.card-status[ data-age="2" ] .icon
{
	fill	:	var( --flt_orange );
}
.card-status[ data-age="3" ] .icon
{
	fill	:	var( --flt_red );
}
.card-status[ data-source="terrestrial" ] .satellite
{
	display	:	none;
}
.card-status[ data-source="satellite" ] .terrestrial
{
	display	:	none;
}

.card-content
{
	flex		:	1 1 auto;
	margin		:	0 .5em .5em;
	padding		:	.5em;

	font-size		:	.9em;
	line-height		:	1.1;
	letter-spacing	:	.005em;	

	background-color:	rgba( 255, 255, 255, .35 );

	border			:	.08em solid rgba( 0, 0, 0, .35 );
	border-radius	:	.3em;

	box-shadow	: inset 0 .06em .08em rgba( 0, 0, 0, .18 );

	overflow	:	auto;
}
.card-content dl
{
	display					:	grid;
	grid-template-columns	:	auto 1fr;
	column-gap				:	.8em;
	row-gap					:	.3em;
	margin					:	0;
}

.card-content dt
{
	font-weight	:	bold;
}

.card-content dd
{
	margin	:	0;
}


/*	ID STYLES */
#logo
{
	width	:	100%;
}

#worldmap, #map_1, #map_2, #map_3, #map_4, #map_5, #map_6
{
	width			:	100%;
	aspect-ratio	:	2 / 1;
}