/* Charles Wright 2001 – UK number plate style (local) */
@font-face {
	font-family: "Charles Wright 2001";
	src: url("/fonts/CharlesWright.woff2") format("woff2"),
	     url("/fonts/CharlesWright2001.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Site typography: Red Hat Display Light (300) */
html,
body {
	font-family: "Red Hat Display", sans-serif;
	font-weight: 300;
}

/* App-like: prevent horizontal overflow and horizontal drag/scroll on iOS */
html {
	overflow-x: hidden;
	max-width: 100vw;
	overscroll-behavior-x: none;
}
body {
	overflow-x: hidden;
	max-width: 100vw;
	overscroll-behavior-x: none;
}
#app {
	max-width: 100vw;
	min-width: 0;
}
#app main {
	max-width: 100%;
	min-width: 0;
}
#map-panel {
	max-width: 100%;
}

/* Ensure map container and canvas receive pointer events so the map stays draggable; !important wins over other CSS */
#map-panel,
#map,
#map .mapboxgl-canvas-container,
#map .mapboxgl-canvas {
	pointer-events: auto !important;
}

/* Overlay sits above map and captures all pointer events so list/controls always work; map is draggable only outside the overlay */
#departures-overlay {
	z-index: 100;
	pointer-events: auto;
}
#departures-overlay * {
	pointer-events: auto;
}

/* Touch: vertical pan only on scroll containers so map can be panned elsewhere; manipulation for instant tap on controls */
#departures-overlay #departures-list,
#departures-overlay #find-stop-list,
#departures-overlay #favourites-list {
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
}
#departures-overlay button,
#departures-overlay [role="button"],
#departures-overlay .departure-card {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
/* Minimum 44px touch targets (iOS HIG) */
#departures-overlay button {
	min-height: 44px;
}
#departures-overlay #btn-favourites,
#departures-overlay #btn-card-close,
#departures-overlay .favourite-btn {
	min-width: 44px;
}
#departures-overlay .departure-card {
	min-height: 44px;
}
#departures-overlay .find-direction-pill {
	min-height: 44px;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
@media (min-width: 768px) {
	#departures-overlay .find-direction-pill {
		min-height: 0;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}
}

/* Expanded card fills available area (Switch stop / Favourites); strict width cap on iOS */
.departures-overlay.departures-overlay--expanded {
	max-height: none;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
/* Mobile: generous insets so card doesn’t touch screen edges; safe area respected */
@media (max-width: 1023px) {
	.departures-overlay.departures-overlay--expanded {
		left: max(1rem, env(safe-area-inset-left, 0px));
		right: max(1rem, env(safe-area-inset-right, 0px));
		top: max(0.75rem, env(safe-area-inset-top, 0px));
		bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
		max-width: calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
	}
}
@supports (width: 100dvw) {
	@media (max-width: 1023px) {
		.departures-overlay.departures-overlay--expanded {
			max-width: calc(100dvw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
		}
	}
}
@media (min-width: 1024px) {
	.departures-overlay.departures-overlay--expanded {
		left: 0.75rem;
		right: auto;
		top: 0.75rem;
		bottom: 0.75rem;
		max-width: 28rem;
		width: 28rem;
	}
}

/* Card and panels: contain width so long text (e.g. stop names) doesn’t expand past viewport */
.departures-overlay {
	min-width: 0;
	overflow-x: hidden;
}
.departures-overlay .card-panel {
	min-width: 0;
	overflow-x: hidden;
}
#find-stop-list,
#favourites-list {
	min-width: 0;
	overflow-x: hidden;
}
#find-stop-search,
#card-panel-switch .shrink-0 {
	min-width: 0;
	max-width: 100%;
}
#find-stop-search {
	min-height: 44px;
	touch-action: manipulation;
}
/* iOS Safari: prevent zoom on focus when opening Find stop (requires font-size >= 16px) */
@media (max-width: 1023px) {
	#find-stop-search {
		font-size: 16px;
	}
}

.favourite-btn {
	-webkit-tap-highlight-color: transparent;
}

/* Map vehicle markers: dot + bearing arrow */
.vehicle-marker {
	background: none !important;
	border: none !important;
}

/* Followed bus stays on top when markers overlap */
.vehicle-marker-focused {
	z-index: 1;
}

.vehicle-marker-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 36px;
	height: 36px;
	transform-origin: 18px 18px;
}

