/* Live-flight header strip — a band pinned to the top of the viewport, above
 * the site header, showing the flight(s) the visitor chose to follow.
 *
 * GEOMETRY IS TRANSFERRED FROM THE MOCK AS RATIOS, NOT PIXELS.
 * The design draws a 92px-tall band in a 1242px canvas; ours is 44px, because
 * the tap-target rule fixes the control height and the band is sized to it.
 * Copying the design's absolute numbers onto a band half the height is what
 * made the first pass read wrong. Measured off the mock and re-derived:
 *
 *   band height      92px                    -> 44px  (tap target sets this)
 *   bottom radius    60 / 92 = 0.65 x h      -> 29px
 *   side inset       32 / 1242 = 2.6% of width
 *   plane glyph      ~38 / 92 = 0.41 x h     -> 18px
 *   circular control ~56 / 92 = 0.61 x h     -> 27px disc, 44px hit area
 *
 * TOP IS FLUSH, ONLY THE BOTTOM CORNERS ARE ROUNDED. Verified on the mock: the
 * left and right edges are perfectly vertical from y=0 to y=36, and the arcs
 * fit a 60px circle centred at y=31. The band is cut off by the viewport edge,
 * not floating below it.
 *
 * COMPONENT TOKENS ON THE COMPONENT, NEVER :root. House precedent:
 * reno-intents.css, css/bus-schedules.css (--lbs-*), security-waiting-time.css
 * (--swt-*). Literals are pinned rather than aliased to var(--primary), which
 * SWAPS to turquoise on body.corporate / body.corporateHome.
 */

#lux-flight-strip {
	/* The mock's band is a subtle horizontal gradient, not a flat fill:
	 * rgb(30,39,95) -> rgb(34,30,62) -> rgb(33,42,98). Sampled, not guessed. */
	--lfs-bg-l:      rgb(30, 39, 95);
	--lfs-bg-m:      rgb(34, 30, 62);
	--lfs-bg-r:      rgb(33, 42, 98);
	--lfs-ink:       #fff;
	--lfs-ink-muted: rgba(255, 255, 255, 0.82); /* the AA-validated muted-on-navy value from reno-intents.css; opacity:.6 fails — do not "simplify" */
	--lfs-accent:    #3292c5;                   /* the mock's circular control, sampled */
	--lfs-h:         44px;
	--lfs-r:         29px;                      /* 0.65 x h, bottom corners only */
	--lfs-inset:     2.6vw;
	--lfs-gap:       10px;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* One above .site-header (999). The header animates its `top` when the band
	 * appears and precedes it in source; at equal z-index it would paint OVER
	 * the band for the whole slide. Still below the offline banner (999999),
	 * the modal scrim and loader (1001) and the focused skip link (100000). */
	z-index: 1000;
	/* NOT overflow:hidden — the panel overlays below the band. The BAND clips
	 * its own content instead. */
	color: var(--lfs-ink);
	font-size: 14px;
	line-height: 1.2;
	/* omnes-pro ships 400 and 600 only; 700 synthesises a fake bold, so the
	 * design's "bold" is 600 throughout. */
	font-weight: 400;
}

/* `hidden` must beat the layout display below, or an empty band paints on
 * every page — the exact "inert by default" property the geometry work exists
 * to preserve. */
#lux-flight-strip[hidden] {
	display: none !important;
}

/* ── The band ────────────────────────────────────────────────────────────── */

.lux-fs__band {
	display: flex;
	align-items: center;
	gap: var(--lfs-gap);
	height: var(--lfs-h);
	margin: 0 var(--lfs-inset);
	padding: 0 14px 0 16px;
	box-sizing: border-box;
	background: linear-gradient(90deg, var(--lfs-bg-l), var(--lfs-bg-m) 52%, var(--lfs-bg-r));
	border-radius: 0 0 var(--lfs-r) var(--lfs-r);
	overflow: hidden;
}

