/* ==========================================================================
   Import Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* ==========================================================================
   Register CSS Custom Properties for Animation
   @property tells browser these are <length> values that can be interpolated
   Required for CSS transitions to work on custom properties
   ========================================================================== */
@property --safe-area-left-offset {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true;
}

@property --safe-area-right-offset {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true;
}

@property --safe-area-right-offset-small {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true;
}

@property --safe-area-left-offset-small {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true;
}

@property --safe-area-landscape-top-offset {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true;
}

@property --safe-area-landscape-bottom-offset {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true;
}

@property --right-column-collapse {
	syntax: '<length>';
	initial-value: 0px;
	inherits: true;
}

/* ==========================================================================
   CSS Variables and Custom Properties
   These are reusable values that can be changed in one place to affect the entire site
   Access these using var(--variable-name)
   ========================================================================== */
:root {
	/* Typography - Font settings and sizes */
	--headerfont: 'Roboto', sans-serif; /* Clean, modern font for headers */
	--mainfont: 'Roboto', sans-serif; /* Consistent font for body text */
	--font-size-small: 0.75rem; /* 12px at default browser settings */
	--font-size-base: 12px; /* Base size for most text */
	--font-size-large: 1rem; /* 16px at default browser settings */

	/* Colors - Main color scheme */
	--linkcolor: #2dc4b2; /* Teal color for clickable links */
	--purple: #7858b8; /* Primary brand color */
	--darkPurple: #5b47a6; /* Darker shade for hover states */
	--white: #fff;
	--success-green: #5cb85c; /* Green for success states */

	/* Apple Intelligence inspired rainbow gradient */
	--ai-blue: #4886ff;
	--ai-purple: #7858b8;
	--ai-pink: #ff43b5;
	--ai-orange: #ff8546;
	--ai-rainbow-gradient: linear-gradient(
		to right,
		var(--ai-blue),
		var(--ai-purple),
		var(--ai-pink),
		var(--ai-orange)
	);
	/* Event notification banner gradient */
	--event-banner-gradient: linear-gradient(
		135deg,
		rgba(120, 88, 184, 0.92),
		rgba(255, 67, 181, 0.88)
	);
	/* Darker version for hover states */
	--event-banner-gradient-dark: linear-gradient(
		135deg,
		rgba(91, 71, 166, 0.92),
		rgba(230, 50, 163, 0.88)
	);

	/* Helicopter operator colors */
	--color-airforce: #0652dd;
	--color-army: #00803b;
	--color-coastguard: #ff9900;
	--color-medical: #ffe000;
	--color-other: #505050;
	--color-parkpolice: #04afff;
	--color-newsparkpolice: #ff00ff;
	--color-news: #a600ff;
	--color-police: #ff0000;
	--color-potus: #00b83f;
	--color-unknown: #595959;

	/* Effects - Reusable visual effects */
	--shadow: rgba(0, 0, 0, 0.35) 0px 6px 20px, inset 0 0 0 1px rgba(255, 255, 255, 0.15); /* Enhanced drop shadow with subtle inner glow */
	--bg-translucent: rgba(
		225,
		225,
		235,
		0.25
	); /* More grey tint for glass panels with slight transparency adjustment */
	--bg-purple-tint: rgba(
		230,
		225,
		240,
		0.25
	); /* Very subtle purple tinted glass with slight transparency adjustment */
	--bg-date-controls: rgba(
		200,
		200,
		215,
		0.3
	); /* Even darker controls area with more contrast and slight transparency adjustment */
	--subtle-border: rgba(
		255,
		255,
		255,
		0.25
	); /* Slightly brighter border for glass effect with slight transparency adjustment */
	--modal-overlay: rgba(0, 0, 0, 0.4); /* Dark overlay for modals */
	--glass-blur: 7px; /* Slightly increased blur for a balanced glass effect */

	/* Layout - Key dimensions and spacing */
	--console-width: min(
		15rem,
		calc(100vw - 95px)
	); /* Responsive width that smoothly scales with viewport */
	--console-collapse-distance: 395px; /* How far console slides off screen */
	--console-margin: 10px; /* Space around console */
	--console-padding: 8px; /* Space inside console */
	--icon-spacing: 60px; /* Vertical space between icons */
	--console-hidden-top-offset-multiplier: 1; /* Adjust portrait opener offset without disturbing safe-area calc */

	/* Z-index Layers - Controls stacking order of elements */
	--z-base: 1; /* Base layer */
	--z-popup: 999; /* Popups appear above most elements */
	--z-modal: 990; /* Modals appear above base content */
	--z-banner: 995; /* Event banners sit above base UI but below popups */

	/* Border Radii - Consistent rounded corners */
	--radius-lg: 20px; /* Large rounded corners (console, cards) */
	--radius-sm: 15px; /* Smaller rounded corners (buttons) */

	/* Safe area insets - partial multipliers for Dynamic Island and home indicator */
	--safe-area-top-multiplier: 0.6;
	--safe-area-top: calc(env(safe-area-inset-top, 0px) * var(--safe-area-top-multiplier));
	--safe-area-bottom: env(safe-area-inset-bottom, 0px);
	--safe-area-bottom-multiplier: 0.4;
	--safe-area-bottom-partial: calc(
		env(safe-area-inset-bottom, 0px) * var(--safe-area-bottom-multiplier)
	);
	/* Landscape safe areas - set dynamically by orientationManager.js */
	--safe-area-left: 0px;
	--safe-area-right: 0px;
	--safe-area-landscape-multiplier: 0.8;
	/* Active offset applied to right-side elements (JS sets this directly) */
	--safe-area-right-offset: 0px;
	--safe-area-left-offset: 0px;
	/* Smaller offset for non-interactive elements like titleCard (just clear corners) */
	--safe-area-right-offset-small: 0px;
	--safe-area-left-offset-small: 0px;
	/* Top offset for landscape mode to clear curved corners */
	--safe-area-landscape-top-offset: 0px;
	/* Bottom offset for landscape mode (home button area is larger) */
	--safe-area-landscape-bottom-offset: 0px;
	/* Collapse translation applied to right-column surfaces */
	--right-column-collapse: 0px;
	/* Transition the custom properties themselves */
	transition: --safe-area-right-offset var(--transition-medium),
		--safe-area-left-offset var(--transition-medium), --safe-area-right-offset-small 0.15s ease,
		--safe-area-left-offset-small 0.15s ease, --safe-area-landscape-top-offset 0.15s ease,
		--safe-area-landscape-bottom-offset 0.15s ease,
		--right-column-collapse var(--transition-medium);

	/* Transitions - Animation timing presets */
	--transition-fast: 0.3s ease; /* Quick hover effects */
	--transition-medium: 0.5s ease; /* Standard transitions */
	--transition-slow: 0.8s ease; /* Slower, more noticeable transitions */
}

/* ==========================================================================
   Base Mobile Touch Fixes & Root Elements
   These settings prevent unwanted mobile behaviors and set up the basic page structure
   ========================================================================== */
html {
	/* Reset html to be more standard for iOS PWA edge-to-edge */
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	/* Use absolute positioning instead of fixed to properly fill viewport in iOS PWA mode */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* Full viewport height with fallbacks */
	height: 100vh; /* Standard viewport height */
	height: -webkit-fill-available; /* iOS-specific full height */
	overflow: hidden;

	/* Touch behavior controls */
	touch-action: none; /* Disables browser handling of touch gestures */
	overscroll-behavior: none; /* Prevents pull-to-refresh and bounce */
	-webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS */
	-webkit-touch-callout: none; /* Prevents iOS callout on long press */

	/* Reset default margins and set font */
	margin: 0;
	padding: 0;
	font-family: var(--mainfont);
}

/* Extend body height to include safe areas when present */
@supports (height: env(safe-area-inset-bottom)) {
	body {
		height: calc(100vh + env(safe-area-inset-bottom));
	}
}

.event-banner-container {
	position: fixed;
	/* Include landscape top offset for curved corner clearance */
	top: calc(var(--safe-area-top) + var(--safe-area-landscape-top-offset) + 20px);
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--z-banner);
	/* Use JS-set offset variables for landscape safe area awareness */
	width: min(
		600px,
		calc(100vw - 24px - var(--safe-area-left-offset) - var(--safe-area-right-offset))
	);
	max-width: 90vw;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-medium), transform var(--transition-medium);
	transform-origin: top center;
	will-change: transform, opacity;
}

