/**
 * Aviation Hub Live — reader feed.
 *
 * Every value inherits from the Flightdeck theme where it exists and falls
 * back to the same value hard-coded, so the feed still looks right if the
 * theme is switched.
 *
 * The feed is drawn as a navigation display: updates are waypoints on a
 * dashed track, timestamps read in mono as local time over Zulu, and the
 * colour of each waypoint carries the same meaning as the theme's category
 * chips — red is a warning, amber a caution, green confirmed, cyan analysis.
 */

.tahl {
	--tahl-ink:      var(--fd-ink, #0A1826);
	--tahl-ink-2:    var(--fd-ink-2, #10263B);
	--tahl-slate:    var(--fd-slate, #1C3A56);
	--tahl-steel:    var(--fd-steel, #5A7284);
	--tahl-mist:     var(--fd-mist, #A9B8C4);
	--tahl-paper:    var(--fd-paper, #F4F6F9);
	--tahl-paper-2:  var(--fd-paper-2, #E8ECF1);
	--tahl-red:      var(--fd-red, #EC1E3C);
	--tahl-amber:    var(--fd-amber, #F5A314);
	--tahl-cyan:     var(--fd-cyan, #12B8CE);
	--tahl-green:    var(--fd-green, #16BE74);

	--tahl-mono:     var(--fd-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
	--tahl-display:  var(--fd-display, "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif);
	--tahl-radius:   var(--fd-radius, 4px);
	--tahl-ease:     var(--fd-ease, cubic-bezier(0.22, 0.61, 0.36, 1));

	--tahl-signal:   var(--tahl-red);

	display: block;
	margin-block: 2.5rem;
	scroll-margin-top: 6rem;
	font-family: inherit;
}

.tahl--paused { --tahl-signal: var(--tahl-amber); }
.tahl--ended  { --tahl-signal: var(--tahl-steel); }

/* --------------------------------------------------------------------------
   Status panel
   -------------------------------------------------------------------------- */

.tahl .tahl__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	padding: 0.85rem 1.1rem;
	background: var(--tahl-ink);
	border-top: 3px solid var(--tahl-signal);
	border-radius: var(--tahl-radius) var(--tahl-radius) 0 0;
	color: #fff;
}

.tahl .tahl__status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--tahl-mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.tahl .tahl__beacon {
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--tahl-signal);
	flex: none;
}

.tahl--live .tahl__beacon::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1px solid var(--tahl-signal);
	animation: tahl-ping 1.9s var(--tahl-ease) infinite;
}

.tahl .tahl__readout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	font-family: var(--tahl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--tahl-mist);
}

.tahl .tahl__stat { white-space: nowrap; }
.tahl .tahl__count { color: #fff; }
.tahl .tahl__ago { color: #fff; }

/* --------------------------------------------------------------------------
   Key facts — an FMS-style data block
   -------------------------------------------------------------------------- */

.tahl .tahl__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	margin: 0;
	padding: 1px;
	background: var(--tahl-paper-2);
	border-inline: 1px solid var(--tahl-paper-2);
}

.tahl .tahl__fact {
	padding: 0.7rem 0.9rem;
	background: #fff;
}

.tahl .tahl__fact dt {
	margin: 0 0 0.2rem;
	font-family: var(--tahl-mono);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tahl-steel);
}

.tahl .tahl__fact dd {
	margin: 0;
	font-family: var(--tahl-mono);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--tahl-ink);
	word-break: break-word;
}

/* --------------------------------------------------------------------------
   Standing summary
   -------------------------------------------------------------------------- */

.tahl .tahl__summary {
	padding: 1.1rem 1.2rem;
	background: #fff;
	border: 1px solid var(--tahl-paper-2);
	border-left: 3px solid var(--tahl-cyan);
	border-top: 0;
}

.tahl .tahl__summary-title {
	margin: 0 0 0.5rem;
	padding: 0;
	font-family: var(--tahl-mono);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tahl-steel);
}

.tahl .tahl__summary-title::before { content: none; }

.tahl .tahl__summary-body { font-size: 0.98em; }
.tahl .tahl__summary-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Key moments
   -------------------------------------------------------------------------- */

.tahl .tahl__moments {
	padding: 1rem 1.2rem;
	background: var(--tahl-paper);
	border: 1px solid var(--tahl-paper-2);
	border-top: 0;
}

.tahl .tahl__moments-title {
	margin: 0 0 0.6rem;
	padding: 0;
	font-family: var(--tahl-mono);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tahl-steel);
}

.tahl .tahl__moments-title::before { content: none; }

.tahl .tahl__moments-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.35rem;
}

.tahl .tahl__moments-list li { margin: 0; }

.tahl .tahl__moments-list a {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.15rem 0;
	color: var(--tahl-ink);
	text-decoration: none;
	background: none;
}

.tahl .tahl__moments-list a:hover .tahl__moments-text { text-decoration: underline; }

.tahl .tahl__moments-time {
	flex: none;
	font-family: var(--tahl-mono);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--tahl-cyan);
}

.tahl .tahl__moments-text { font-size: 0.92em; line-height: 1.4; }

/* --------------------------------------------------------------------------
   New-update alert
   -------------------------------------------------------------------------- */

.tahl .tahl__alert {
	position: sticky;
	top: 5.5rem;
	z-index: 5;
	display: flex;
	justify-content: center;
	padding: 0.6rem 0 0;
	pointer-events: none;
}

.tahl .tahl__alert[hidden] { display: none; }

.tahl .tahl__alert-btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: var(--tahl-red);
	color: #fff;
	font-family: var(--tahl-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(10, 24, 38, 0.28);
	transition: transform 0.2s var(--tahl-ease);
}

.tahl .tahl__alert-btn::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
}

.tahl .tahl__alert-btn:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   The feed
   -------------------------------------------------------------------------- */

.tahl .tahl__feed {
	margin: 0;
	padding: 0 0 0 1px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--tahl-paper-2);
	border-top: 0;
}

.tahl .tahl__empty {
	margin: 0;
	padding: 1.6rem 1.2rem;
	background: #fff;
	border: 1px solid var(--tahl-paper-2);
	border-top: 0;
	font-family: var(--tahl-mono);
	font-size: 0.78rem;
	color: var(--tahl-steel);
}

.tahl .tahl-item {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0 1.4rem;
	margin: 0;
	padding: 1.4rem 1.2rem 1.5rem;
	--tahl-type: var(--tahl-cyan);
}

.tahl .tahl-item + .tahl-item { border-top: 1px solid var(--tahl-paper-2); }

/* The dashed track and its waypoint marker. */
.tahl .tahl-item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(1.2rem + 5.5rem + 0.7rem - 1px);
	width: 2px;
	background-image: linear-gradient(180deg, var(--tahl-ink) 0 6px, transparent 6px 12px);
	background-size: 2px 12px;
	opacity: 0.22;
}

.tahl .tahl-item::after {
	content: "";
	position: absolute;
	top: 1.75rem;
	left: calc(1.2rem + 5.5rem + 0.7rem - 5px);
	width: 10px;
	height: 10px;
	background: var(--tahl-type);
	transform: rotate(45deg);
	box-shadow: 0 0 0 4px #fff;
}

.tahl .tahl-item:first-child::before { top: 1.75rem; }
.tahl .tahl-item:last-child::before { bottom: auto; height: 1.75rem; }

.tahl--live .tahl__feed .tahl-item:first-child::after {
	animation: tahl-waypoint 2.4s var(--tahl-ease) infinite;
}

.tahl .tahl-item__stamp {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	text-align: right;
	font-family: var(--tahl-mono);
	line-height: 1.2;
}

.tahl .tahl-item__clock {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--tahl-ink);
	font-variant-numeric: tabular-nums;
}