.lux-fs__line {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;          /* lets the flex child shrink so the ellipsis engages */
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* ── Direction glyph ─────────────────────────────────────────────────────── */

/* Both glyphs are in the DOM; the data attribute picks one. Neither shows
 * until a direction is known, so the band never flashes the wrong one. */
.lux-fs__dir {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	color: var(--lfs-ink-muted);
}

.lux-fs__dir .lux-fs__dir-d,
.lux-fs__dir .lux-fs__dir-a { display: none; }
.lux-fs__dir[data-sens="D"] .lux-fs__dir-d { display: inline-flex; }
.lux-fs__dir[data-sens="A"] .lux-fs__dir-a { display: inline-flex; }

.lux-fs__plane { display: block; }

/* ── Route, status, times ────────────────────────────────────────────────── */

/* The route absorbs three times as much truncation as the status.
 *
 * Measured at 375px: the ordinary line fits (347 of 375), but a long city with
 * a long status — "Palma de Mallorca" + "Boarding Closed" — needs 408 and has
 * to give way somewhere. Both can ellipsise, so without weighting flexbox
 * shrinks them in proportion and eats into the status, which is the field the
 * passenger is actually reading. The city is the safer thing to clip: it is
 * recognisable from its first several characters, and it is repeated in full in
 * the panel. The times never shrink at all (flex: 0 0 auto below). */
.lux-fs__route {
	flex: 0 3 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
}

/* The Luxembourg end, shown only where there is room (see the 420px rule at
 * the bottom of this file). */
.lux-fs__route .lux-fs__from { color: var(--lfs-ink-muted); font-weight: 400; }

.lux-fs__status {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600;
}

/* Belt and braces for the weighting above: even at its most squeezed the
 * status keeps enough room to distinguish "Boarding" from "Boarding Closed". */
@media (min-width: 360px) {
	.lux-fs__status { min-width: 6.5em; }
}

.lux-fs__times {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: var(--lfs-ink-muted);
}

/* The scheduled time, when a revised one exists. Strike-through AND muted —
 * never one alone: "never info by colour alone" is a house rule, and a line
 * through a time reads as superseded even where the colour difference does not
 * survive a contrast filter or a monochrome display. */
.lux-fs__time--was {
	text-decoration: line-through;
	color: var(--lfs-ink-muted);
}

/* The revised time is the one that matters, so it gets full ink and weight. */
.lux-fs__time--now { color: var(--lfs-ink); font-weight: 600; }

/* Degraded states (breaker open, offline, upstream error, ended). Muted rather
 * than red: a red bar across every page for a routine two-minute upstream pause
 * would read as a site outage. */
.lux-fs--degraded .lux-fs__status { color: var(--lfs-ink-muted); font-weight: 400; }

/* ── The circular control ────────────────────────────────────────────────── */

.lux-fs__toggle {
	flex: 0 0 auto;
	position: relative;
	/* 44 hit area, 27 visual disc — the design's ratio (0.61 x h) with the
	 * house tap-target floor kept. The disc is drawn as a ::before rather than
	 * by sizing the button, so the target stays 44 while the ink matches. */
	width: 44px;
	height: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Full reset: the theme styles bare `button` with grey chrome (#e6e6e6,
	 * 3px radius, 1px border) that would otherwise show through. */
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	color: var(--lfs-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.lux-fs__toggle::before {
	content: "";
	position: absolute;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: var(--lfs-accent);
	transition: transform .15s ease, background-color .15s ease;
}

.lux-fs__toggle:hover::before { background: #3ba3d8; }
.lux-fs__toggle:active::before { transform: scale(.94); }

.lux-fs__chev {
	position: relative;    /* above the ::before disc */
	transition: transform .2s ease;
}

.lux-fs__toggle[aria-expanded="true"] .lux-fs__chev { transform: rotate(180deg); }

/* BOTH pseudo-classes, deliberately.
 *
 * reno-ai-concierge ships an unscoped, site-wide
 * `button:focus { outline: 2px solid #000 }`. Black on navy is ~1.2:1 —
 * invisible. And because that rule matches `:focus`, listing only
 * `:focus-visible` here leaves a CLICKED control still wearing the black ring.
 * This exact trap has already been fixed once in reno-intents.css.
 *
 * currentColor rather than a hard-coded white: the theme's own in-header
 * pattern (the menu toggle), and it stays correct if the ink ever changes. */
.lux-fs__toggle:focus,
.lux-fs__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;  /* inset: the band clips, so an outset ring would be cut */
}

.lux-fs__toggle:focus:not(:focus-visible) { outline: none; }

/* How many OTHER flights are being followed. A number, not a dot — the
 * accessible name says "2 more", and the visible glyph should agree. */
.lux-fs__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--lfs-ink);
	color: var(--lfs-bg-m);
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
	text-align: center;
}

.lux-fs__count[hidden] { display: none; }

/* ── The panel ───────────────────────────────────────────────────────────── */

.lux-fs__panel {
	position: absolute;
	top: var(--lfs-h);
	left: var(--lfs-inset);
	right: var(--lfs-inset);
	max-height: 60vh;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 4px 16px 14px;
	background: var(--lfs-bg-m);
	border-radius: 0 0 var(--lfs-r) var(--lfs-r);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
	-webkit-overflow-scrolling: touch;
}

.lux-fs__panel[hidden] { display: none; }

.lux-fs__flight {
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.lux-fs__flight:first-child { border-top: 0; }

.lux-fs__flight-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
	font-weight: 600;
}

/* The details list. A real <dl> because these are label/value pairs, and the
 * house GEO rule prefers a definition list over div soup. */
.lux-fs__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	margin: 0;
	font-size: 13px;
}