.event-banner-container.active {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.event-banner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: baseline;
	padding: 14px 18px 16px;
	border-radius: var(--radius-lg);
	backdrop-filter: blur(var(--glass-blur));
	background: var(--bg-purple-tint);
	box-shadow: 0 8px 24px rgba(120, 88, 184, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	animation: bannerSlideIn var(--transition-medium) ease;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	cursor: default;
}

.event-banner-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.event-banner.event-kind-white-house {
	background: linear-gradient(135deg, rgba(120, 88, 184, 0.92), rgba(72, 134, 255, 0.88));
	box-shadow: 0 8px 24px rgba(72, 134, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.event-banner.event-kind-other {
	background: var(--event-banner-gradient);
	box-shadow: 0 8px 24px rgba(255, 67, 181, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.event-banner-badge {
	font-weight: 700;
	font-size: var(--font-size-large);
	letter-spacing: 0.02em;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	align-self: baseline;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	min-width: fit-content;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.event-banner-title {
	font-family: var(--headerfont);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0;
	letter-spacing: 0.02em;
}

.event-banner-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.event-banner-chip {
	display: inline-block;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: white;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.event-banner-meta {
	font-size: 0.85rem;
	opacity: 0.9;
	line-height: 1.45;
	margin-top: 0;
	margin-bottom: 0;
}

.event-banner-schedule-note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 0;
	font-size: 0.75rem;
	font-style: italic;
	opacity: 0.75;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.3;
}

.event-banner-schedule-note i {
	font-size: 0.7rem;
	opacity: 0.8;
}

.event-banner-schedule-note span {
	flex: 1;
}

.event-banner-actions {
	display: flex;
	gap: 6px;
	margin-top: 0;
	flex-wrap: wrap;
}

.event-banner-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(255, 255, 255, 0.25);
	color: var(--white);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
	border: 1px solid rgba(255, 255, 255, 0.3);
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-banner-action-btn:hover {
	background: rgba(255, 255, 255, 0.35);
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.event-banner-action-btn:active {
	transform: translateY(0);
}

.event-banner-action-btn i {
	font-size: 0.75rem;
}

.event-banner-action-btn .fa-link {
	font-size: 0.65rem;
}

.event-banner-dismiss {
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 1.1rem;
	opacity: 0.75;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	align-self: baseline;
	padding: 2px;
	margin-top: 0;
}

.event-banner-dismiss:hover {
	opacity: 1;
	transform: scale(1.1);
}

.event-banner:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 32px rgba(120, 88, 184, 0.45), 0 6px 16px rgba(0, 0, 0, 0.25);
}

.event-banner.event-kind-white-house:hover {
	box-shadow: 0 12px 32px rgba(72, 134, 255, 0.5), 0 6px 16px rgba(0, 0, 0, 0.25);
}

.event-banner.event-kind-other:hover {
	box-shadow: 0 12px 32px rgba(255, 67, 181, 0.5), 0 6px 16px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
	.event-banner-container {
		top: calc(var(--safe-area-top) + var(--safe-area-landscape-top-offset) + 20px);
		width: min(
			600px,
			calc(100vw - 24px - var(--safe-area-left-offset) - var(--safe-area-right-offset))
		);
	}

	.event-banner {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		text-align: center;
		gap: 12px;
		padding: 16px 14px 16px;
		position: relative;
	}

	.event-banner:hover {
		/* Reduce hover effect on mobile */
		transform: none;
	}

	/* More opaque backgrounds on narrow screens */
	.event-banner.event-kind-white-house {
		background: linear-gradient(135deg, rgba(120, 88, 184, 0.97), rgba(72, 134, 255, 0.94));
	}

	.event-banner.event-kind-other {
		background: linear-gradient(135deg, rgba(120, 88, 184, 0.97), rgba(255, 67, 181, 0.94));
	}

	.event-banner-content {
		grid-column: 1;
		text-align: center;
		gap: 4px;
	}

	.event-banner-badge {
		grid-column: 1;
		justify-content: center;
		padding: 6px 10px;
		font-size: 0.9rem;
		margin: 0 auto;
		white-space: nowrap;
	}

	.event-banner-title {
		font-size: 1rem;
		margin-bottom: 0;
		text-align: center;
	}

	.event-banner-chips {
		justify-content: center;
	}

	.event-banner-meta {
		font-size: 0.8rem;
		text-align: center;
	}

	.event-banner-schedule-note {
		justify-content: center;
	}

	.event-banner-schedule-note span {
		flex: 0 1 auto;
	}

	.event-banner-actions {
		margin-top: 0;
		justify-content: center;
	}

	.event-banner-action-btn {
		font-size: 0.75rem;
		padding: 5px 10px;
	}

	.event-banner-dismiss {
		font-size: 1.1rem;
		position: absolute;
		top: 10px;
		right: 12px;
		padding: 4px 6px;
		margin-top: 0;
	}
}

/* Extra narrow screens - make badge even more compact */
@media (max-width: 400px) {
	.event-banner-container {
		top: calc(var(--safe-area-top) + var(--safe-area-landscape-top-offset) + 20px);
	}

	.event-banner-badge {
		padding: 4px 7px;
		font-size: 0.75rem;
		line-height: 1.2;
	}

	.event-banner {
		padding: 12px 10px 14px;
		gap: 10px;
	}

	.event-banner-title {
		font-size: 0.95rem;
	}

	.event-banner-dismiss {
		top: 8px;
		right: 10px;
		padding: 4px 5px;
	}
}

@keyframes bannerSlideIn {
	0% {
		opacity: 0;
		transform: translateY(-12px) scale(0.98);
	}
	70% {
		transform: translateY(0) scale(1.01);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Interactive Elements - Buttons, checkboxes, and hover effects */
input[type='checkbox'] {
	accent-color: var(--purple); /* Colors checkboxes to match theme */
}

.purple {
	color: var(--purple);
	accent-color: var(--purple);
}

.themeHover {
	/* Smooth color transition on hover */
	transition: color var(--transition-fast);
	will-change: color; /* Optimizes animation performance */
}

.themeHover:hover {
	color: var(--darkPurple);
}

.themeHover:not(:hover) {
	color: var(--purple);
}

.fa-stack {
	transition: color 0.5s ease;
}

.fa-stack:hover .fa-circle,
.fa-stack:hover .fa-square {
	color: var(--darkPurple);
	transition: color 0.3s ease;
}

.fa-stack:not(:hover) .fa-circle,
.fa-stack:not(:hover) .fa-square {
	color: var(--purple);
	transition: color 0.3s ease;
}

.inc-dec-buttons {
	background-color: var(--purple);
	border-radius: 15px;
	border: none;
	color: white;
	padding: 6px; /* Consistent padding */
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
	width: calc(50% - 3px); /* Slightly tighter spacing */
	margin: 0; /* Remove vertical margins */
	height: 32px; /* Slightly taller buttons */
	white-space: nowrap;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
	transition: background-color var(--transition-fast), transform var(--transition-fast),
		box-shadow var(--transition-fast);
	margin-top: 3px; /* Small top margin */
}

/* Date navigation container */
.date-navigation {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	margin: 0; /* No margin */
	padding: 0; /* No padding */
	box-sizing: border-box; /* Include padding in width calculation */
}

.inc-dec-buttons:active {
	transform: scale(0.98);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Reduced shadow when pressed */
}

#dec-button {
	margin-right: 3px; /* Reduced margin */
}

/* Hide end date by default (shown via JS when needed) */
#end,
#end-date-label {
	display: none;
}

/* Date input labels - hidden by default, shown when range is enabled */
#start-date-label {
	display: none;
}

/* Add divider between date controls and filter toggles */
.row.labels {
	margin: 6px 0 0 0; /* Restore original top margin */
	padding: 0;
}

h1 {
	font-family: var(--headerfont);
	font-size: 1rem;
	margin-bottom: 5px;
}

h2 {
	font-family: var(--headerfont);
	font-size: 1rem;
	line-height: 20px;
	margin-bottom: 5px;
	padding-top: 10px;
}

h3 {
	font-family: var(--headerfont);
	font-size: 12px;
	line-height: normal;
	margin: 0;
	margin-top: 6px;
	padding: 0;
}

/* Spotted Aircraft section heading */
#console h3 {
	margin-top: 4px;
	margin-bottom: 2px;
	font-weight: 600;
	color: #555;
}

a {
	text-decoration: none;
	color: var(--linkcolor);
}

p {
	font-size: 12px;
	line-height: normal;
	margin: 0;
	padding: 0;
}

#version {
	text-align: right;
	font-size: 10px;
	position: fixed;
	bottom: calc(var(--safe-area-bottom-partial) + var(--safe-area-landscape-bottom-offset));
	left: 50%;
	transform: translateX(-50%);
}

/* ==========================================================================
   Map Components
   Styles for Mapbox elements and map-related components
   ========================================================================== */
#map {
	/* Full viewport coverage */
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

.mapboxgl-popup-content {
	/* Custom styling for map popups */
	padding: 0px !important; /* Remove default padding */
	max-width: 11rem; /* Limit popup width */
	max-height: 40vh; /* Limit height to 40% of viewport */
	box-shadow: var(--shadow); /* Add depth */
	z-index: var(--z-popup); /* Ensure popup appears above map */
}

/* Fancy scrolling shadows effect for popup content */
.scroll-shadows {
	float: left;
	max-height: 40vh;
	overflow: auto;
	/* Creates fade effect at top and bottom of scrollable area */
	background: 
		/* Top fade */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
		/* Bottom fade */ linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
		/* Top shadow */
			radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
		/* Bottom shadow */
			radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
	background-attachment: local, local, scroll, scroll;
}

.scroll-shadows > div {
	padding: 10px;
}

.popupLinks {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 9rem;
}

.mapboxgl-popup {
	z-index: 999;
}

#loader,
#quickLoader {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content; /* Needed for margin: auto */
	height: fit-content; /* Needed for margin: auto */
	opacity: 0.5;
	z-index: 999;
	display: block;
	background-image: var(--event-banner-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

#loader {
	visibility: visible;
	transition: visibility 0s linear 600ms, opacity 600ms;
}

.loaderTransparent {
	visibility: hidden;
}

.hideLoader {
	visibility: hidden !important;
	opacity: 0 !important;
	transition: visibility var(--transition-medium), opacity var(--transition-medium) !important;
}

/* ==========================================================================
   Console Menu
   Main left-side console styling and animations
   ========================================================================== */
#console {
	/* Basic positioning and dimensions */
	position: relative;
	width: var(--console-width);
	height: auto;
	max-height: calc(100vh - 140px); /* Responsive height based on viewport */

	/* Spacing - static margins, safe area via GPU-accelerated transform */
	margin: var(--console-margin);
	margin-left: calc(var(--safe-area-left-offset) + var(--console-margin));
	padding: 0 var(--console-padding) var(--console-padding) var(--console-padding);
	/* Safe area offset via transform for smooth animation */
	transform: translateY(calc(var(--safe-area-top) + var(--safe-area-landscape-top-offset)));
	background-color: var(--bg-purple-tint); /* Use subtle purple tint */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	border: 1px solid var(--subtle-border); /* Subtle border for definition */

	/* Glassmorphism effect */
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur)); /* For Safari */

	/* Scrolling behavior */
	overflow-y: auto; /* Vertical scroll when needed */
	overflow-x: hidden; /* Prevent horizontal scroll */

	/* Hide scrollbar while keeping scroll functionality */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */

	/* Mobile touch behavior */
	touch-action: pan-y; /* Allow vertical touch scrolling */
	overscroll-behavior: contain; /* Prevent scroll chain to body */
	-webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */

	/* Animation */
	transition: transform var(--transition-slow); /* Smooth slide animation */
}

