.aaws-aft {
	--aft-sea: #071b2a;
	--aft-panel: #0d293d;
	--aft-line: #2c5267;
	--aft-cyan: #48dcff;
	--aft-amber: #ffc260;
	--aft-muted: #a7bcc8;
	--aft-white: #f8fcff;
	color: var(--aft-white);
	margin: 0 auto 3rem;
	max-width: 1440px;
	padding: clamp(1rem, 3vw, 2rem);
}

.aaws-aft__intro {
	background: linear-gradient(135deg, #073957, #071b2a 64%);
	border: 1px solid var(--aft-line);
	border-radius: 22px 22px 0 0;
	padding: clamp(1.25rem, 4vw, 2.5rem);
}

.aaws-aft__eyebrow {
	color: var(--aft-cyan);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	margin: 0 0 .6rem;
	text-transform: uppercase;
}

.aaws-aft h1 {
	color: #fff;
	font-size: clamp(2rem, 5vw, 4rem);
	letter-spacing: -.035em;
	line-height: 1.02;
	margin: 0 0 .75rem;
}

.aaws-aft__intro > p:last-child {
	color: #d8e8ef;
	font-size: clamp(1rem, 2vw, 1.2rem);
	margin: 0;
}

.aaws-aft__status-row {
	align-items: center;
	background: #081f30;
	border-left: 1px solid var(--aft-line);
	border-right: 1px solid var(--aft-line);
	display: flex;
	flex-wrap: wrap;
	gap: .7rem 1rem;
	justify-content: space-between;
	padding: .85rem 1rem;
}

.aaws-aft__badge {
	background: #132f42;
	border: 1px solid var(--aft-line);
	border-radius: 999px;
	color: var(--aft-muted);
	display: inline-flex;
	font-size: .86rem;
	font-weight: 700;
	padding: .42rem .75rem;
}

.aaws-aft__badge.is-live { border-color: #2b9661; color: #bfffdc; }
.aaws-aft__badge.is-empty { border-color: #9c722e; color: #ffe4aa; }
.aaws-aft__updated { color: var(--aft-muted); font-size: .8rem; }

.aaws-aft__layout {
	background: var(--aft-sea);
	border: 1px solid var(--aft-line);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
	min-height: 660px;
}

.aaws-aft__map-wrap { min-height: 660px; position: relative; }
.aaws-aft__map { height: 100%; inset: 0; position: absolute; width: 100%; }
.aaws-aft__map.is-unavailable { display: grid; place-items: center; padding: 2rem; text-align: center; }

.aaws-aft__legend {
	align-items: center;
	background: rgba(7, 27, 42, .92);
	border: 1px solid var(--aft-line);
	border-radius: 999px;
	bottom: 1rem;
	display: flex;
	font-size: .75rem;
	gap: .5rem;
	left: 1rem;
	padding: .45rem .7rem;
	position: absolute;
	z-index: 3;
}

.aaws-aft__airport-dot,
.aaws-aft__airport-marker {
	background: var(--aft-amber);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
	height: 13px;
	padding: 0;
	width: 13px;
}

.aaws-aft__airport-marker { cursor: pointer; height: 18px; width: 18px; }

.aaws-aft__plane {
	align-items: center;
	appearance: none;
	background: #0a2a3e;
	border: 1px solid #5de4ff;
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .55);
	color: var(--aft-cyan);
	cursor: pointer;
	display: flex;
	font-size: 20px;
	height: 36px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transform: rotate(var(--aaws-plane-track, 0deg));
	transition: transform .4s ease;
	width: 36px;
}

.aaws-aft__plane:hover,
.aaws-aft__plane:focus-visible { outline: 3px solid rgba(72, 220, 255, .45); }

.aaws-aft__panel {
	background: rgba(10, 35, 52, .98);
	border-left: 1px solid var(--aft-line);
	max-height: 660px;
	overflow: auto;
}

.aaws-aft__tabs {
	background: #0d293d;
	border-bottom: 1px solid var(--aft-line);
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: sticky;
	top: 0;
	z-index: 2;
}

.aaws-aft__tabs button {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--aft-muted);
	cursor: pointer;
	font-weight: 800;
	padding: 1rem;
}

.aaws-aft__tabs button.is-active {
	box-shadow: inset 0 -3px var(--aft-cyan);
	color: #fff;
}

.aaws-aft__schedule { padding: .35rem 1rem 1rem; }

.aaws-aft__flight {
	align-items: center;
	border-bottom: 1px solid rgba(44, 82, 103, .65);
	display: grid;
	gap: .7rem;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	padding: .85rem 0;
}

.aaws-aft__time { color: var(--aft-amber); font-variant-numeric: tabular-nums; font-weight: 800; }
.aaws-aft__route { min-width: 0; }
.aaws-aft__route strong,
.aaws-aft__route small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aaws-aft__route small { color: var(--aft-muted); font-size: .75rem; margin-top: .2rem; }
.aaws-aft__code { color: var(--aft-cyan); font-size: .8rem; font-weight: 800; }
.aaws-aft__empty { color: var(--aft-muted); padding: 1rem 0; }

.aaws-aft__notes {
	background: #f4f8fa;
	border: 1px solid #dbe6eb;
	border-radius: 0 0 22px 22px;
	color: #304956;
	font-size: .82rem;
	padding: 1rem 1.25rem;
}

.aaws-aft__notes p { margin: .25rem 0; }
.aaws-aft .maplibregl-popup-content { color: #173746; font: 14px/1.45 system-ui, sans-serif; }
.aaws-aft .maplibregl-ctrl-attrib { font-size: 10px; }

@media (max-width: 900px) {
	.aaws-aft__layout { grid-template-columns: 1fr; }
	.aaws-aft__map-wrap { min-height: 58vh; }
	.aaws-aft__panel { border-left: 0; border-top: 1px solid var(--aft-line); max-height: none; }
}

@media (max-width: 520px) {
	.aaws-aft { padding: .75rem; }
	.aaws-aft__status-row { align-items: flex-start; flex-direction: column; }
	.aaws-aft__map-wrap { min-height: 52vh; }
	.aaws-aft__flight { gap: .45rem; grid-template-columns: 64px minmax(0, 1fr) auto; }
	.aaws-aft__legend { border-radius: 10px; max-width: calc(100% - 2rem); }
}