.tahl .tahl-item__zulu {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--tahl-cyan);
}

.tahl .tahl-item__date {
	font-size: 0.63rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tahl-steel);
}

.tahl .tahl-item__flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.tahl .tahl-item__type {
	display: inline-block;
	padding: 0.25rem 0.5rem 0.22rem;
	background: color-mix(in srgb, var(--tahl-type) 12%, transparent);
	border-left: 3px solid var(--tahl-type);
	color: var(--tahl-type);
	font-family: var(--tahl-mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.tahl .tahl-item__pin {
	display: inline-block;
	padding: 0.25rem 0.5rem 0.22rem;
	border: 1px dashed var(--tahl-steel);
	color: var(--tahl-steel);
	font-family: var(--tahl-mono);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
}

.tahl .tahl-item__title {
	margin: 0 0 0.4rem;
	padding: 0;
	font-family: var(--tahl-display);
	font-size: 1.18rem;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--tahl-ink);
}

.tahl .tahl-item__title::before { content: none; }

.tahl .tahl-item__body > *:last-child { margin-bottom: 0; }
.tahl .tahl-item__body p { margin-bottom: 0.8em; }

.tahl .tahl-item__figure { margin: 0.9rem 0 0; }
.tahl .tahl-item__figure img { border-radius: var(--tahl-radius); }

.tahl .tahl-item__figure figcaption {
	margin-top: 0.4rem;
	font-family: var(--tahl-mono);
	font-size: 0.68rem;
	color: var(--tahl-steel);
}

.tahl .tahl-item__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	margin-top: 0.85rem;
	font-family: var(--tahl-mono);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	color: var(--tahl-steel);
}