/* Hide scrollbar for Chrome/Safari/Opera */
#console::-webkit-scrollbar {
	display: none;
}

/* Console top shadow indicator for scroll overflow */
#console::before {
	content: '';
	position: sticky;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	margin: 0 calc(-1 * var(--console-padding));
	margin-bottom: -40px;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.12) 30%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 10;
}

/* Show top shadow when scrolled down */
#console.has-top-overflow::before {
	opacity: 1;
}

/* Console bottom shadow indicator for overflow */
#console::after {
	content: '';
	position: sticky;
	display: block;
	bottom: 0;
	transform: translateY(var(--console-padding));
	left: 0;
	right: 0;
	height: calc(40px + var(--console-padding));
	margin: 0 calc(-1 * var(--console-padding));
	margin-top: calc(-40px - var(--console-padding));
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.12) 30%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 10;
}

/* Show shadow when content overflows */
#console.has-overflow::after {
	opacity: 1;
}

/* Console controls and inner elements */
#console-closer {
	/* Close button positioning */
	position: absolute;
	top: 2px;
	right: 2px;
	transform: scale(0.8);
	transition: all 500ms ease;
}

#console-hidden {
	/* Hidden state container - uses full safe area inset for clickability */
	position: absolute;
	top: 5px;
	bottom: 0;
	left: calc(var(--safe-area-left-offset) + 5px);
	right: 0;
	/* Default state (visible) */
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease, visibility 0s linear 0s;
	transform: translateY(
		calc(
			(var(--safe-area-top) * var(--console-hidden-top-offset-multiplier, 1)) +
				var(--safe-area-landscape-top-offset)
		)
	);
}

#console-hidden.invis {
	/* Hidden state with delayed visibility */
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 0s linear 1s;
}

/* Console slide animations */
.collapsedLeft {
	/* Slides console off screen to the left */
	transform: translateX(calc(-1 * var(--console-collapse-distance)));
}

.collapsedRight {
	/* Slides right-column surfaces off screen by setting shared offset */
	--right-column-collapse: var(--console-collapse-distance);
}

html.right-column-hidden {
	/* Inherit collapse offset to all right-column children for load animations */
	--right-column-collapse: var(--console-collapse-distance);
}

/* Combined collapse + safe area transforms for elements that need both */
#console.collapsedLeft {
	transform: translateY(calc(var(--safe-area-top) + var(--safe-area-landscape-top-offset)))
		translateX(calc(-1 * var(--console-collapse-distance)));
}

#details-panel.collapsedLeft {
	transform: translateY(calc(var(--safe-area-top) + var(--safe-area-landscape-top-offset)))
		translateX(calc(-1 * var(--console-collapse-distance)));
}

/* Extra offset when Dynamic Island is on right side in landscape */
body.landscape-right #info-icon,
body.landscape-right #events-icon,
body.landscape-right #patreon-icon,
body.landscape-right #youtube-icon,
body.landscape-right #bluesky-icon,
body.landscape-right #guide-icon,
body.landscape-right #socks-icon {
	transform: translateY(var(--safe-area-top))
		translateX(calc(-1 * var(--safe-area-right-offset) - 15px + var(--right-column-collapse)));
}

/* Info panel also needs extra offset when Dynamic Island is on right */
body.landscape-right #info {
	transform: translateY(var(--safe-area-top))
		translateX(calc(-35px + var(--right-column-collapse)));
}

/* Typography for console elements */
#subheading {
	font-size: 14px; /* Slightly larger than base size */
}

/* Date picker and time controls */
#additive-date-label {
	padding-left: 10px; /* Space from left edge */
}

#additive-date {
	margin: 0;
	font-size: var(--font-size-small); /* Smaller text for dates */
}

/* Date controls wrapper - improve visual hierarchy */
.date-controls {
	margin: 6px calc(-1 * var(--console-padding)); /* Maintain edge-to-edge */
	padding: 6px var(--console-padding); /* Keep content aligned */
	border-top: 1px solid rgba(0, 0, 0, 0.06); /* Subtle top border */
	border-bottom: 1px solid rgba(0, 0, 0, 0.06); /* Subtle bottom border */
	width: calc(100% + 2 * var(--console-padding)); /* Full width accounting for margins */
	box-sizing: border-box;
	background-color: var(--bg-date-controls); /* Use the new darker color variable */
	border-radius: 0;
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur)); /* For Safari */
}

/* Keep the tighter spacing for internal elements */
.date-controls .options {
	margin: 0; /* No margin */
	padding: 0 0 3px 0; /* Tight bottom padding */
	border-bottom: none;
}

/* Date input containers - keep tight */
#start-date,
#end-date {
	font-size: var(--font-size-small);
	margin: 0; /* No margin */
	padding: 0 0 3px 0; /* Tight bottom padding */
	display: flex;
	align-items: center;
	width: 100%; /* Ensure full width */
	position: relative; /* For absolute positioning of calendar icon */
}

/* Date input labels */
#start-date-label,
#end-date-label {
	min-width: 40px; /* Fixed width for labels */
	font-weight: 500;
	color: #555;
	opacity: 0.8; /* Slightly more subtle */
	font-size: 11px; /* Smaller text */
}

/* Refine date input fields */
#start,
#end {
	border: 1px solid rgba(200, 200, 200, 0.8); /* Lighter border for inputs */
	background-color: rgba(255, 255, 255, 0.95); /* Brighter white background */
	flex: 1;
	padding: 4px 8px;
	font-size: var(--font-size-small);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	margin: 0; /* No margin by default */
	text-align: center; /* Center the date text */
	width: 100%; /* Full width by default */
	justify-content: center; /* Center horizontally */
	padding-right: 30px; /* Make room for the calendar icon */
	box-sizing: border-box; /* Include padding in width calculation */
	outline: none; /* Remove default focus outline */
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	color: var(--purple); /* Theme color for date text */
}

/* Date input fields - when focused */
#start:focus,
#end:focus {
	border-color: var(--purple); /* Use theme purple for focus state */
	box-shadow: 0 0 0 2px rgba(120, 88, 184, 0.25); /* Subtle purple glow */
}

/* Date input fields - when label is shown */
.has-label #start,
.has-label #end {
	margin-left: 5px; /* Add margin when label is shown */
	width: calc(100% - 5px); /* Account for left margin */
}

/* Date input placeholder (for browsers that support it) */
#start::placeholder,
#end::placeholder {
	color: #999;
	opacity: 0.7;
}

/* Calendar icon styling */
input[type='date']::-webkit-calendar-picker-indicator {
	opacity: 0.8;
	cursor: pointer;
	padding: 4px;
	margin: 0;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.05);
	transform: scale(1.2);
	position: absolute; /* Position the calendar icon */
	right: 8px; /* Position from right edge */
	top: calc(50% - 10px); /* Center vertically */
}

input[type='date']::-webkit-calendar-picker-indicator:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

/* Operator indicators */
#probable-operators {
	margin: auto; /* Center in container */
}

