Standardise & styles and improve performance on small displays.

Add inter-route linking from Junctions.

src/lib/components/mapIcons/RouteEndLink.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { IconArrowNarrowRight } from '@tabler/icons-svelte';
 	export let feature: {
 		routeName: string;
 		routeId: string;
@@ -17,16 +18,7 @@
 		</div>
 
 		<div class="icon-circle">
-			<svg viewBox="0 0 24 24" width="20" height="20">
-				<path
-					d="M5 12h14M12 5l7 7-7 7"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="3"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				/>
-			</svg>
+			<IconArrowNarrowRight />
 		</div>
 	</a>
 </div>
@@ -69,12 +61,14 @@
 		font-weight: 700;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
+		font-family: "urwgothic";
 		color: #64748b;
 	}
 
 	.route-id-chip {
 		font-size: 0.6rem;
 		font-weight: 800;
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 		background: #f1f5f9;
 		color: #475569;
 		padding: 2px 6px;
@@ -83,6 +77,7 @@
 	}
 
 	.main-text {
+		font-family: "urwgothic";
 		font-size: 1rem;
 		font-weight: 800;
 		color: #0f172a;
@@ -92,16 +87,15 @@
 	}
 
 	.icon-circle {
-		width: 40px;
-		height: 40px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: #f8fafc;
-		border-radius: 50%;
-		color: #94a3b8;
+		
+		color: #e1ebeb;
+		background-color: #3c6f79;
+		padding: 4px 4px;
+		border-radius: 999px;
 		transition: all 0.3s ease;
-		margin-left: 12px;
 	}
 
 	.wide-button:hover {
@@ -111,8 +105,7 @@
 	}
 
 	.wide-button:hover .icon-circle {
-		background: #4f46e5;
-		color: #ffffff;
+		background-color: #404c55;
 		transform: rotate(-45deg);
 	}