.lux-fs__facts dt { color: var(--lfs-ink-muted); font-weight: 400; }
.lux-fs__facts dd { margin: 0; font-weight: 600; }

/* Per-flight stop control. Lives here rather than on the band because with
 * more than one followed flight a single band-level x cannot say which. */
.lux-fs__stop {
	margin-top: 10px;
	min-height: 44px;
	padding: 10px 18px;
	border: 2px solid rgba(255, 255, 255, .5);
	border-radius: 16px;    /* --reno-r-control, the house designed-control radius */
	background: transparent;
	color: var(--lfs-ink);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.lux-fs__stop:hover { background: rgba(255, 255, 255, .12); }

.lux-fs__stop:focus,
.lux-fs__stop:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lux-fs__stop:focus:not(:focus-visible) { outline: none; }

/* ── Live region ─────────────────────────────────────────────────────────── */

/* Uses the theme's `.screen-reader-text` — the only sr-only utility guaranteed
 * present on every page. This rule only stops it joining the flex row. */
.lux-fs__live { margin: 0; }

/* ── Arrival: the band lands, once ───────────────────────────────────────── */

/* Paired with the ghost that flies up from the "Watch live" button. The pulse
 * is what tells the eye where the ghost went; without it the band has already
 * finished appearing by the time the eye arrives. One iteration, never a loop —
 * a repeating highlight in permanent site chrome is a distraction, not a cue. */
@keyframes lux-fs-land {
	0%   { box-shadow: 0 0 0 0 rgba(50, 146, 197, 0); }
	35%  { box-shadow: 0 0 0 3px rgba(50, 146, 197, .85); }
	100% { box-shadow: 0 0 0 0 rgba(50, 146, 197, 0); }
}

.lux-fs--landing .lux-fs__band {
	animation: lux-fs-land .9s ease-out 1;
}

/* The ghost: a pill that leaves the button and travels to the band. Fixed, so
 * it is unaffected by the enlarged chat's scroll lock, and pointer-transparent
 * so it can never intercept a tap on its way past. */
.lux-fs-ghost {
	position: fixed;
	z-index: 1002;         /* over the band it is flying towards */
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px;
	height: 36px;
	border-radius: 18px;
	background: #3292c5;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
	will-change: transform, opacity;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Below 420px only the far end of the route fits.
 *
 * Measured at 375px in the site's own omnes-pro: the text budget inside the
 * band is 257px, and "Luxembourg <plane> Frankfurt" + status + times needs 309
 * — 361 for a long city like Palma de Mallorca. Dropping the Luxembourg end
 * brings it to 229 and fits with room to spare.
 *
 * This is why the connector is a PLANE and not an arrow: with only one city on
 * the band, "-> Frankfurt" cannot say whether the flight goes there or comes
 * from there, while a taking-off glyph and a landing glyph can. The direction
 * is also in the live region as words, so nothing depends on reading the icon. */
@media (max-width: 419px) {
	.lux-fs__route .lux-fs__from { display: none; }
}

@media (min-width: 782px) {
	#lux-flight-strip {
		font-size: 15px;
		--lfs-gap: 16px;
	}
	.lux-fs__band { padding: 0 18px 0 22px; }
	.lux-fs__line { gap: 12px; }
	.lux-fs__panel { padding: 6px 22px 18px; }
}

/* ── Motion ──────────────────────────────────────────────────────────────── */

/* The band's arrival, the chevron rotation, the disc press and the ghost's
 * flight are all motion the user did not ask for in a persistent chrome
 * element. Under reduced-motion the band simply appears — the ghost is not
 * spawned at all (see lux-flight-strip.js); these rules are the belt-and-braces
 * half in case it ever is. */
@media (prefers-reduced-motion: reduce) {
	.lux-fs--landing .lux-fs__band,
	.lux-fs-ghost {
		animation: none !important;
		transition: none !important;
	}
	.lux-fs__chev,
	.lux-fs__toggle::before {
		transition: none;
	}
}

/* ── Print ───────────────────────────────────────────────────────────────── */

/* A position:fixed band prints repeated or clipped, and parking and booking
 * pages are printed by real people at an airport. */
@media print {
	#lux-flight-strip { display: none !important; }
}