/* Dots styling (hidden but maintained for JS compatibility) */
.dots {
	/* Circular indicators */
	height: 15px;
	width: 15px;
	border-radius: 50%; /* Perfect circle */
	display: none; /* Hidden as we're using toggle switches now */
}

/* Footer elements */
#disclaimer {
	font-size: var(--font-size-base); /* Standard text size */
}

/* Title card (appears when console is collapsed) */
#titleCard {
	position: absolute;
	top: calc(var(--safe-area-top) + 10px);
	right: calc(var(--safe-area-right-offset-small) + 10px - var(--right-column-collapse));
	font-weight: bold;
	font-size: larger;
	/* Note: right transition handled by --safe-area-right-offset-small in :root */
}

/* Icon styling */
.rightside-icons {
	position: absolute;
	padding: 10px;
	filter: drop-shadow(
		0px 4px 12px rgba(0, 0, 0, 0.35)
	); /* More focused shadow for smaller elements */
}

.infoBubble {
	/* Large info bubble */
	display: block;
	border-radius: var(--radius-sm);
	background: var(--purple);
	color: var(--white);
	padding: 8px;
	margin: 3px;
	text-align: center;
	font-size: var(--font-size-base);
}

.roboflow-icon {
	height: 16px;
	width: 16px;
	vertical-align: middle;
	margin-right: 8px;
	border-radius: 3px;
	background-color: white;
	padding: 2px;
}

.popupBubble {
	/* Compact bubble for popups */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: var(--purple);
	color: var(--white);
	padding: 2px;
	text-align: center;
}

.smallBubble {
	/* Inline small bubble */
	display: inline-block;
	border-radius: var(--radius-sm);
	margin: 2px;
	background: var(--purple);
	color: var(--white);
	padding: 3px;
	text-align: center;
	font-size: var(--font-size-base);
}

/* Bubble links */
.popupBubble a,
.smallBubble a {
	color: var(--white);
	text-decoration: none;
}

a.smallBubble {
	color: var(--white);
	text-decoration: none;
}

/* Info section links */
#infoLinks {
	margin-top: 0px;
	margin-bottom: 10px;
}

.themeButton {
	transition: background var(--transition-fast);
	will-change: transform;
}

.themeButton:hover {
	cursor: pointer;
	background: var(--darkPurple);
}

.themeButton:not(:hover) {
	background: var(--purple);
}

/* info pane - with safe area offset via GPU-accelerated transform */
#info-icon {
	top: 22px;
	right: -15px;
	transform: translateY(var(--safe-area-top))
		translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
}

#events-icon {
	top: calc(22px + var(--icon-spacing));
	right: -15px;
	transform: translateY(var(--safe-area-top))
		translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
}

/* Badge for events icon */
#events-icon::after {
	content: attr(data-badge);
	position: absolute;
	top: 8px;
	right: 16px;
	background: #6366f1;
	color: white;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: bold;
	font-family: var(--mainfont);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	border: 2px solid white;
	z-index: 10;
}

#events-icon.has-badge::after {
	display: flex;
}

/* Right nav dividers - positioned as siblings to icons
   Fixed size, no scaling - just safe area transforms */
.right-nav-divider {
	position: absolute;
	right: 10px;
	width: 50px;
	height: 4px;
	background: var(--event-banner-gradient);
	border-radius: 3px;
	filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.35));
	/* Only safe area transforms - no scaling */
	/* No explicit transition - animates via CSS variable transitions in :root like icons */
	transform: translateY(var(--safe-area-top))
		translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
}

/* Position each divider centered in the gap between icon groups */
#divider-events-patreon {
	/* Centered in gap between events and patreon */
	top: calc(22px + var(--icon-spacing) * 2 + 16px);
}

#divider-bluesky-guide {
	/* Centered in gap between bluesky and guide */
	top: calc(22px + var(--icon-spacing) * 5 + 28px);
}

#patreon-icon {
	top: calc(22px + var(--icon-spacing) * 2 + 12px);
	right: -15px;
	transform: translateY(var(--safe-area-top))
		translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
}

#youtube-icon {
	top: calc(22px + var(--icon-spacing) * 3 + 12px);
	right: -15px;
	transform: translateY(var(--safe-area-top))
		translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
}

#bluesky-icon {
	top: calc(22px + var(--icon-spacing) * 4 + 12px);
	right: -15px;
	transform: translateY(var(--safe-area-top))
		translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
}

#guide-icon {
	top: calc(22px + var(--icon-spacing) * 5 + 24px);
	right: -15px;
	transform: translateY(var(--safe-area-top))
		translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
}

#socks-icon {
	top: calc(22px + var(--icon-spacing) * 6 + 24px);
	right: -15px;
	transform: translateY(var(--safe-area-top))
		translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
}

#info {
	position: absolute;
	top: 40px; /* Static base position */
	right: 70px; /* No landscape offset - panel sits inside the icon area */
	width: var(--console-width);
	height: clamp(1vh, calc(100vh - 160px), 425px);
	padding: var(--console-padding);
	border-radius: var(--radius-lg);
	background-color: var(--bg-purple-tint); /* Use subtle purple tint */
	border: 1px solid var(--subtle-border); /* Subtle border for definition */

	/* Glassmorphism effect */
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur)); /* For Safari */

	overflow-y: auto;
	box-shadow: var(--shadow);
	/* GPU-accelerated safe area offset via transform */
	transform: translateY(var(--safe-area-top)) translateX(var(--right-column-collapse));
	transition: transform var(--transition-medium);
	will-change: transform;
	touch-action: pan-y;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;

	/* Hide scrollbar while keeping scroll functionality */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari/Opera */
#info::-webkit-scrollbar {
	display: none;
}

/* Info top shadow indicator for scroll overflow */
#info::before {
	content: '';
	position: sticky;
	display: block;
	top: calc(-1 * var(--console-padding));
	left: 0;
	right: 0;
	height: calc(40px + var(--console-padding));
	margin: 0 calc(-1 * var(--console-padding));
	margin-bottom: calc(-40px - var(--console-padding));
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.12) 30%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 10;
}

/* Show top shadow when scrolled down */
#info.has-top-overflow::before {
	opacity: 1;
}

/* Info bottom shadow indicator for overflow */
#info::after {
	content: '';
	position: sticky;
	display: block;
	bottom: 0;
	transform: translateY(var(--console-padding));
	left: 0;
	right: 0;
	height: calc(40px + var(--console-padding));
	margin: 0 calc(-1 * var(--console-padding));
	margin-top: calc(-40px - var(--console-padding));
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.12) 30%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 10;
}

/* Show shadow when content overflows */
#info.has-overflow::after {
	opacity: 1;
}

#info-closer {
	position: relative;
	left: 0rem;
	margin-bottom: 4px;
}

.blurbs {
	font-size: 16px;
}

#twit-button {
	vertical-align: middle;
}

.displayNone {
	display: none;
}

.displayBlock {
	display: block;
}

.invis {
	visibility: hidden;
	opacity: 0;
	/* Delay visibility change until opacity fade completes */
	transition: opacity var(--transition-medium), visibility 0s linear 0.5s;
}

.visible {
	visibility: visible;
	opacity: 1;
	/* Immediate visibility change */
	transition: opacity var(--transition-medium), visibility 0s linear 0s;
}

#newSpotBtn {
	position: absolute;
	bottom: calc(var(--safe-area-bottom) + 10px);
	right: calc(var(--safe-area-right-offset) + 10px - var(--right-column-collapse));
	padding: 10px;
	transition: opacity 2s, transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
	filter: drop-shadow(
		0px 4px 12px rgba(0, 0, 0, 0.35)
	); /* Match the shadow used on rightside-icons */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10; /* Ensure the button appears above map elements */
}

#newSpotBtn:hover {
	transform: scale(1.05);
	filter: drop-shadow(0px 5px 15px rgba(120, 88, 184, 0.45));
}

/* Darker gradient on hover for the icon */
#newSpotBtn:hover i.fa-circle-plus,
#newSpotBtn:hover i.fa-circle-plus::before {
	background: var(--event-banner-gradient-dark);
	-webkit-background-clip: text;
	background-clip: text;
}

#newSpotBtn i {
	font-size: 4rem;
	position: relative;
	z-index: 2;
}

/* Fill the Font Awesome circle-plus glyph with the brand gradient */
#newSpotBtn i.fa-circle-plus,
#newSpotBtn i.fa-circle-plus::before {
	background: var(--event-banner-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Keep gradient fill on hover (override .themeHover color change) */
#newSpotBtn.themeHover:hover i.fa-circle-plus,
#newSpotBtn.themeHover:hover i.fa-circle-plus::before {
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Style for the white background circle that goes in the center of the plus icon */
.white-circle-bg {
	position: absolute;
	width: 30px; /* Adjust size as needed */
	height: 30px; /* Adjust size as needed */
	background-color: white;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1; /* Place behind the icon symbol but above the purple */
}

/* Create a solid white background for the circle-plus icon */
.fa-circle-plus {
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Add badge styling for newSpotBtn */
#newSpotBtn::after {
	content: 'SPOT SELECTED AIRCRAFT';
	position: absolute;
	right: 80px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--event-banner-gradient);
	color: white;
	padding: 8px 12px;
	border-radius: 20px;
	font-size: 15px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease,
		filter 0.3s ease;
	cursor: pointer;
	font-family: var(--mainfont);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#newSpotBtn.has-selected::after {
	opacity: 1;
	visibility: visible;
}