.vehicle-arrow {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 8px solid #3b82f6;
	margin-bottom: -2px;
}

.vehicle-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #3b82f6;
	color: white;
	font-size: 0.7rem;
	font-weight: 700;
}

/* Buses on departure list but not selected – light blue */
.vehicle-marker-on-list .vehicle-arrow {
	border-bottom-color: #7dd3fc;
}
.vehicle-marker-on-list .vehicle-dot {
	background: #7dd3fc;
	color: #0c4a6e;
}

/* Buses not on the list – white */
.vehicle-marker-unmatched .vehicle-arrow {
	border-bottom-color: #ffffff;
}
.vehicle-marker-unmatched .vehicle-dot {
	background: #ffffff;
	color: #3b82f6;
}

/* Live indicator on departure row (matched vehicle) */
.dep-matched-icon.dep-live-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #22c55e;
}
.dep-live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
	animation: dep-live-pulse 1.5s ease-in-out infinite;
}
@keyframes dep-live-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(1.15); }
}

/* Live data indicator: green dot fades over 5s; refreshed when new data arrives */
.live-indicator-wrap:not(.hidden) {
	display: flex;
}
.live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	flex-shrink: 0;
}
.live-dot.live-dot--animating {
	animation: live-dot-fade 5s ease-out forwards;
}
@keyframes live-dot-fade {
	0% { opacity: 1; }
	100% { opacity: 0.2; }
}

/* Departure row: fixed-width time column so times align */
#departures-overlay .departure-card .dep-time {
	min-width: 2.5rem;
	width: 2.5rem;
	text-align: left;
	font-variant-numeric: tabular-nums;
}

/* Departure row typography tweaks */
.dep-main {
	font-size: 0.74rem;
}

#departures-list > .departure-card:last-child {
	border-bottom-width: 0;
}

/* Grey out entire row for departed trips */
.departure-card[data-status="departed"] {
	opacity: 0.65;
}
.departure-card[data-status="departed"] .dep-time,
.departure-card[data-status="departed"] .dep-main,
.departure-card[data-status="departed"] .destination,
.departure-card[data-status="departed"] .status-pill,
.departure-card[data-status="departed"] .meta {
	color: #94a3b8;
}
.departure-card[data-status="departed"]:hover {
	opacity: 0.85;
}

.ios-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 44px;
	height: 24px;
	border-radius: 9999px;
	background-color: #111827;
	border: 1px solid #4b5563;
	padding: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ios-switch-thumb {
	width: 18px;
	height: 18px;
	border-radius: 9999px;
	background-color: #f9fafb;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	transform: translateX(0);
	transition: transform 0.2s ease;
}

.ios-switch--on {
	background-color: #22c55e;
	border-color: #22c55e;
}

.ios-switch--on .ios-switch-thumb {
	transform: translateX(18px);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Departure status pill styling */
.status-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.1rem 0.45rem;
	border-radius: 9999px;
	font-size: 0.7rem;
	font-weight: 600;
	color: #e5e7eb;
	background-color: rgba(15, 23, 42, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.75);
}

.status-pill.status-cancelled {
	background-color: rgba(127, 29, 29, 0.95);
	border-color: rgba(248, 113, 113, 0.95);
	color: #fee2e2;
}

.status-pill.status-late {
	background-color: rgba(120, 53, 15, 0.95);
	border-color: rgba(251, 191, 36, 0.95);
	color: #fffbeb;
}

.status-pill.status-onTime {
	background-color: rgba(22, 101, 52, 0.95);
	border-color: rgba(74, 222, 128, 0.95);
	color: #dcfce7;
}

.status-pill.status-departed {
	background-color: rgba(51, 65, 85, 0.95);
	border-color: rgba(148, 163, 184, 0.95);
	color: #cbd5e1;
}

.registration-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0.02rem 0.18rem;
	padding-block: 0.02rem 0;
	border-radius: 0.2rem;
	background-color: #f9fafb;
	color: #111827;
	font-family: "Charles Wright 2001", "Charles Wright", ui-monospace, monospace;
	font-size: 0.64rem;
	font-weight: 700;
	border: 1px solid #d1d5db;
	box-shadow: 0 0 0 1px #e5e7eb inset;
}

/* "Was the" row: full width (via -mx-3 in HTML), livery background with overlay for readability */
.following-bus-row {
	position: relative;
	min-height: 2.25rem;
}