/* 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;
	/* The status pill's box, in WHOLE pixels: its line is this less 1px
	 * padding and 1px border top and bottom (.lux-fs__status). The tallest
	 * thing on the closed row, so it is what the row's geometry is built on
	 * (below). 2.22.3 (Manos, 2026-11-09: "Departed" and "Arrived" looked
	 * different heights): .87em x 1.5 made it 22.27 / 23.57px, and two pills
	 * at different sub-pixel offsets rasterised a pixel apart. */
	--lfs-pill:      22px;
	--lfs-r:         29px;                      /* 0.65 x h, bottom corners only */
	--lfs-inset:     2.6vw;
	--lfs-gap:       10px;
	--lfs-max:       760px;                     /* the desktop bar's one width (2.21.0) */

	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 surface clips its own content, and its landing
	 * ring and open shadow are drawn outside it. */
	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;
	/* In and out WITH the header, which moves by the band's height over its own
	 * `transition: all .5s ease-in-out` (theme style.css) when the script writes
	 * `--lux-strip-h`: the script slides the band from above the viewport
	 * (`lux-fs--off`) on that same change, so their edges meet all the way. */
	transition: transform .5s ease-in-out;
}

#lux-flight-strip.lux-fs--off { transform: translateY(-100%); }

/* `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 surface: the band and the drawer it grows into ──────────────────── */

/* ONE shape. Expanded, the band grows down into the drawer instead of a second
 * box appearing under it, so the gradient, the inset and the rounded bottom
 * corners belong to the surface, and the corners move down with the drawer. */
.lux-fs__surface {
	margin: 0 var(--lfs-inset);
	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;
	/* Its own edge, closed as well as open: a hairline of the ink round its
	 * three free sides (the top is the viewport's) and a drop shadow under it,
	 * so the band stands off the page on a navy hero or the header's white
	 * alike. Nothing in the mock framed it, and over the header's own navy it
	 * read as part of the page (Manos, 2026-11-07). Both are box-shadows: no
	 * layout, and they follow the corners. */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 6px 18px rgba(0, 0, 0, .28);
}

.lux-fs--open .lux-fs__surface { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 12px 24px rgba(0, 0, 0, .32); }

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

/* The row's geometry is the same closed and open, so nothing moves on expand
 * or collapse (2.20.1, Manos 2026-11-07: "the title jumps"): the line is
 * anchored at the TOP of the row, at the offset that centres the closed
 * line's box (the pill's, `--lfs-pill`) in the 44px, and its items share a
 * baseline. Open, a title that wraps grows the line and the row DOWNWARD
 * only — its first line, the pill and the plane stay where they were — where
 * a centred line re-centred and the title's first line moved up. The chevron
 * is 44px in a 44px row, so it is at the top either way. */
.lux-fs__band {
	position: relative;    /* the label outline (see "Arrival") is drawn in it */
	display: flex;
	align-items: flex-start;
	gap: var(--lfs-gap);
	height: var(--lfs-h);
	padding: 0 14px 0 16px;
	box-sizing: border-box;
	overflow: hidden;
}

.lux-fs__line {
	display: flex;
	align-items: baseline;
	/* Fixed gaps, wider (2.22.2, Manos 2026-11-09: "take more width … increase
	 * the distances between the elements"). Not space-between: open hides the
	 * meta and times, and a spread line would move the pill (D21). */
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;          /* lets the flex child shrink so the ellipsis engages */
	margin: max(0px, calc((var(--lfs-h) - var(--lfs-pill)) / 2)) 0 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;
	/* An svg has no baseline (its bottom would sit on the text's): the glyph
	 * is centred on the pill's box instead, from the line's top. */
	align-self: flex-start;
	margin-top: calc((var(--lfs-pill) - 18px) / 2);
	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 closed only from 782px (see the 781px rule at
 * the bottom of this file). */
.lux-fs__route .lux-fs__from { color: var(--lfs-ink-muted); font-weight: 400; }

/* Tom's connector (2.21.0): two dots joined by a line, between the two ends,
 * in the muted ink of the Luxembourg end it belongs to. Drawn, aria-hidden. */
.lux-fs__via {
	position: relative;
	display: inline-block;
	width: 1.9em;
	height: 1px;
	margin: 0 10px;            /* part 5 (Tom, 2026-11-09): 5px read cramped */
	vertical-align: .32em;
	background: currentColor;
}

.lux-fs__via::before,
.lux-fs__via::after {
	content: "";
	position: absolute;
	top: -2.5px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lfs-ink);
}