#newSpotBtn.has-selected:hover::after {
	background: var(--event-banner-gradient-dark);
	transform: translateX(-6px) translateY(-50%) scale(1.05);
	box-shadow: 0 4px 16px rgba(120, 88, 184, 0.4);
}

#newSpotBtn.has-selected:not(:hover)::after {
	background: var(--event-banner-gradient);
}

/* ==========================================================================
   Media Queries
   Responsive design breakpoints and adaptations
   ========================================================================== */
/* Height-based queries */
@media screen and (max-height: 700px) {
	#console {
		max-height: calc(80vh - 50px);
	}
}

@media screen and (max-height: 500px) {
	#console {
		max-height: calc(70vh - 50px);
	}
}

/* Device orientation queries */
@media screen and (max-width: 600px) and (orientation: portrait) {
	:root {
		--console-hidden-top-offset-multiplier: 1.35; /* Give console opener extra drop in portrait */
	}
	#console {
		/* Safe area offset via transform, just override the base offset amount */
		transform: translateY(calc(var(--safe-area-top) + 25px));
		max-height: 35vh;
	}

	/* Portrait collapsed state for console */
	#console.collapsedLeft {
		transform: translateY(calc(var(--safe-area-top) + 25px))
			translateX(calc(-1 * var(--console-collapse-distance)));
	}

	#info {
		width: calc(var(--console-width) * 0.9);
		/* right: 50px; */
	}

	/* Icons need individual scale combined with safe area transform */
	#info-icon,
	#events-icon,
	#patreon-icon,
	#youtube-icon,
	#bluesky-icon,
	#guide-icon,
	#socks-icon {
		transform: scale(0.9) translateY(var(--safe-area-top))
			translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
	}

	/* Adjust divider positions to account for scaled (smaller) icons */
	#divider-events-patreon {
		top: calc(22px + var(--icon-spacing) * 2 + 12px); /* Desktop is +16px */
	}

	#divider-bluesky-guide {
		top: calc(22px + var(--icon-spacing) * 5 + 24px); /* Desktop is +28px */
	}
}

@media screen and (max-height: 560px) and (orientation: landscape) {
	#console {
		max-height: 60vh;
	}

	#info {
		max-height: 60vh;
	}

	/* Set icon spacing on container so both icons and dividers inherit it */
	.rightNavContainer {
		--icon-spacing: 46px;
	}

	/* Update icon positions - static top values, combine scale with safe area transform */
	#info-icon {
		top: 15px;
		transform: scale(0.72) translateY(var(--safe-area-top))
			translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
	}
	#events-icon {
		top: calc(15px + var(--icon-spacing));
		transform: scale(0.72) translateY(var(--safe-area-top))
			translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
	}
	#patreon-icon {
		top: calc(15px + var(--icon-spacing) * 2 + 8px);
		transform: scale(0.72) translateY(var(--safe-area-top))
			translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
	}
	#youtube-icon {
		top: calc(15px + var(--icon-spacing) * 3 + 8px);
		transform: scale(0.72) translateY(var(--safe-area-top))
			translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
	}
	#bluesky-icon {
		top: calc(15px + var(--icon-spacing) * 4 + 8px);
		transform: scale(0.72) translateY(var(--safe-area-top))
			translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
	}
	#guide-icon {
		top: calc(15px + var(--icon-spacing) * 5 + 16px);
		transform: scale(0.72) translateY(var(--safe-area-top))
			translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
	}
	#socks-icon {
		top: calc(15px + var(--icon-spacing) * 6 + 16px);
		transform: scale(0.72) translateY(var(--safe-area-top))
			translateX(calc(-1 * var(--safe-area-right-offset) + var(--right-column-collapse)));
	}

	/* Extra offset when Dynamic Island is on right side (small landscape screens) */
	body.landscape-right #info-icon,
	body.landscape-right #events-icon,
	body.landscape-right #patreon-icon,
	body.landscape-right #youtube-icon,
	body.landscape-right #bluesky-icon,
	body.landscape-right #guide-icon,
	body.landscape-right #socks-icon {
		transform: scale(0.72) translateY(var(--safe-area-top))
			translateX(
				calc(-1 * var(--safe-area-right-offset) - 15px + var(--right-column-collapse))
			);
	}

	/* Adjust divider size and positions for landscape layout */
	.right-nav-divider {
		width: 36px; /* 50px × 0.72 scale */
		height: 3px;
		right: 17px; /* Adjust to center narrower divider */
	}

	#divider-events-patreon {
		top: calc(15px + var(--icon-spacing) * 2 + 21px);
	}

	#divider-bluesky-guide {
		top: calc(15px + var(--icon-spacing) * 5 + 29px);
	}

	/* Smaller offset for dividers when Dynamic Island is on right */
	body.landscape-right .right-nav-divider {
		transform: translateY(var(--safe-area-top))
			translateX(
				calc(-1 * var(--safe-area-right-offset) + 3px + var(--right-column-collapse))
			);
	}
}

@media screen and (max-height: 460px) and (orientation: landscape) {
	#newSpotBtn {
		right: calc(var(--safe-area-right-offset) + 45px - var(--right-column-collapse));
		transform: scale(0.8);
	}
}

/* The Modal */
#formFrame {
	width: 100%;
	height: 100%; /* Full height */
	border: none;
	display: block;
}

.invisable {
	opacity: 0;
	pointer-events: none;
}

/* Modal Components */
.modal {
	position: fixed;
	z-index: var(--z-modal);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--modal-overlay);

	/* Better transition handling */
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-medium), visibility var(--transition-medium);
	pointer-events: none;

	/* Proper overflow handling */
	overflow: hidden;
}

/* Active state for modal */
.modal.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur)); /* For Safari support */
}

/* Modal content container */
.modal-content {
	position: relative;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	max-width: 1200px; /* Max width for desktop */
	margin: 0 auto; /* Center on desktop */
	background-color: #fefefe;
	transform: translateY(100%);
	transition: transform var(--transition-medium);

	/* Proper overflow handling */
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Active state for modal content */
.modal.active .modal-content {
	transform: translateY(0);
}

/* Modal header styling */
.modal-header {
	/* Portrait: push header content below Dynamic Island */
	padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
	padding-bottom: 8px;
	padding-left: 16px;
	padding-right: 16px;
	background-color: var(--purple);
	color: white;
	flex-shrink: 0; /* Prevent header from shrinking */
	box-sizing: border-box;
}

/* Form modal header - landscape safe area handling */
body.landscape-left .modal-header,
body.landscape-right .modal-header {
	/* In landscape, top safe area is minimal (curved corners) */
	padding-top: calc(var(--safe-area-landscape-top-offset) + 8px);
}

/* Landscape-left: add left padding for Dynamic Island */
body.landscape-left .modal-header {
	padding-left: calc(var(--safe-area-left-offset) + 16px);
}

/* Landscape-right: add right padding for Dynamic Island (close button is on right) */
body.landscape-right .modal-header {
	padding-right: calc(var(--safe-area-right-offset) + 16px);
}

/* Close button */
.close {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

/* Add responsive breakpoint for smaller screens */
@media screen and (max-width: 1200px) {
	.modal-content {
		max-width: 100%;
	}
}

/* ==========================================================================
   Animations
   Keyframe definitions for various animations
   ========================================================================== */
/* Slide up animation for modals */
@keyframes slideIn {
	from {
		transform: translateY(100%); /* Start from below viewport */
		opacity: 0;
	}
	to {
		transform: translateY(0); /* End at natural position */
		opacity: 1;
	}
}

/* Fade in animation */
@keyframes fadeIn {
	from {
		opacity: 0;
	} /* Start fully transparent */
	to {
		opacity: 1;
	} /* End fully visible */
}

/* ==========================================================================
   Custom Scrollbar
   Cross-browser scrollbar styling
   ========================================================================== */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--purple) transparent;
	-webkit-tap-highlight-color: transparent; /* Suppress grey tap highlight on iOS Safari */
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 8px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background-color: var(--purple);
	border-radius: 20px;
	border: 2px solid transparent;
}

*::-webkit-scrollbar-thumb:hover {
	background-color: var(--darkPurple);
}