.tahl .tahl-item__source a {
	color: var(--tahl-steel);
	text-decoration: underline;
	text-decoration-color: var(--tahl-steel);
	background: none;
}

.tahl .tahl-item__link {
	color: var(--tahl-steel);
	text-decoration: none;
	background: none;
	text-transform: uppercase;
}

.tahl .tahl-item__link:hover { color: var(--tahl-cyan); }

.tahl .tahl-item.is-pinned { background: color-mix(in srgb, var(--tahl-paper) 60%, #fff); }

/* A newly arrived update announces itself once, then settles. */
.tahl .tahl-item.is-new { animation: tahl-arrive 1.6s var(--tahl-ease); }

/* --------------------------------------------------------------------------
   Footer controls
   -------------------------------------------------------------------------- */

.tahl .tahl__more {
	padding: 0;
	background: #fff;
	border: 1px solid var(--tahl-paper-2);
	border-top: 0;
}

.tahl .tahl__more-btn {
	display: block;
	width: 100%;
	padding: 0.95rem 1rem;
	border: 0;
	background: none;
	color: var(--tahl-slate);
	font-family: var(--tahl-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s var(--tahl-ease);
}

.tahl .tahl__more-btn:hover { background: var(--tahl-paper); }
.tahl .tahl__more-btn[disabled] { color: var(--tahl-steel); cursor: default; }

.tahl .tahl__closed {
	margin: 0;
	padding: 0.9rem 1.2rem;
	background: var(--tahl-paper);
	border: 1px solid var(--tahl-paper-2);
	border-top: 0;
	border-radius: 0 0 var(--tahl-radius) var(--tahl-radius);
	font-family: var(--tahl-mono);
	font-size: 0.7rem;
	line-height: 1.5;
	color: var(--tahl-steel);
}

.tahl .tahl__toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	z-index: 60;
	padding: 0.6rem 1rem;
	background: var(--tahl-ink);
	color: #fff;
	border-radius: 999px;
	font-family: var(--tahl-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Listing badge
   -------------------------------------------------------------------------- */

.tahl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.45rem 0.16rem;
	vertical-align: 0.15em;
	background: var(--fd-red, #EC1E3C);
	color: #fff;
	font-family: var(--fd-mono, "IBM Plex Mono", monospace);
	font-size: 0.6em;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	border-radius: 2px;
}

.tahl-badge__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	animation: tahl-blink 1.6s var(--fd-ease, ease) infinite;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes tahl-ping {
	0%   { transform: scale(0.6); opacity: 1; }
	100% { transform: scale(1.9); opacity: 0; }
}

@keyframes tahl-waypoint {
	0%, 100% { box-shadow: 0 0 0 4px #fff; }
	50%      { box-shadow: 0 0 0 4px #fff, 0 0 0 7px color-mix(in srgb, var(--tahl-type) 30%, transparent); }
}

@keyframes tahl-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.3; }
}

@keyframes tahl-arrive {
	0%   { background: color-mix(in srgb, var(--tahl-type) 14%, #fff); }
	100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.tahl *,
	.tahl-badge__dot {
		animation: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
	.tahl .tahl-item {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 1.15rem 1rem 1.25rem 1.9rem;
	}

	.tahl .tahl-item__stamp {
		flex-direction: row;
		align-items: baseline;
		gap: 0.55rem;
		text-align: left;
	}

	.tahl .tahl-item__clock { font-size: 0.92rem; }
	.tahl .tahl-item__date { margin-left: auto; }

	.tahl .tahl-item::before { left: 0.75rem; }
	.tahl .tahl-item::after { top: 1.35rem; left: calc(0.75rem - 4px); }

	.tahl .tahl__head { padding: 0.75rem 1rem; }
	.tahl .tahl__alert { top: 4.5rem; }
}