.lux-fs__via::before { left: -3px; }
.lux-fs__via::after { right: -3px; }

/* The flight number and the gate (or belt) beside the route, from 782px:
 * label muted at 400, value in full ink at 600, as Tom's mock. It comes AFTER
 * the status pill, so the pill sits right after the route open or closed
 * (Manos, 2026-11-09: "it should not change position on open/closed"). */
.lux-fs__meta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	white-space: nowrap;
}

.lux-fs__meta:empty { display: none; }
.lux-fs__meta-num { font-weight: 600; }
.lux-fs__meta-k { color: var(--lfs-ink-muted); font-weight: 400; }
.lux-fs__meta-v { font-weight: 600; }

/* The status is a pill — closed and open, phone and desktop, the same box
 * (2.20.1, Manos 2026-11-07: "make the status always the same (like a
 * pill)"; before, a closed band wore plain text and the open row a chip, so
 * the row re-drew itself on every expand). It never shrinks, wraps or
 * ellipsises: the route is the field that gives way (above), and under 782px
 * the closed row drops its Luxembourg end and its struck time first (the
 * 781px rule at the bottom of this file). The heads' chips in the drawer are
 * the same pill (.lux-fs__flight-status, below). */
.lux-fs__status {
	flex: 0 0 auto;
	max-width: 100%;
	white-space: nowrap;
	padding: 1px 9px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	font-size: .87em;
	line-height: calc(var(--lfs-pill) - 4px);   /* a whole-pixel box (--lfs-pill) */
	font-weight: 600;
}

.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; border-color: rgba(255, 255, 255, .3); }

/* ── 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%;
	/* The filled round disc is back (2.22.2, Manos 2026-11-09: "the arrow was
	 * better when it had background color and it was round"), undoing 2.21.0's
	 * bare chevron. White on #3292c5 is 3.5:1, past the 3:1 a UI glyph needs;
	 * the hover darkens (#2b80ad, 4.4:1), never lightens below that. */
	background: var(--lfs-accent);
	transition: transform .15s ease, background-color .15s ease;
}