#details-panel {
	/* Basic positioning and dimensions */
	position: absolute;
	top: 0;
	left: 0;
	width: var(--console-width);
	height: auto;
	max-height: calc(100vh - 140px);
	z-index: 2;

	/* Spacing - static margins, safe area via GPU-accelerated transform */
	margin: var(--console-margin);
	margin-left: calc(var(--safe-area-left-offset) + var(--console-margin));
	padding: 0 var(--console-padding) var(--console-padding) var(--console-padding);
	/* Safe area offset via transform for smooth animation */
	transform: translateY(calc(var(--safe-area-top) + var(--safe-area-landscape-top-offset)));
	background-color: var(--bg-purple-tint); /* Use subtle purple tint */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	border: 1px solid var(--subtle-border); /* Subtle border for definition */

	/* Glassmorphism effect */
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur)); /* For Safari */

	/* Scrolling behavior */
	overflow-y: auto;
	overflow-x: hidden;

	/* Mobile touch behavior */
	touch-action: pan-y;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;

	/* Animation */
	transition: transform var(--transition-medium);

	/* Hide scrollbar while keeping scroll functionality */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari/Opera */
#details-panel::-webkit-scrollbar {
	display: none;
}

/* Details panel top shadow indicator for scroll overflow */
#details-panel::before {
	content: '';
	position: sticky;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	margin: 0 calc(-1 * var(--console-padding));
	margin-bottom: -40px;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.12) 30%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 10;
}

/* Show top shadow when scrolled down */
#details-panel.has-top-overflow::before {
	opacity: 1;
}

/* Details panel bottom shadow indicator for overflow */
#details-panel::after {
	content: '';
	position: sticky;
	display: block;
	bottom: 0;
	transform: translateY(var(--console-padding));
	left: 0;
	right: 0;
	height: calc(40px + var(--console-padding));
	margin: 0 calc(-1 * var(--console-padding));
	margin-top: calc(-40px - var(--console-padding));
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.12) 30%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 10;
}

/* Show shadow when content overflows */
#details-panel.has-overflow::after {
	opacity: 1;
}

#details-content {
	padding: 6px 0;
}

#details-content h3 {
	font-family: var(--headerfont);
	font-size: 14px;
	font-weight: 600;
	color: #666;
	margin: 0;
}

#details-content .detail-row {
	display: grid;
	grid-template-columns: minmax(100px, auto) 1fr;
	gap: 12px;
	padding: 3px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	align-items: baseline;
}

#details-content .detail-row:last-child {
	border-bottom: none;
}

#details-content .detail-label {
	font-family: var(--headerfont);
	font-size: 14px;
	font-weight: 600;
	color: #666;
	margin: 0;
}

#details-content .detail-value {
	font-size: 14px;
	line-height: 1.2;
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0; /* Allows text truncation in grid/flex contexts */
}

/* Links in detail values */
#details-content .detail-value > a {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--linkcolor);
	text-decoration: none;
}

/* Links container in detail values */
#details-content .detail-row:has(a) .detail-value {
	display: flex;
	flex-direction: column;
	min-width: 0; /* Allows text truncation in flex context */
}

/* Buttons/bubbles in detail values */
#details-content .detail-value .popupBubble,
#details-content .detail-value .smallBubble {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	margin: 2px 0;
	white-space: normal;
	word-break: break-word;
}

#details-content .timestamp {
	color: #666;
	font-size: 13px;
	font-style: italic;
	padding: 3px 0;
}

#details-closer {
	/* Close button positioning */
	position: absolute;
	top: 5px;
	right: 2px;
	transition: all 500ms ease;
}

/* Media queries for smaller screens */
@media screen and (max-height: 700px) {
	#details-panel {
		max-height: calc(80vh - 50px);
	}
}

@media screen and (max-height: 500px) {
	#details-panel {
		max-height: calc(70vh - 50px);
	}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	#details-panel {
		/* Safe area offset via transform */
		transform: translateY(calc(var(--safe-area-top) + 25px));
		max-height: 35vh;
	}

	/* Portrait collapsed state for details-panel */
	#details-panel.collapsedLeft {
		transform: translateY(calc(var(--safe-area-top) + 25px))
			translateX(calc(-1 * var(--console-collapse-distance)));
	}
}

@media screen and (max-height: 430px) and (orientation: landscape) {
	#details-panel {
		max-height: 60vh;
	}
}

/* Ensure links in detail values maintain size */
#details-content .detail-value a {
	font-size: inherit;
}

/* Remove the small screens media query that was causing the snap */
@media screen and (max-width: 400px) {
	.popupLinks {
		max-width: 7rem;
	}
}

/* Add touch device media query before the end of the file */
@media (hover: none) and (pointer: coarse) {
	/* Disable hover effects for touch devices */
	.themeButton:hover,
	.themeButton:not(:hover) {
		background: var(--purple);
	}

	.themeHover:hover,
	.themeHover:not(:hover) {
		color: var(--purple);
	}

	.fa-stack:hover .fa-circle,
	.fa-stack:hover .fa-square {
		color: var(--purple);
	}

	#newSpotBtn.has-selected::after {
		background: var(--event-banner-gradient);
	}

	/* Remove all transitions on touch devices */
	.themeButton,
	.themeHover,
	.fa-stack:not(#console-hidden),
	#newSpotBtn::after {
		transition: none !important;
	}
}

#details-panel.spot-popup .detail-row {
	grid-template-columns: minmax(80px, auto) 1fr;
}

#details-panel .know-something {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#details-panel .know-something .know-something-row {
	display: block !important;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#details-panel .know-something .know-something-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
}

#details-panel .know-something .know-something-text {
	font-size: 14px;
	color: #666;
	font-weight: 600;
}

#details-panel .know-something .know-something-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	width: 100%;
}

#details-panel .know-something .know-something-buttons .smallBubble {
	flex: 1 1 65%;
	min-width: 180px;
	padding: 6px 14px;
	margin: 0;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
}

#details-panel .know-something .know-something-buttons .smallBubble i {
	font-size: 14px;
}

/* Gradient styling for mongo Add Details button */
#details-panel .know-something .know-something-buttons .mongo-details-btn {
	background: var(--event-banner-gradient);
	font-size: 14px;
	padding: 8px 16px;
	font-weight: 600;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#details-panel .know-something .know-something-buttons .mongo-details-btn:hover {
	background: var(--event-banner-gradient-dark);
	transform: translateX(-3px) scale(1.05);
	box-shadow: 0 4px 16px rgba(120, 88, 184, 0.4);
}

.cta-section {
	padding: 12px 0;
	margin: 4px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
}

.cta-text {
	font-size: 14px;
	color: #666;
	font-weight: 500;
	margin-bottom: 8px;
}

.cta-buttons {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.cta-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 15px;
	color: white;
	text-decoration: none;
	font-size: 13px;
	min-width: 100px;
}

.cta-button i {
	font-size: 16px;
}

#details-content .detail-value .popupBubble {
	display: inline-flex;
	align-items: center;
	min-width: 110px;
	padding: 6px 10px;
	margin: 0;
	font-size: 12px;
	gap: 4px;
	cursor: pointer;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

#details-content .detail-value .popupBubble a {
	white-space: nowrap;
	overflow: visible;
}

/* Make the enable date range toggle more integrated */
#enable-date-range-label {
	margin: 0 0 4px 0; /* Add a bit more space below the toggle */
	padding: 0;
	display: flex;
	align-items: center;
	font-weight: 500; /* Slightly heavier font weight */
}

/* Session divider */
.session {
	margin-bottom: 0;
}

/* Layout containers */
.row {
	height: auto; /* Flexible row height */
	width: 100%; /* Full width of parent */
}

.label {
	/* Common label styling */
	font-size: var(--font-size-small);
	margin: 0; /* No margin */
	padding: 0 0 0 0; /* Tight bottom padding */
	position: relative;
	display: flex;
	align-items: center;
}

/* Filter-specific label styling */
.label[id^='filter-'] {
	min-height: 28.8px; /* Fixed height to accommodate two lines of text */
}

/* Hide default checkbox */
.label input[type='checkbox'] {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

/* Create toggle switch container */
.switch-toggle {
	position: relative;
	display: inline-block;
	min-width: 42px;
	width: 42px;
	height: 22px;
	border-radius: 20px;
	background-color: #ccc;
	transition: var(--transition-fast);
	margin-right: 5px;
	flex-shrink: 0;
	cursor: pointer;
	box-sizing: border-box;
	z-index: 1;
}

/* Create toggle switch slider (circle) */
.switch-toggle::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: white;
	top: 2px;
	left: 2px;
	transition: var(--transition-fast);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

/* Toggle switch ON state */
.label input:checked + .switch-toggle {
	background-color: var(--purple);
}

/* Toggle switch ON state for each operator type */
#filter-airforce-label input:checked + .switch-toggle {
	background-color: var(--color-airforce);
}

#filter-armyNatGuard-label input:checked + .switch-toggle {
	background-color: var(--color-army);
}

#filter-coastguard-label input:checked + .switch-toggle {
	background-color: var(--color-coastguard);
}

#filter-presidential-label input:checked + .switch-toggle {
	background-color: var(--color-potus);
}

#filter-medical-label input:checked + .switch-toggle {
	background-color: var(--color-medical);
}

#filter-DMVpolice-label input:checked + .switch-toggle {
	background-color: var(--color-police);
}