.lux-fs__toggle:hover::before { background: #2b80ad; }
.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's frontend.css shipped an unscoped, site-wide
 * `button:focus { outline: 2px solid #000 }` until reno 3.38.3 (it answers to
 * the chat widget now, so nothing outside it reaches this band). Black on navy
 * is ~1.2:1 — invisible. And because that rule matched `:focus`, listing only
 * `:focus-visible` here left a CLICKED control still wearing the black ring.
 * The band names both, so its ring never depends on what a plugin sheet does;
 * the same trap was 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;
	z-index: 1;            /* over the chevron's arrival ring, like a badge on it */
	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 drawer ──────────────────────────────────────────────────────────── */

/* The grid row slides 0fr -> 1fr: the drawer opens to exactly its content's
 * height with no measured pixel value, and the root is fixed, so the page under
 * it never moves (`--lux-strip-h` stays the band's 44px). The script sets the
 * panel `hidden` once a close has run: a clipped drawer is not a closed one. */
.lux-fs__drawer {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	transition: grid-template-rows .24s cubic-bezier(.4, 0, .2, 1), margin-top .24s cubic-bezier(.4, 0, .2, 1);
}

/* Open, the drawer starts under the TITLE, not under the row: the band row
 * keeps its closed geometry (the title centred in its 44px, so nothing jumps
 * on expand or collapse — 2.20.1, Manos 2026-11-07; 2.20.0 dropped the title
 * to the row's foot when open, and it jumped 8px each way), and the drawer
 * is pulled up over the row's slack by `--lfs-pull`, which the script
 * measures on each open, render and resize (fitDrawer()): 4px minus the
 * slack under the title's box, so the first flight's facts sit 4px under it
 * as under any head; a wrapped title fills the row, and the pull is then the
 * plain 4px gap. The margin transitions with the slide, so the
 * surface's edge never snaps. The chevron paints over the overlap (below). */
.lux-fs--open .lux-fs__drawer { grid-template-rows: 1fr; margin-top: var(--lfs-pull, 0px); }

.lux-fs__drawer-inner {
	min-height: 0;
	overflow: hidden;
}

/* On a phone the drawer may take the screen down to just under the band, and
 * scrolls inside itself; the page behind it does not scroll with it. */
.lux-fs__panel {
	max-height: calc(100vh - 60px);
	max-height: calc(100dvh - 60px);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	padding: 0 16px 14px;    /* no top: the band row is the first flight's head, and the drawer is pulled up under its title (--lfs-pull) */
	-webkit-overflow-scrolling: touch;
}

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

/* One flight: its facts as label/value pairs that wrap across the row (Tom's
 * 'Notification Expand': a line per flight), its Stop beside them where it
 * fits, else under them on the right. The band's own flight comes first with
 * no head (the band row is its title); each other one is headed as the band
 * row is drawn. */
.lux-fs__flight {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 24px;             /* part 5 (Tom, 2026-11-09): ~24px between pairs */
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

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

/* Every flight is open (part 5, Manos 2026-11-09; 2.21.0's accordion is
 * gone): a head is a plain row, not a control. */
.lux-fs__flight-head {
	flex: 1 0 100%;
	display: flex;
	align-items: center;
	gap: 16px;                 /* the band line's gaps (2.22.3, Manos 2026-11-09: every head like the first) */
	min-width: 0;
	min-height: 44px;
	font-weight: 600;
	line-height: 1.2;
}

.lux-fs__flight-head .lux-fs__plane { flex: 0 0 auto; color: var(--lfs-ink-muted); }

/* A head's route reads as the band row's: the other end in full ink, the
 * Luxembourg end muted. The status is the band row's pill (.lux-fs__status,
 * above), so a head and the band row are alike (Manos, 2026-11-07). */
.lux-fs__flight-route { min-width: 0; overflow-wrap: break-word; }
.lux-fs__flight-route .lux-fs__from { color: var(--lfs-ink-muted); font-weight: 400; }

.lux-fs__flight-status {
	flex: 0 0 auto;
	max-width: 100%;
	white-space: nowrap;
	padding: 1px 9px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	font-size: .87em;
	line-height: calc(var(--lfs-pill) - 4px);   /* a whole-pixel box (--lfs-pill) */
	font-weight: 600;
}

.lux-fs--degraded .lux-fs__flight-status { color: var(--lfs-ink-muted); font-weight: 400; border-color: rgba(255, 255, 255, .3); }

/* The status pill filled by the flight's state (part 5, Tom + Manos,
 * 2026-11-09; `data-state` from the status CODE, lux-flight-strip.js
 * stateOf()): planned blue, under way green, changed (delayed, gate changed)
 * orange, off (cancelled, diverted) red. Green #00A886 and orange #FAA21B are
 * the 2026 brand edition's, allowed for these pills only (Manos, 2026-11-09;
 * docs/reno/brand-guidelines.md). Navy text on the light three (5.67, 5.57,
 * 8.21:1), white on red (4.64:1). The label stays: never colour alone. DL, an
 * unknown code and no code yet keep the outline. The border turns transparent,
 * not none: the box keeps its size, and forced colours draw it back. */
.lux-fs__status[data-state],
.lux-fs__flight-status[data-state] { border-color: transparent; color: #1C1644; }
.lux-fs__status[data-state="planned"],
.lux-fs__flight-status[data-state="planned"] { background: #10A0DB; }
.lux-fs__status[data-state="underway"],
.lux-fs__flight-status[data-state="underway"] { background: #00A886; }
.lux-fs__status[data-state="changed"],
.lux-fs__flight-status[data-state="changed"] { background: #FAA21B; }
.lux-fs__status[data-state="off"],
.lux-fs__flight-status[data-state="off"] { background: #DF2B32; color: #fff; }

/* Stale data takes no fill, whatever state it last had. */
.lux-fs--degraded .lux-fs__status[data-state],
.lux-fs--degraded .lux-fs__flight-status[data-state] {
	background: transparent;
	color: var(--lfs-ink-muted);
	border-color: rgba(255, 255, 255, .3);
}

/* The details: three rows of label/value pairs, in the flight widget's words
 * and order — the airline and the flight number; the terminal and the gate or
 * the luggage belt; the planned and the estimated time (Manos, 2026-11-07).
 * Each row is a real <dl> (the house GEO rule prefers a definition list over
 * div soup), each pair a <div>, the one wrapper a <dl> allows, so a pair wraps
 * as one. The details draw no box of their own (part 5, 2026-11-09): the
 * rows and the Remove are items of the flight's wrapping row, so the Remove
 * ends the last row instead of taking a row of its own (Manos: "we waste
 * space"). On a phone the airline and the place rows take a line each, and
 * the times share theirs with the Remove where both fit; on a wide drawer the
 * rows sit on one line where they fit, spread across it ("take the whole
 * space, not stuck left"), and wrap a ROW at a time, so the two times are
 * never parted. */
.lux-fs__details {
	display: contents;
	font-size: 13px;           /* inherited by the rows */
}

.lux-fs__facts {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 24px;             /* part 5 (Tom, 2026-11-09): ~24px between pairs */
	max-width: 100%;
	min-width: 0;
	margin: 0;
}

.lux-fs__facts--id,
.lux-fs__facts--where { flex: 1 0 100%; }

/* The two times stay on one line, always. */
.lux-fs__facts--when { flex-wrap: nowrap; white-space: nowrap; }

.lux-fs__fact {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	max-width: 100%;
	overflow-wrap: break-word;
}

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

/* The row's end: the Stop, at the end of the last row at every width, on a
 * line of its own (at its end) only where it cannot fit beside the times (a
 * 320px phone with two times). The status is NOT here (2.20.2, Manos
 * 2026-11-07: 2.20.1 put the second flight's chip at its foot while the
 * band's flight wore its pill on the title line, and the foot chip, outside
 * the 600 head, read as muted): every flight's status is the pill on its head
 * line, as the band row's is. */
.lux-fs__foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin-left: auto;
}

@media (min-width: 782px) {
	.lux-fs__facts--id,
	.lux-fs__facts--where,
	.lux-fs__facts--when { flex: 1 0 auto; }
	/* Every gap is the same, up to the Remove (Manos, 2026-11-09: "spacings
	 * should not be unequal"; a row's growth fell after its last pair, so the
	 * gaps between rows were wider than those inside one). Each pair takes an
	 * equal share, after its words: a row grows by one share per pair. */
	.lux-fs__facts > .lux-fs__fact { flex: 1 0 auto; }
	.lux-fs__facts:has(> .lux-fs__fact:nth-child(2)) { flex-grow: 2; }
}

/* 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 {
	flex: 0 0 auto;
	/* The 44px hit area gives its growth back (part 5): beside the times it
	 * made their line 44px tall, 18px under the place row where the rows are
	 * 4px apart. 14px a side leaves a 16px line (the rows are 15.6px); the box
	 * reaches over the row above and 6px past the flight, inside the panel's
	 * 14px padding, ring included, so nothing clips it. */
	margin: -14px 0 -14px auto;
	min-height: 44px;
	/* "Remove", a word (2.21.0, Manos 2026-11-09; Tom: the outlined button was
	 * "chunky and huge"): no border, regular weight, underlined so it reads as
	 * an action; the 44px is the hit area, not ink. */
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--lfs-ink);
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 3px;
	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; }

/* From 782px the Remove's word stands off the last pair as the pairs stand
 * off each other (the facts' rule above): its left padding (hit area, hover
 * wash) is given back. After the base rule, whose margin shorthand it trims. */
@media (min-width: 782px) {
	.lux-fs__stop { margin-left: -10px; }
}

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

/* Uses the theme's `.screen-reader-text` — the only sr-only utility guaranteed
 * present on every page. A sibling of the root now (see flight-strip.php); this
 * rule only zeroes the paragraph's margin. */
.lux-fs__live { margin: 0; }

/* ── Arrival: the boarding chip flies up, the band catches it ────────────── */

/* The script lifts a chip (the plane and the flight number) off the pressed
 * "Watch live" and flies it to the band; what is drawn here is the chip, its
 * trail and the band's answer. EVERYTHING that moves moves by transform and
 * opacity only, and every cue is two-toned, white against the band's own navy
 * or the navy against whatever the chat shows, so it holds >= 3:1 on any
 * backdrop. The old cue was a 3px outer ring in the accent blue, about 1.1:1
 * against the hero photo (measured), first flight only. */

/* Never hidden: the band goes above whatever covers it (Réno's tooltips are at
 * 10000), for the landing and a few seconds after; the script adds this only
 * when something is painted over the band, and takes it off again. The chip is
 * higher still. */
#lux-flight-strip.lux-fs--raised { z-index: 10001; }

.lux-fs-chip,
.lux-fs-trail {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10002;
	margin: 0;
	pointer-events: none;   /* it can never take a tap on its way past */
	opacity: 0;             /* the animation owns it; never seen before it runs */
	will-change: transform, opacity;
}

/* The chip is the band in small: its own navy, with a white ring, so it reads
 * on the navy chat card (the ring), on the photo and on the light flag stripes
 * (the navy body). White on this navy is 14:1. */
.lux-fs-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 13px 0 10px;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 16px;
	background: rgb(30, 39, 95);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

.lux-fs-chip .lux-fs__plane { flex: 0 0 auto; }

/* The trail: the chip a moment ago, smaller and fainter. */
.lux-fs-trail {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px rgb(30, 39, 95), 0 0 10px 2px rgba(255, 255, 255, .6);
}

/* (The script sets each dot's size, 10 down to 5px, and its lag.) */

/* The ripple: a white ring with a navy edge that leaves the band and fades
 * (transform, opacity). On the root, not the surface, which clips its own
 * content. Both tones, so one of them reads on any photo behind. */
#lux-flight-strip::after {
	content: "";
	position: absolute;
	left: var(--lfs-inset);
	right: var(--lfs-inset);
	top: 0;
	height: var(--lfs-h);
	border-radius: 0 0 var(--lfs-r) var(--lfs-r);
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgb(30, 39, 95), 0 0 22px 8px rgba(255, 255, 255, .5);
	opacity: 0;
	pointer-events: none;
	transform-origin: 50% 0;
}

@keyframes lux-fs-ripple {
	0%   { opacity: 0; transform: scale(1, 1); }
	16%  { opacity: 1; }
	100% { opacity: 0; transform: scale(1.07, 1.5); }
}

/* And the catch: the surface gives a little, as under a catch. */
@keyframes lux-fs-catch {
	0%   { transform: none; }
	30%  { transform: scale(1.012, 1.1); }
	100% { transform: none; }
}

.lux-fs--landing::after { animation: lux-fs-ripple .95s cubic-bezier(.2, .65, .25, 1) 1 both; }
.lux-fs--landing .lux-fs__surface { transform-origin: 50% 0; animation: lux-fs-catch .42s ease-out 1; }

/* The count chip's bump is a Web Animation (scale only), run by the script. */

/* The outline that stays: a white line round the label the new flight is on,
 * or round the chevron when it joined the count. Drawn INSIDE the band, over
 * its own navy (14:1), so it needs nothing of the page behind. It fades in and
 * out by opacity and, under reduced motion, simply appears and goes. */
.lux-fs__band::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 62px;
	top: 5px;
	bottom: 5px;
	border: 2px solid #fff;
	border-radius: 17px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.lux-fs--noticed-label .lux-fs__band::after { opacity: 1; }

.lux-fs__toggle::after {
	content: "";
	position: absolute;
	width: 35px;
	height: 35px;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.lux-fs--noticed-count .lux-fs__toggle::after { opacity: 1; }

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

/* Closed under 782px only the far end of the route shows.
 *
 * 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. */
/* ...and under 782px (2.20.1, Manos 2026-11-07: at 450px the closed row
 * read "Luxembourg → Fran… Departed ~~14:25~~ 14:23"): the other end alone,
 * and ONE time, the live one (`.lux-fs__time--now`: the estimated time where
 * there is one, else the planned). The struck planned time is the noise on
 * a 44px row, and the drawer keeps both ends and both times (Planned,
 * Estimated). From 782px the closed row shows both ends and both times. */
@media (max-width: 781px) {
	.lux-fs__meta { display: none; }
	.lux-fs__route .lux-fs__from { display: none; }
	.lux-fs__time--was { display: none; }
}

/* Open, the band row is the head of its flight, which the drawer heads no
 * more: its plane, both ends of the route at any width, in full, on two lines
 * where one is too short, and its pill; its times are in the facts (Planned,
 * Estimated). The row keeps its closed geometry — the same 44px, the title
 * centred in it — so nothing moves on expand or collapse (2.20.1): the gap
 * to the first flight's facts is the drawer's to close (--lfs-pull, above). */
.lux-fs--open .lux-fs__line { white-space: normal; }
/* ...and the row grows where enlarged text needs it (two lines of 150% text
 * pass 44px); at the default size it stays 44px, and the page keeps the
 * closed row's height either way (show()). */
.lux-fs--open .lux-fs__band { height: auto; min-height: var(--lfs-h); }
/* ...and the chevron paints over the drawer's overlap, so its 44px hit area
 * is whole open as closed. */
.lux-fs--open .lux-fs__toggle { z-index: 1; }
.lux-fs--open .lux-fs__route { flex: 0 1 auto; overflow-wrap: break-word; }
.lux-fs--open .lux-fs__route .lux-fs__from { display: inline; }
.lux-fs--open .lux-fs__times { display: none; }
.lux-fs--open .lux-fs__meta { display: none; }

@media (min-width: 782px) {
	#lux-flight-strip {
		font-size: 15px;
		--lfs-gap: 16px;
		--lfs-pill: 24px;
	}
	/* One width for every flight (2.21.0, Tom 2026-11-09: "a huge gap" right
	 * of the row, "we don't need that much blue"; with two flights the bar must
	 * not change size): a centred bar, its width fixed, never the content's. */
	.lux-fs__surface { width: min(var(--lfs-max), 100% - 2 * var(--lfs-inset)); margin: 0 auto; }
	.lux-fs__band { padding: 0 18px 0 22px; }
	.lux-fs__band::after { left: 14px; right: 66px; }   /* the label outline follows the band's padding */
	.lux-fs__line,
	.lux-fs__flight-head { gap: 28px; }
	.lux-fs__meta { gap: 20px; }
	.lux-fs__times { gap: 8px; }
	.lux-fs__panel { max-height: 60vh; padding: 6px 22px 18px; }
}

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

/* The chip's flight, the ripple and the catch, the chevron rotation, the disc
 * press and the drawer's slide are all motion the user did not ask for in a
 * persistent chrome element. Under reduced-motion the band simply appears and
 * the drawer simply opens, the chip is never spawned (see lux-flight-strip.js)
 * and the drawer is closed at once; what is left of an arrival is the white
 * outline, which appears and goes without moving. These rules are the
 * belt-and-braces half. */
@media (prefers-reduced-motion: reduce) {
	.lux-fs--landing::after,
	.lux-fs--landing .lux-fs__surface {
		animation: none !important;
	}
	.lux-fs-chip,
	.lux-fs-trail {
		display: none !important;
	}
	#lux-flight-strip,
	.lux-fs__band::after,
	.lux-fs__toggle::after,
	.lux-fs__chev,
	.lux-fs__toggle::before,
	.lux-fs__drawer {
		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,
	.lux-fs-chip,
	.lux-fs-trail { display: none !important; }
}