#filter-parkpolice-label input:checked + .switch-toggle {
	background-color: var(--color-parkpolice);
}

#filter-newsparkpolice-label input:checked + .switch-toggle {
	background-color: var(--color-newsparkpolice);
}

#filter-news-label input:checked + .switch-toggle {
	background-color: var(--color-news);
}

#filter-other-label input:checked + .switch-toggle {
	background-color: var(--color-other);
}

#filter-events-label input:checked + .switch-toggle {
	background-color: #000000;
}

/* Highlight selected event in Events modal */
.events-selected {
	outline: 3px solid #000;
	background: rgba(0, 0, 0, 0.04);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08) inset, 0 8px 20px rgba(0, 0, 0, 0.15);
	transform: scale(1.01);
}

.wh-event-card {
	position: relative;
}

.wh-event-actions {
	display: flex;
	gap: 6px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.event-action-btn,
.wh-event-links a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--purple);
	color: #fff;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition-fast);
	border: none;
	text-decoration: none;
}

.event-action-btn:hover,
.wh-event-links a:hover {
	background: var(--darkPurple);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.event-action-btn:active,
.wh-event-links a:active {
	transform: translateY(0);
}

/* Toggle switch ON state for realtime aircraft - rainbow gradient */
#filter-realtime-label input:checked + .switch-toggle {
	background: var(--ai-rainbow-gradient); /* Rainbow background */
	position: relative;
	border-radius: 20px;
}

/* Inner black background that creates border effect */
#filter-realtime-label input:checked + .switch-toggle::before {
	content: '';
	position: absolute;
	top: 3px; /* Offset from edges to create border effect */
	left: 3px;
	right: 3px;
	bottom: 3px;
	border-radius: 17px; /* Smaller to fit inside */
	background-color: #000000; /* Black inner background */
	z-index: 0;
}

/* Custom slider color for the rainbow gradient toggle */
#filter-realtime-label input:checked + .switch-toggle::after {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	z-index: 2; /* Ensure the slider appears above both layers */
}

/* Move slider to right when checked */
.label input:checked + .switch-toggle::after {
	transform: translateX(20px);
}

/* Label text placement and wrapping */
.label span:not(.switch-toggle):not(.dots) {
	flex: 1;
	min-width: 0;
}

/* Focus styles for accessibility */
.label input:focus + .switch-toggle {
	box-shadow: 0 0 1px var(--purple);
}

/* Add text shadows to improve readability on transparent backgrounds */
#console h1,
#console h3,
#details-panel h1,
#info h1,
#subheading,
.label,
.detail-label {
	text-shadow: none;
}

#imageModal {
	position: fixed;
	z-index: var(--z-modal);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4); /* Neutral tint */
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-medium), visibility var(--transition-medium);
	pointer-events: none;
	overflow: hidden;
}

#imageModal.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
}

#imageModal .modal-content {
	position: relative;
	margin: auto;
	padding: 0;
	width: auto;
	max-width: 700px;
	background-color: rgba(230, 225, 240, 0.25); /* Light purple tint */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform var(--transition-medium);
	max-height: 90vh; /* Ensure it doesn't exceed viewport height */
	height: auto; /* Adjust height to fit content */
}

#imageModal .close {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	margin: 10px;
}

#modalImage.zoom {
	transform: scale(2); /* Double the size */
	transition: transform 0.3s ease;
	cursor: zoom-out;
}

/* ==========================================================================
	Mobile Safari specific fixes
	Place PATREON label below icon to avoid overlap in iOS Safari
	========================================================================== */
@supports (-webkit-touch-callout: none) {
	@media (hover: none) and (pointer: coarse) {
		#patreon-icon {
			/* Ensure stacking context for pseudo-element without changing absolute layout */
			padding-bottom: 0; /* do not alter layout */
			position: absolute !important; /* keep absolute positioning on iOS */
		}

		/* Hide the inline label only on iOS Safari */
		#patreon-icon > span {
			display: none !important;
		}

		/* Draw the label via pseudo-element to ensure correct stacking */
		#patreon-icon::after {
			content: 'PATREON';
			position: absolute;
			left: 50%;
			bottom: 6px; /* sit inside the purple square */
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			font-size: 8px;
			color: white;
			line-height: 1;
			white-space: nowrap;
			z-index: 100; /* ensure above stacked icons */
			pointer-events: none;
		}

		/* Lower the icon layers so the text is always on top */
		#patreon-icon .fa-square {
			z-index: 1 !important;
		}
		#patreon-icon .fa-patreon {
			z-index: 2 !important;
		}
	}
}

/* ==========================================================================
   White House Events Modal
   ========================================================================== */

/* Safe area handling for centered modals */
#whiteHouseModal,
#eventsModal,
#mongoSpotDetailsModal {
	/* Use flexbox to center content within safe area */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Apply safe area padding to the modal container itself */
	padding-top: calc(var(--safe-area-top) + var(--safe-area-landscape-top-offset) + 20px);
	padding-bottom: calc(var(--safe-area-bottom) + var(--safe-area-landscape-bottom-offset) + 20px);
	padding-left: calc(var(--safe-area-left-offset-small) + 20px);
	padding-right: calc(var(--safe-area-right-offset-small) + 20px);
	box-sizing: border-box;
}

.wh-modal-content,
.events-modal-content,
.mongo-spot-modal-content {
	max-width: 600px !important;
	height: auto !important;
	/* Account for safe areas in max-height calculation */
	max-height: calc(
		80vh - var(--safe-area-top) - var(--safe-area-landscape-top-offset) -
			var(--safe-area-bottom) - var(--safe-area-landscape-bottom-offset)
	);
	border-radius: var(--radius-lg);
	background-color: var(--bg-purple-tint);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--subtle-border);
	box-shadow: var(--shadow);
	/* Override transform animation from base modal-content for centered modals */
	transform: scale(0.95);
	opacity: 0;
	/* GPU-accelerated transition for open/close and banner displacement */
	transition: transform var(--transition-medium), opacity var(--transition-medium);
	will-change: transform, opacity;
	margin: 0; /* Reset margin - flexbox handles centering */
}

/* Active state for centered modals - scale in animation */
#whiteHouseModal.active .wh-modal-content,
#eventsModal.active .events-modal-content,
#mongoSpotDetailsModal.active .mongo-spot-modal-content {
	transform: scale(1);
	opacity: 1;
}

.wh-modal-header,
.events-modal-header,
.mongo-spot-modal-header {
	padding: 16px 20px;
	background: rgba(0, 0, 0, 0.15);
	color: white;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.wh-modal-header h2,
.events-modal-header h2,
.mongo-spot-modal-header h2 {
	margin: 0;
	padding: 0;
	font-family: var(--headerfont);
	font-size: 18px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.wh-modal-header .wh-close,
.events-modal-header .events-close,
.mongo-spot-modal-header .mongo-spot-close {
	color: white;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	transition: opacity var(--transition-fast);
	margin: 0;
	padding: 0;
	float: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.wh-modal-header .wh-close:hover,
.events-modal-header .events-close:hover,
.mongo-spot-modal-header .mongo-spot-close:hover {
	opacity: 0.8;
}

.wh-modal-body,
.events-modal-body,
.mongo-spot-modal-body {
	padding: 16px;
	overflow-y: auto;
	max-height: calc(80vh - 80px);
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;

	/* Hide scrollbar while keeping scroll functionality */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.mongo-spot-modal-body::-webkit-scrollbar {
	display: none;
}

/* Mongo spot modal body top shadow indicator for scroll overflow */
.mongo-spot-modal-body::before {
	content: '';
	position: sticky;
	display: block;
	top: -16px;
	left: 0;
	right: 0;
	height: calc(40px + 16px);
	margin: 0 -16px;
	margin-bottom: calc(-40px - 16px);
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.12) 30%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 10;
}

/* Show top shadow when scrolled down */
.mongo-spot-modal-body.has-top-overflow::before {
	opacity: 1;
}

/* Mongo spot modal body bottom shadow indicator for overflow */
.mongo-spot-modal-body::after {
	content: '';
	position: sticky;
	display: block;
	bottom: 0;
	transform: translateY(16px);
	left: 0;
	right: 0;
	height: calc(40px + 16px);
	margin: 0 -16px;
	margin-top: calc(-40px - 16px);
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.2) 0%,
		rgba(0, 0, 0, 0.12) 30%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: 10;
}

/* Show shadow when content overflows */
.mongo-spot-modal-body.has-overflow::after {
	opacity: 1;
}

.wh-schedule-note {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.4;
}

.wh-schedule-note i {
	font-size: 0.875rem;
	opacity: 0.7;
}

.wh-schedule-note span {
	flex: 1;
}

.wh-event-card,
.event-list-item {
	border-radius: var(--radius-lg);
	padding: 14px 18px 16px;
	margin-bottom: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	position: relative;
}

.wh-event-card {
	background: linear-gradient(135deg, rgba(120, 88, 184, 0.92), rgba(72, 134, 255, 0.88));
}

.event-list-item {
	background: var(--event-banner-gradient);
}

.wh-event-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(72, 134, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.event-list-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(255, 67, 181, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.wh-event-card:last-child,
.event-list-item:last-child {
	margin-bottom: 0;
}

.wh-event-date {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--white);
	margin-bottom: 8px;
	font-size: 15px;
}

.wh-event-card .wh-event-title,
.event-list-item .wh-event-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 6px;
	color: var(--white);
}

.wh-event-card .wh-event-title strong,
.event-list-item .wh-event-title strong {
	font-size: 1rem;
	font-weight: 700;
	color: var(--white);
}

.wh-event-card .wh-event-title .event-time,
.event-list-item .wh-event-title .event-time {
	font-size: 0.8rem;
	font-weight: 500;
	opacity: 0.9;
	white-space: nowrap;
	color: var(--white);
}

.wh-event-time {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--white);
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
}

.wh-event-time i {
	font-size: 13px;
	color: var(--white);
}

.wh-event-card .wh-event-details,
.event-list-item .wh-event-details {
	color: var(--white);
	opacity: 0.9;
	line-height: 1.6;
	margin-bottom: 10px;
	font-size: 13px;
	max-height: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wh-event-type {
	display: inline-block;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: white;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.wh-no-events {
	text-align: center;
	padding: 40px 20px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: var(--radius-sm);
	margin: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wh-no-events i {
	font-size: 48px;
	color: var(--purple);
	opacity: 0.8;
	margin-bottom: 16px;
	display: block;
}

.wh-no-events p {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	line-height: 1.5;
}

.wh-loading {
	text-align: center;
	padding: 40px 20px;
	color: #666;
	font-size: 15px;
}

.wh-loading i {
	font-size: 32px;
	color: var(--purple);
	margin-bottom: 16px;
	display: block;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
	/* Reduce padding on small screens - safe area padding still applies from container */
	#whiteHouseModal,
	#eventsModal,
	#mongoSpotDetailsModal {
		padding-left: calc(var(--safe-area-left-offset-small) + 10px);
		padding-right: calc(var(--safe-area-right-offset-small) + 10px);
	}

	.wh-modal-content,
	.events-modal-content,
	.mongo-spot-modal-content {
		max-width: 95% !important;
		/* Flexbox handles centering - no margin needed */
	}

	.wh-modal-header h2,
	.events-modal-header h2,
	.mongo-spot-modal-header h2 {
		font-size: 16px;
	}
}

/* ==========================================================================
   Events Modal
   ========================================================================== */
.events-modal-body .wh-event-actions a,
.events-modal-body .event-action-btn,
.mongo-spot-modal-body .cb-actions .event-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(255, 255, 255, 0.25);
	color: var(--white);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
	border: 1px solid rgba(255, 255, 255, 0.3);
	text-decoration: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.events-modal-body .wh-event-actions a:hover,
.events-modal-body .event-action-btn:hover,
.mongo-spot-modal-body .cb-actions .event-action-btn:hover {
	background: rgba(255, 255, 255, 0.35);
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Circle-bot Details Modal
   ========================================================================== */
.mongo-spot-modal-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cb-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cb-field + .cb-field {
	margin-top: 12px;
}

.cb-label {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--white);
	display: flex;
	align-items: center;
	gap: 6px;
}

.cb-label .cb-required {
	font-size: 0.8rem;
	background: rgba(255, 255, 255, 0.2);
	color: var(--white);
	padding: 1px 6px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cb-input,
.cb-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.18);
	color: var(--white);
	font-size: 0.95rem;
	line-height: 1.4;
	outline: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
		background var(--transition-fast);
}

.cb-input::placeholder,
.cb-textarea::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.cb-input:focus,
.cb-textarea:focus {
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.24);
}

.cb-textarea {
	min-height: 90px;
	resize: vertical;
}

.cb-help {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.4;
}

.cb-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 4px;
}

.cb-error {
	font-size: 0.8rem;
	color: #ffb3c1;
	line-height: 1.3;
}

.cb-success {
	font-size: 0.85rem;
	color: #c3f7d3;
	line-height: 1.3;
}

.cb-status {
	min-height: 18px;
}

.cb-status[hidden] {
	display: none;
}

/* Contributor input wrapper for save button positioning */
.cb-contributor-input-wrapper {
	position: relative;
	display: block;
}

.cb-contributor-input-wrapper .cb-input {
	padding-right: 120px; /* Make room for the button */
}

/* Save username button - positioned inside input, matches add details panel theme */
.cb-save-username-button {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: auto !important;
	max-width: none;
	min-width: auto;
	background: transparent !important;
	background-color: transparent !important;
	color: rgba(255, 255, 255, 0.85) !important;
	padding: 0 !important;
	margin: 0;
	height: auto;
	font-size: 0.85em;
	box-shadow: none !important;
	border: 0 !important;
	text-transform: none !important;
	font-weight: 500;
	z-index: 10;
	line-height: 1.2;
	cursor: pointer;
	transition: color var(--transition-fast);
}

.cb-save-username-button:hover {
	color: rgba(255, 255, 255, 1) !important;
	background: transparent !important;
	background-color: transparent !important;
}

.cb-save-username-button i {
	margin-right: 4px;
	font-size: 1em;
}

.cb-save-username-button.saved-state {
	background: transparent !important;
	background-color: transparent !important;
	color: #c3f7d3 !important; /* Success green matching cb-success */
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
	.event-list-item {
		padding: 12px 16px;
	}
}

/* ==========================================================================
   Banner / Modal Interactions
   ========================================================================== */
/* When banner is visible, shift modal CONTENT down (not the overlay background) */
body.banner-visible #whiteHouseModal.active .wh-modal-content,
body.banner-visible #eventsModal.active .events-modal-content,
body.banner-visible #mongoSpotDetailsModal.active .mongo-spot-modal-content {
	/* Combine scale(1) from active state with translateY for banner displacement */
	/* GPU-accelerated for smooth 60fps animation */
	transform: scale(1) translateY(calc(var(--banner-offset, 160px) / 2 + 20px));
}

/* ==============================================================
	Add Details (Circle‑bot) Modal – colorful glass direction
	- Keep shared structure, add brand gradients and accents
   ==============================================================
*/
/* Vibrant gradient header to match glassy White House styling */
.mongo-spot-modal-header {
	background: var(--event-banner-gradient);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

/* Strengthen glass on the details container slightly for contrast */
.mongo-spot-modal-content {
	background: radial-gradient(
			1100px 550px at -10% -10%,
			rgba(120, 88, 184, 0.28),
			rgba(120, 88, 184, 0) 58%
		),
		radial-gradient(
			840px 480px at 110% 110%,
			rgba(255, 67, 181, 0.2),
			rgba(255, 255, 255, 0) 62%
		),
		linear-gradient(to bottom, rgba(230, 225, 240, 0.36), rgba(230, 225, 240, 0.26));
	border: 1px solid rgba(120, 88, 184, 0.36);
}

/* Inputs: emphasize purple focus with soft glow */
.mongo-spot-modal-body .cb-input:focus,
.mongo-spot-modal-body .cb-textarea:focus {
	border-color: rgba(120, 88, 184, 0.9);
	box-shadow: 0 0 0 2px rgba(120, 88, 184, 0.28);
	background: rgba(255, 255, 255, 0.26);
}

/* Required chip: subtle gradient badge */
.mongo-spot-modal-body .cb-label .cb-required {
	background: linear-gradient(135deg, rgba(120, 88, 184, 0.65), rgba(255, 67, 181, 0.6));
	border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Action buttons – colorful submit, quiet cancel */
.mongo-spot-modal-body .cb-actions .cb-submit {
	background: var(--event-banner-gradient);
	border: 1px solid rgba(255, 255, 255, 0.35);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.mongo-spot-modal-body .cb-actions .cb-submit:hover {
	background: var(--event-banner-gradient-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(120, 88, 184, 0.35);
}

.mongo-spot-modal-body .cb-actions .cb-cancel {
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   Landscape Orientation Safe Area Handling
   Dynamic Island position changes based on rotation direction.
   JavaScript (orientationManager.js) sets body classes and CSS variables.
   ========================================================================== */

/* Base transitions for smooth orientation changes */
/* Console and details-panel: margin-left handled by CSS variable, safe area via transform */
#console,
#details-panel {
	transition: transform var(--transition-medium);
	will-change: transform;
}

/* Console-hidden: left/top animation handled by CSS variable transitions in :root */
#console-hidden {
	transition: transform var(--transition-slow);
}

/* titleCard: orientation-safe movement handled via CSS variables */
#titleCard {
	will-change: transform;
}

/* Info panel - GPU-accelerated transform only */
#info {
	will-change: transform;
}

/* newSpotBtn: movement handled via CSS variables */
#newSpotBtn {
	will-change: transform;
}

/* Right-side icons - GPU-accelerated transform */
#info-icon,
#events-icon,
#patreon-icon,
#youtube-icon,
#bluesky-icon,
#guide-icon,
#socks-icon {
	will-change: transform;
}