@shortstravelmgmt/component-lib 0.5.0 → 0.5.1-canary.85.gba94682

package/dist/index.esm.js

@@ -9498,6 +9498,23 @@ const weekdayStyle$2 = {
     label: 'TravelDateRange-weekdayStyle',
     fontWeight: 700,
 };
+/* The trip's length, after the range: a pill in the dates' navy, set apart as a label. */
+const daysStyle$1 = {
+    label: 'TravelDateRange-daysStyle',
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '2px var(--space-3)',
+    borderRadius: 'var(--radius-full)',
+    border: '1px solid var(--stm-tint-200)',
+    background: 'var(--stm-tint-100)',
+    color: 'var(--color-primary, #19345f)',
+    fontFamily: 'var(--font-family-label)',
+    fontSize: 'var(--fs-sm)',
+    fontWeight: 'var(--fw-semibold)',
+    letterSpacing: '0.06em',
+    lineHeight: 'var(--lh-sm)',
+    textTransform: 'uppercase',
+};
 const hiddenStyle$1 = { label: 'TravelDateRange-hiddenStyle', ...srOnly };
 /* A dashed rule ending in an arrowhead, drawn so it scales with the text colour. */
 const arrowStyle$1 = {
@@ -9523,20 +9540,23 @@ const ordinalDay = (day) => {
     return `${day}${suffix}`;
 };
 const DatePart = ({ date, withYear }) => (jsxs("span", { children: [jsxs("span", { className: sx(weekdayStyle$2), children: [WEEKDAYS$1[date.getDay()], ","] }), ' ', MONTHS$1[date.getMonth()], " ", ordinalDay(date.getDate()), withYear && `, ${date.getFullYear()}`] }));
-const DashedArrow = () => (jsx("span", { className: sx(arrowStyle$1), "aria-hidden": "true", children: jsxs("svg", { width: "56", height: "10", viewBox: "0 0 56 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "1", y1: "5", x2: "50", y2: "5", strokeDasharray: "3 3" }), jsx("polyline", { points: "47 1.5 54 5 47 8.5", fill: "currentColor" })] }) }));
+const DashedArrow = () => (jsx("span", { className: sx(arrowStyle$1), "aria-hidden": "true", children: jsxs("svg", { width: "28", height: "10", viewBox: "0 0 28 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "1", y1: "5", x2: "22", y2: "5", strokeDasharray: "3 3" }), jsx("polyline", { points: "19 1.5 26 5 19 8.5", fill: "currentColor" })] }) }));
+const DAY_MS = 24 * 60 * 60 * 1000;
 /**
  * A trip's travel dates as `Sun, Jun 7th ⇢ Tue, Jun 9th, 2026`. The year shows
  * once at the end, or on both dates when the trip crosses a year. A single-day
- * trip shows one date.
+ * trip shows one date. With `showDays`, the trip's length follows as a pill.
  */
-const TravelDateRange = ({ startDate, endDate, className = '' }) => {
+const TravelDateRange = ({ startDate, endDate, showDays = false, className = '' }) => {
     const start = parse(startDate);
     const end = parse(endDate);
     if (!start || !end)
         return null;
     const sameDay = start.getTime() === end.getTime();
     const crossesYear = start.getFullYear() !== end.getFullYear();
-    return (jsxs("p", { className: cx(sx(rangeStyle), className), "data-test": "travel-date-range", children: [jsx(DatePart, { date: start, withYear: sameDay || crossesYear }), !sameDay && (jsxs(Fragment, { children: [jsx(DashedArrow, {}), jsx("span", { className: sx(hiddenStyle$1), children: "to" }), jsx(DatePart, { date: end, withYear: true })] }))] }));
+    // Both ends count; rounded, so a daylight-saving change between them can't shift it.
+    const days = Math.round((end.getTime() - start.getTime()) / DAY_MS) + 1;
+    return (jsxs("p", { className: cx(sx(rangeStyle), className), "data-test": "travel-date-range", children: [jsx(DatePart, { date: start, withYear: sameDay || crossesYear }), !sameDay && (jsxs(Fragment, { children: [jsx(DashedArrow, {}), jsx("span", { className: sx(hiddenStyle$1), children: "to" }), jsx(DatePart, { date: end, withYear: true })] })), showDays && days > 0 && (jsxs("span", { className: sx(daysStyle$1), "data-test": "travel-date-range-days", children: [days, " ", days === 1 ? 'day' : 'days'] }))] }));
 };
 TravelDateRange.displayName = 'TravelDateRange';
 
@@ -10757,9 +10777,12 @@ const Table = ({ columns, data, rowKey = 'id', bordered = false, striped = false
  * A bordered card: a header band with the title and Version control, then the
  * invoice table with its total row and legend.
  */
+/* No `overflow: hidden`: it would clip the Version menu, which hangs below the header over the table
+   and past the card's bottom on a short invoice. The header band paints no background, so its square
+   corners can't show; the table's wrapper (which scrolls, so clips) rounds its own bottom corners, and
+   its top ones too when there is no header (headlessTableStyle). */
 const cardStyle$f = {
     label: 'AirInvoiceCard-cardStyle',
-    overflow: 'hidden',
     backgroundColor: 'var(--bg-surface, #fff)',
     border: '1px solid var(--border-color-dark, #d5d5d5)',
     borderRadius: 'var(--radius-xl, 12px)',
@@ -10773,14 +10796,15 @@ const cardStyle$f = {
 const headerStyle$E = {
     label: 'AirInvoiceCard-headerStyle',
     boxSizing: 'border-box',
-    /* Fixed to the height of the Version control's row so the two cards' headers match. */
-    minHeight: 65,
+    /* 48px with its rule, the same as its partner card's header (BookingDetailsCard / AirInvoiceCard):
+       the 40px Version control and 3px above and below it fit inside, centred. */
+    minHeight: 48,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
     flexWrap: 'wrap',
     gap: 'var(--space-3, 12px)',
-    padding: '12px 24px',
+    padding: '3px 24px',
     borderBottom: '1px solid var(--border-color-dark, #d5d5d5)',
 };
 const titleStyle$A = {
@@ -10820,6 +10844,72 @@ const versionButtonStyle = {
     '&:hover': { backgroundColor: 'var(--color-subtle, #eaf0f6)' },
     '&:focus-visible': { outline: '2px solid var(--color-accent, #00bcd0)', outlineOffset: 2 },
 };
+/* The version as a status pill beside the control, on the small line height the segment cards'
+   "Confirmed: …" pill uses (28px tall), so it centres in the 48px header like the 40px button. */
+const versionBadgeStyle = {
+    label: 'AirInvoiceCard-versionBadgeStyle',
+    whiteSpace: 'nowrap',
+    lineHeight: 'var(--lh-sm)',
+};
+/* The menu takes its rows' width, never wrapping a label, from 280px up; the shared menu would
+   otherwise shrink to the trigger's column. */
+const versionMenuStyle = {
+    label: 'AirInvoiceCard-versionMenuStyle',
+    '& [role="menu"]': {
+        width: 'max-content',
+        minWidth: 280,
+        padding: 'var(--space-3) 10px 10px',
+    },
+};
+const versionMenuHeadingStyle = {
+    label: 'AirInvoiceCard-versionMenuHeadingStyle',
+    padding: '0 var(--space-2) 10px',
+    color: 'var(--fg-3, #6b7785)',
+    fontSize: 10,
+    lineHeight: '14px',
+    fontWeight: 700,
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase',
+};
+/* Each version a rounded row, highlighted whole, with a hairline between rows inset from their ends.
+   Doubled (0,2,0) over the shared item's own border, padding and hover. */
+const versionItemStyle = {
+    label: 'AirInvoiceCard-versionItemStyle',
+    '&&': {
+        position: 'relative',
+        padding: '10px',
+        border: 0,
+        borderRadius: 'var(--radius-lg, 8px)',
+        color: 'var(--fg-1, #282828)',
+        fontSize: 13,
+        whiteSpace: 'nowrap',
+    },
+    /* On every row after another, whether or not it carries the selected class too. */
+    '[role="menuitem"] + &&::before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 'var(--space-2)',
+        right: 'var(--space-2)',
+        height: 1,
+        backgroundColor: 'var(--border-color, #e5e5e5)',
+    },
+    '&&:hover, &&:focus-visible': { backgroundColor: 'var(--bg-subtle)' },
+};
+/* Tripled (0,3,0) over the row's own hover. */
+const versionItemSelectedStyle = {
+    label: 'AirInvoiceCard-versionItemSelectedStyle',
+    '&&&, &&&:hover, &&&:focus-visible': {
+        backgroundColor: 'var(--color-primary-light, #E4F1F8)',
+        color: 'var(--color-primary, #19345f)',
+        fontWeight: 'var(--fw-semibold, 600)',
+    },
+};
+const versionCheckStyle = {
+    label: 'AirInvoiceCard-versionCheckStyle',
+    display: 'inline-flex',
+    width: 14,
+};
 const versionCountStyle = {
     label: 'AirInvoiceCard-versionCountStyle',
     minWidth: 22,
@@ -10840,7 +10930,8 @@ const versionCountStyle = {
 const tableStyle$9 = {
     label: 'AirInvoiceCard-tableStyle',
     border: 0,
-    borderRadius: 0,
+    /* The card's bottom corners, just inside its 1px border, which no longer clips. */
+    borderRadius: '0 0 calc(var(--radius-xl, 12px) - 1px) calc(var(--radius-xl, 12px) - 1px)',
     '& th, & td': { whiteSpace: 'nowrap' },
     '& th:first-of-type, & td:first-of-type': { paddingLeft: 24 },
     '& th:last-of-type, & td:last-of-type': { paddingRight: 24 },
@@ -10850,6 +10941,12 @@ const tableStyle$9 = {
         fontWeight: 700,
     },
 };
+/* With no header band, the table's navy header row is the card's top edge: round its top corners too,
+   so the band doesn't square off the card's rounded border. */
+const headlessTableStyle = {
+    label: 'AirInvoiceCard-headlessTableStyle',
+    borderRadius: 'calc(var(--radius-xl, 12px) - 1px)',
+};
 const travelerCellStyle$1 = {
     label: 'AirInvoiceCard-travelerCellStyle',
     display: 'inline-flex',
@@ -10939,8 +11036,16 @@ const AirInvoiceCard = ({ title, lines, paymentStatus, total, versions = [], sel
     const showLegend = lines.some((line) => line.knownTraveler);
     const legend = (jsxs("span", { className: sx(legendStyle$1), "data-test": "air-invoice-legend", children: [jsx("span", { className: sx(knownTravelerStyle), children: jsx(CheckIcon$1, { size: 16 }) }), "= Known Traveler Number Loaded"] }));
     const hasHeader = Boolean(title || versionControlShown(versions));
-    const versionControl = versionControlShown(versions) && (jsx(Dropdown, { label: "Version", alignment: "right", trigger: ({ isOpen, toggle }) => (jsxs("button", { type: "button", className: sx(versionButtonStyle), onClick: toggle, "aria-expanded": isOpen, "aria-haspopup": "menu", "data-test": "air-invoice-version", children: [jsx(LayersIcon, {}), "Version", jsx("span", { className: sx(versionCountStyle), children: versions.length }), jsx(ChevronDownIcon$1, { size: 16 })] })), children: versions.map((version) => (jsx(Dropdown.Item, { icon: version.id === selectedVersionId ? jsx(CheckIcon$1, { size: 14 }) : undefined, onClick: () => onVersionChange?.(version.id), children: version.label }, version.id))) }));
-    return (jsxs("section", { className: cx(sx(cardStyle$f), className), "aria-label": "Air invoice", "data-test": "air-invoice-card", children: [hasHeader && (jsxs("div", { className: sx(headerStyle$E), children: [title && jsx("h2", { className: sx(titleStyle$A), children: title }), jsx("div", { className: sx(headerEndStyle), children: versionControl })] })), jsx(Table, { className: sx(tableStyle$9), columns: columns, data: lines, hoverable: false, rowClassName: (line) => cx(line.isVoid && sx(voidRowStyle), line.struckThrough && sx(struckRowStyle)) || undefined, footer: total && (jsxs("tr", { children: [jsx("td", { colSpan: 6, children: jsxs("span", { className: sx(totalCellStyle$1), children: ["Total", showLegend && legend] }) }), jsx("td", { className: sx(upperStyle), children: paymentStatus }), jsx("td", { "data-test": "air-invoice-total", children: total })] })) }), showLegend && !total && (jsx("p", { className: sx(legendBlockStyle), children: legend }))] }));
+    const selectedIndex = versions.findIndex((version) => version.id === selectedVersionId);
+    const selected = versions[selectedIndex];
+    // The newest version is the live one; an older one is being viewed. Set as the segment cards' status
+    // pill ("Confirmed: …"): green for the current version, amber for an older one.
+    const state = selectedIndex === 0 ? 'Current' : 'Viewing';
+    const versionBadge = versionControlShown(versions) && selected && (jsx(StatusBadge, { status: selectedIndex === 0 ? 'ticketed' : 'not-ticketed', label: selected.date ? `${state}: ${selected.date}` : state, className: sx(versionBadgeStyle), "data-test": "air-invoice-version-status" }));
+    const versionControl = versionControlShown(versions) && (jsxs(Dropdown, { label: "Version", alignment: "right", className: sx(versionMenuStyle), trigger: ({ isOpen, toggle }) => (jsxs("button", { type: "button", className: sx(versionButtonStyle), onClick: toggle, "aria-expanded": isOpen, "aria-haspopup": "menu", "data-test": "air-invoice-version", children: [jsx(LayersIcon, {}), "Version", jsx("span", { className: sx(versionCountStyle), children: versions.length }), jsx(ChevronDownIcon$1, { size: 16 })] })), children: [jsx("div", { className: sx(versionMenuHeadingStyle), "aria-hidden": "true", children: "Invoice versions" }), versions.map((version) => (jsx(Dropdown.Item, { className: cx(sx(versionItemStyle), version.id === selectedVersionId && sx(versionItemSelectedStyle)), 
+                // Every row keeps the check's slot, so the labels line up whichever is picked.
+                icon: jsx("span", { className: sx(versionCheckStyle), children: version.id === selectedVersionId && jsx(CheckIcon$1, { size: 14 }) }), onClick: () => onVersionChange?.(version.id), children: version.label }, version.id)))] }));
+    return (jsxs("section", { className: cx(sx(cardStyle$f), className), "aria-label": "Air invoice", "data-test": "air-invoice-card", children: [hasHeader && (jsxs("div", { className: sx(headerStyle$E), children: [title && jsx("h2", { className: sx(titleStyle$A), children: title }), jsxs("div", { className: sx(headerEndStyle), children: [versionBadge, versionControl] })] })), jsx(Table, { className: cx(sx(tableStyle$9), !hasHeader && sx(headlessTableStyle)), columns: columns, data: lines, hoverable: false, rowClassName: (line) => cx(line.isVoid && sx(voidRowStyle), line.struckThrough && sx(struckRowStyle)) || undefined, footer: total && (jsxs("tr", { children: [jsx("td", { colSpan: 6, children: jsxs("span", { className: sx(totalCellStyle$1), children: ["Total", showLegend && legend] }) }), jsx("td", { className: sx(upperStyle), children: paymentStatus }), jsx("td", { "data-test": "air-invoice-total", children: total })] })) }), showLegend && !total && (jsx("p", { className: sx(legendBlockStyle), children: legend }))] }));
 };
 AirInvoiceCard.displayName = 'AirInvoiceCard';
 
@@ -11513,6 +11618,9 @@ const AppLayout = ({ navItems = [], activeNavKey, logo, collapsedLogo, account,
  */
 const cardStyle$e = {
     label: 'BookingDetailsCard-cardStyle',
+    /* The details go to one column by the card's own width, not the window's. */
+    containerType: 'inline-size',
+    containerName: 'booking-details',
     overflow: 'hidden',
     backgroundColor: 'var(--bg-surface, #fff)',
     border: '1px solid var(--border-color-dark, #d5d5d5)',
@@ -11526,8 +11634,8 @@ const cardStyle$e = {
 const headerStyle$D = {
     label: 'BookingDetailsCard-headerStyle',
     boxSizing: 'border-box',
-    /* Fixed to the height of the Version control's row so the two cards' headers match. */
-    minHeight: 65,
+    /* 48px with its rule, the same as its partner card's header (BookingDetailsCard / AirInvoiceCard). */
+    minHeight: 48,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -11567,7 +11675,7 @@ const detailsStyle$2 = {
     rowGap: 8,
     margin: 0,
     padding: '20px 24px',
-    '@media (max-width: 767px)': {
+    '@container booking-details (max-width: 32rem)': {
         gridTemplateColumns: 'minmax(0, 1fr)',
         gridAutoFlow: 'row',
         gridTemplateRows: 'none !important',
@@ -14760,12 +14868,22 @@ const HubAppShell = ({ children, navItems, individualTravelItem, agentsItem, sou
  * Explicit specificity keeps service and cancellation border colors stable
  * regardless of style injection order: base < type (`&&`) < cancelled (`&&&`).
  */
+/* The header's tinted band: edge to edge across the card, so it reads as the segment's title bar. */
+const HEADER_BAND = 'var(--stm-tint-200, #b8d8e8)';
 const cardStyle$a = {
     label: 'ItinerarySegmentCard-cardStyle',
     display: 'flex',
     flexDirection: 'column',
-    gap: 'var(--space-4)',
-    padding: 'var(--space-4)',
+    /* 12px between sections, the same as the route's own padding, so each section has even space above and below. */
+    gap: 'var(--space-3)',
+    /* The route stacks by the card's own width, not the window's (ROUTE_STACK below). */
+    containerType: 'inline-size',
+    containerName: 'segment-card',
+    /* The card's padding, as variables the header band's negative margins follow. */
+    '--segment-card-pad-y': 'var(--space-4)',
+    '--segment-card-pad-x': 'var(--space-4)',
+    /* 12px at the bottom, the same as between sections; the top is the header band's. */
+    padding: 'var(--segment-card-pad-y) var(--segment-card-pad-x) var(--space-3)',
     backgroundColor: 'var(--bg-surface)',
     border: '1px solid var(--border-color-dark)',
     borderLeft: '3px solid var(--color-primary)',
@@ -14806,7 +14924,8 @@ const sectionVariantStyle = {
         border: 0,
         borderRadius: 0,
         boxShadow: 'none',
-        padding: 'var(--space-5) var(--space-6)',
+        '--segment-card-pad-y': 'var(--space-5)',
+        '--segment-card-pad-x': 'var(--space-6)',
     },
 };
 const headerStyle$w = {
@@ -14814,29 +14933,28 @@ const headerStyle$w = {
     display: 'flex',
     alignItems: 'center',
     gap: 'var(--space-3)',
+    /* A band across the card's top, edge to edge: out over the card's padding, back in with its own. */
+    margin: 'calc(-1 * var(--segment-card-pad-y)) calc(-1 * var(--segment-card-pad-x)) 0',
+    padding: 'var(--space-3) var(--segment-card-pad-x)',
+    backgroundColor: HEADER_BAND,
+    borderTopLeftRadius: 'inherit',
+    borderTopRightRadius: 'inherit',
+    flexWrap: 'wrap',
 };
 const iconStyle$2 = {
     label: 'ItinerarySegmentCard-iconStyle',
     display: 'inline-flex',
     flexShrink: 0,
 };
+/* The headings take the room the check-in button and status pill leave, down to 12rem; only
+   below that do those wrap under them, whatever the window width. */
 const headingsStyle = {
     label: 'ItinerarySegmentCard-headingsStyle',
     display: 'flex',
     flexDirection: 'column',
     gap: 'var(--space-0-5)',
     minWidth: 0,
-    flex: 1,
-};
-const confirmationHeaderStyle = {
-    label: 'ItinerarySegmentCard-confirmationHeaderStyle',
-    flexWrap: 'wrap',
-    [`& .${sx(headingsStyle)}`]: {
-        flexBasis: '12rem',
-        '@media (max-width: 767px)': {
-            flexBasis: 'calc(100% - 48px - var(--space-3))',
-        },
-    },
+    flex: '1 1 12rem',
 };
 const eyebrowStyle$8 = {
     label: 'ItinerarySegmentCard-eyebrowStyle',
@@ -14897,6 +15015,17 @@ const endpointStyle = {
     gap: 'var(--space-0-5)',
     minWidth: 0,
 };
+/* Two endpoints side by side in one route column: a black car's pickup time, then its pickup location. */
+const endpointGroupStyle = {
+    label: 'ItinerarySegmentCard-endpointGroupStyle',
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    gap: 'var(--space-2) var(--space-8)',
+    minWidth: 0,
+};
+/* Narrower than this, a card stacks its route (departs / connector / arrives) in one column. */
+const ROUTE_STACK = '@container segment-card (max-width: 32rem)';
 const routeStyle$2 = {
     label: 'ItinerarySegmentCard-routeStyle',
     display: 'grid',
@@ -14906,23 +15035,32 @@ const routeStyle$2 = {
     padding: 'var(--space-3) 0',
     borderTop: '1px solid var(--border-color)',
     borderBottom: '1px solid var(--border-color)',
+    /* Straight under the header band (always the card's first child; its class is merged with the
+       header variant's, so it is matched by position): the band is its top edge, the card's 12px gap its top padding. */
+    [`*:first-child + &`]: {
+        borderTop: 0,
+        paddingTop: 0,
+    },
     /* `.route .endpoint:last-child` (0,2,1), with the endpoint's own
        content-hashed class standing in for `.endpoint`. */
-    [`& .${sx(endpointStyle)}:last-child`]: {
+    [`& > .${sx(endpointStyle)}:last-child`]: {
         textAlign: 'right',
         alignItems: 'flex-end',
-        '@media (max-width: 767px)': {
+        [ROUTE_STACK]: {
             textAlign: 'left',
             alignItems: 'flex-start',
         },
     },
-    [`& .${sx(endpointStyle)}:only-child`]: {
+    [`& > .${sx(endpointStyle)}:only-child`]: {
         gridColumn: '1 / -1',
         textAlign: 'left',
         alignItems: 'flex-start',
     },
-    /* Responsive (tablet breakpoint, --bp-md) */
-    '@media (max-width: 767px)': {
+    /* A location-only black car: its pick-up group is the route's only child. */
+    [`& > .${sx(endpointGroupStyle)}:only-child`]: {
+        gridColumn: '1 / -1',
+    },
+    [ROUTE_STACK]: {
         gridTemplateColumns: '1fr',
         gap: 'var(--space-3)',
     },
@@ -14946,13 +15084,23 @@ const endpointTimeStyle = {
     fontWeight: 'var(--fw-semibold)',
     color: 'var(--fg-1)',
 };
+/* "next / day" stacked beside the arrival time: two 14px lines, together the time's own 28px line. */
 const nextDayStyle = {
     label: 'ItinerarySegmentCard-nextDayStyle',
-    fontSize: 'var(--fs-xs)',
-    lineHeight: 'var(--lh-xs)',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignSelf: 'center',
+    fontSize: 11,
+    lineHeight: '14px',
     fontWeight: 'var(--fw-semibold)',
     color: 'var(--color-warning)',
     whiteSpace: 'nowrap',
+    textAlign: 'left',
+};
+/* "same / day": an arrival earlier on the clock than the departure, on the same date. Muted, not a warning. */
+const sameDayStyle = {
+    label: 'ItinerarySegmentCard-sameDayStyle',
+    color: 'var(--fg-3)',
 };
 const endpointCodeStyle = {
     label: 'ItinerarySegmentCard-endpointCodeStyle',
@@ -14973,14 +15121,14 @@ const connectorStyle = {
     label: 'ItinerarySegmentCard-connectorStyle',
     alignSelf: 'center',
     display: 'flex',
-    flexDirection: 'column',
+    /* One line (duration → miles); it wraps, stacking, only when the column is too narrow for it. */
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
     alignItems: 'center',
-    gap: 'var(--space-1)',
+    gap: 'var(--space-1) var(--space-2)',
     minWidth: 72,
-    '@media (max-width: 767px)': {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        gap: 'var(--space-2)',
+    [ROUTE_STACK]: {
         width: '100%',
     },
 };
@@ -15030,11 +15178,6 @@ const detailLabelStyle = {
     whiteSpace: 'nowrap',
     '&::after': { content: '":"' },
 };
-/** The second pair in one cell, e.g. `Estimated total` after `Rate`, spaced like a new field. */
-const detailBelowLabelStyle = {
-    label: 'ItinerarySegmentCard-detailBelowLabelStyle',
-    marginLeft: 'var(--space-5)',
-};
 /** A value that needs attention, e.g. `Unassigned` seats. */
 const unassignedStyle = {
     label: 'ItinerarySegmentCard-unassignedStyle',
@@ -15047,6 +15190,38 @@ const detailValueStyle = {
     color: 'var(--fg-1)',
     overflowWrap: 'anywhere',
 };
+/* `detailsLayout="stacked"`: each detail a small uppercase label over its value, in a wrapping row,
+   as a host's own fact rows set them (Hub's Rate / Estimated Total / Loyalty Number). */
+const detailsStackedStyle = {
+    label: 'ItinerarySegmentCard-detailsStackedStyle',
+    gap: 'var(--space-3) var(--space-10)',
+    [`& > .${sx(detailStyle$1)}`]: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 0,
+    },
+    [`& .${sx(detailLabelStyle)}`]: {
+        fontSize: 'var(--fs-xs)',
+        lineHeight: 'var(--lh-xs)',
+        letterSpacing: '0.025em',
+        textTransform: 'uppercase',
+        '&::after': { content: 'none' },
+    },
+    [`& .${sx(detailValueStyle)}`]: {
+        fontWeight: 'var(--fw-regular, 400)',
+    },
+};
+/* Straight under the route, a ruled section drops its own rule: the route's bottom rule already
+   divides them, and a second one 12px below it would double it. */
+const afterRoute = { [`.${sx(routeStyle$2)} + &`]: { borderTop: 0, paddingTop: 0 } };
+/* A car's or hotel's facts row (Rate, Estimated Total, ...): stacked labels over values, under a rule
+   of its own, below the address and phone. */
+const factsStyle$5 = {
+    label: 'ItinerarySegmentCard-factsStyle',
+    paddingTop: 'var(--space-3)',
+    borderTop: '1px solid var(--border-color)',
+    ...afterRoute,
+};
 /** Plain: `.mono` adds font-family and letter-spacing, neither of which
     `.detailValue` sets, so it never needed the source order it happened to have. */
 const monoStyle$2 = {
@@ -15107,6 +15282,9 @@ const footerStyle$7 = {
     fontSize: 'var(--fs-sm)',
     lineHeight: 'var(--lh-sm)',
     color: 'var(--fg-3)',
+    ...afterRoute,
+    /* A host footer that renders nothing draws no rule over nothing. */
+    '&:empty': { display: 'none' },
 };
 
 /* -------------------------------------------------------------------------- */
@@ -15237,31 +15415,48 @@ const SEGMENT_META = {
     limo: { code: 'L', label: 'Black Car' },
     rail: { code: 'R', label: 'Rail' },
 };
+/* A motor coach is set like rail, under the bus icon and Hub's own label for it. */
+const BUS_META = { code: 'B', label: 'Motor Coach' };
 /** Address lines read on one line, comma-separated; each line keeps its own element. */
 const inlineAddress = (lines) => (jsx("span", { children: lines.map((line, index) => jsxs(Fragment$1, { children: [index > 0 && ', ', jsx("span", { children: line })] }, index)) }));
 const phoneLink = (phone) => jsx("a", { className: sx(linkStyle), href: `tel:${phone.replace(/[^\d+]/g, '')}`, children: phone });
 /** An address with its phone number beside it on the same line; either may stand alone. */
-const addressWithPhone = (addressLabel, lines, phoneLabel, phone) => {
-    const phoneItem = phone?.trim() ? { label: phoneLabel, value: phoneLink(phone) } : undefined;
-    if (lines?.length)
-        return { label: addressLabel, value: inlineAddress(lines), below: phoneItem, fullRow: true };
-    return phoneItem;
-};
+/** An address and its phone as two details, each label kept with its value: a long address pushes the
+    phone, whole, onto the next line rather than splitting "Phone:" from its number. */
+const addressWithPhone = (addressLabel, lines, phoneLabel, phone) => [
+    ...(lines?.length ? [{ label: addressLabel, value: inlineAddress(lines) }] : []),
+    ...(phone?.trim() ? [{ label: phoneLabel, value: phoneLink(phone) }] : []),
+];
 const normalizeLocation = (value) => (value ?? '').trim().replace(/\s+/g, ' ').toLowerCase();
-/** `Rate` with the estimated total stacked beneath it, or the total alone when no rate was quoted. */
-const rateDetails = (segment, rate, unit, totalLabel) => {
-    const total = segment.cost !== undefined ? { label: totalLabel, value: formatItineraryMoney(segment.cost, segment.currency) } : undefined;
-    if (rate !== undefined)
-        return [{ label: 'Rate', value: `${formatItineraryMoney(rate, segment.currency)} / ${unit}`, below: total }];
-    return total ? [total] : [];
+/** `Rate`, then the estimated total as its own fact (with a note after it, e.g. `(SUV)`); either may stand alone. */
+const rateFacts = (segment, rate, money, totalNote) => [
+    ...(rate ? [{ label: 'Rate', value: rate }] : []),
+    ...(segment.cost !== undefined ? [{ label: 'Estimated Total', value: `${money(segment.cost, segment.currency)}${totalNote ? ` ${totalNote}` : ''}` }] : []),
+];
+/** An amount with its unit (`$187.00 / night`), or alone when the unit is blank. */
+const perUnit = (amount, unit) => (unit?.trim() ? `${amount} / ${unit.trim()}` : amount);
+/** A car's rate, qualified by its category (`$66.80 daily`); with no amount the category is the rate's whole value. */
+const carRate = (segment, money) => {
+    const category = segment.rateCategory?.trim().toLowerCase();
+    if (segment.dailyRate === undefined)
+        return category ? category[0].toUpperCase() + category.slice(1) : undefined;
+    const amount = money(segment.dailyRate, segment.currency);
+    return category ? `${amount} ${category}` : perUnit(amount, segment.rateUnit === undefined ? 'day' : segment.rateUnit);
+};
+const loyaltyDetail = (segment) => {
+    const numbers = segment.loyaltyNumbers?.filter((number) => number.trim());
+    return numbers?.length ? [{ label: 'Loyalty Number', value: numbers.join(' · '), mono: true }] : [];
 };
 const buildDetails = (segment) => {
     const details = [];
     if (segment.type === 'limo') {
-        if (segment.pickupLocation?.trim())
-            details.push({ label: 'Pickup location', value: segment.pickupLocation });
         if (segment.totalDue?.trim())
             details.push({ label: 'Estimated Total Due', value: segment.totalDue });
+        // The car service sits with the booking's details, above its notes.
+        if (segment.vendor?.trim())
+            details.push({ label: 'Vendor', value: segment.vendor });
+        if (segment.vendorPhone?.trim())
+            details.push({ label: 'Vendor phone', value: phoneLink(segment.vendorPhone) });
     }
     if (segment.type === 'rail') {
         if (segment.operatedBy?.trim())
@@ -15272,58 +15467,84 @@ const buildDetails = (segment) => {
             details.push({ label: 'Class', value: segment.cabin });
     }
     if (segment.type === 'air') {
-        if (segment.cabin)
-            details.push({ label: 'Class', value: segment.cabin });
+        // Seats first, then Class, as on rail.
         if (segment.seatsUnassigned)
             details.push({ label: 'Seats', value: jsx("span", { className: sx(unassignedStyle), "data-test": `itinerary-seats-unassigned-${segment.id}`, children: "Unassigned" }) });
         else if (segment.seats?.length)
             details.push({ label: segment.seats.length > 1 ? 'Seats' : 'Seat', value: segment.seats.join(', ') });
+        if (segment.cabin)
+            details.push({ label: 'Class', value: segment.cabin });
+        // A flight's loyalty numbers sit with its seat and class, before CO₂ (other types list them last).
+        details.push(...loyaltyDetail(segment));
         if (segment.co2Emissions?.trim())
             details.push({ label: 'CO₂ emissions', value: segment.co2Emissions });
     }
     if (segment.type === 'car') {
-        details.push({ label: 'Car type', value: segment.carTypeCode ? `${segment.carType} (${segment.carTypeCode})` : segment.carType });
-        details.push(...rateDetails(segment, segment.dailyRate, 'day', 'Estimated total'));
-        const pickup = addressWithPhone('Pick-Up Address', segment.pickupAddress?.filter((line) => line.trim()), 'Pick-Up Phone', segment.phone);
-        if (pickup)
-            details.push(pickup);
+        // The rate, total, car type and loyalty number are the facts row's (buildFacts).
+        details.push(...addressWithPhone('Pick-Up Address', segment.pickupAddress?.filter((line) => line.trim()), 'Pick-Up Phone', segment.phone));
+        // A one-way rental's drop-off, set like its pick-up; left out when it's the same counter.
         const dropoffLines = segment.dropoffAddress?.filter((line) => line.trim());
-        const sameAsPickup = normalizeLocation((segment.dropoffAddress ?? []).join(' ')) === normalizeLocation((segment.pickupAddress ?? []).join(' '));
-        if (dropoffLines?.length && !sameAsPickup)
-            details.push({ label: 'Drop-Off Address', value: inlineAddress(dropoffLines), fullRow: true });
+        // Compared by address, or by location where a side has no address, so two blank addresses
+        // don't make different counters the same.
+        const counter = (address, location) => normalizeLocation((address ?? []).join(' ')) || normalizeLocation(location);
+        const sameAsPickup = counter(segment.dropoffAddress, segment.dropoffLocation) === counter(segment.pickupAddress, segment.pickupLocation);
+        if (!sameAsPickup)
+            details.push(...addressWithPhone('Drop-Off Address', dropoffLines, 'Drop-Off Phone', segment.dropoffPhone));
     }
     if (segment.type === 'hotel') {
-        if (segment.chain)
-            details.push({ label: 'Chain', value: segment.chainCode ? `${segment.chain} (${segment.chainCode})` : segment.chain });
-        if (segment.roomType)
-            details.push({ label: 'Room type', value: segment.roomType });
-        details.push(...rateDetails(segment, segment.nightlyRate, 'night', 'Estimated Total'));
+        // The rate, total, loyalty number, room and chain are the facts row's (buildFacts).
         const hotelLines = [...(segment.address ?? []), ...(segment.cityLine ? [segment.cityLine] : [])].filter((line) => line.trim());
-        const hotelAddress = addressWithPhone('Address', hotelLines, 'Phone', segment.phone);
-        if (hotelAddress)
-            details.push(hotelAddress);
+        details.push(...addressWithPhone('Address', hotelLines, 'Phone', segment.phone));
     }
     // Cars and hotels carry the reservation name under their vendor name instead; flights leave it out.
     if (segment.reservationName && (segment.type === 'rail' || segment.type === 'limo'))
         details.push({ label: 'Reserved for', value: segment.reservationName });
-    const loyaltyNumbers = segment.loyaltyNumbers?.filter((number) => number.trim());
-    if (loyaltyNumbers?.length)
-        details.push({ label: 'Loyalty Number', value: loyaltyNumbers.join(' · '), mono: true });
+    if (segment.type === 'rail' || segment.type === 'limo')
+        details.push(...loyaltyDetail(segment));
     return details;
 };
+/**
+ * A rental's or a stay's facts — rate, estimated total, and the rest — as one row of small labels over
+ * values under a rule, below the address and phone, as Hub's itinerary sets them.
+ */
+const buildFacts = (segment, money) => {
+    if (segment.type === 'car') {
+        return [
+            ...rateFacts(segment, carRate(segment, money), money, segment.isSuv ? '(SUV)' : undefined),
+            // A host that shows the car type elsewhere (or has none) passes it blank, and the fact is left out.
+            ...(segment.carType?.trim() ? [{ label: 'Car type', value: segment.carTypeCode ? `${segment.carType} (${segment.carTypeCode})` : segment.carType }] : []),
+            ...loyaltyDetail(segment),
+        ];
+    }
+    if (segment.type === 'hotel') {
+        return [
+            ...rateFacts(segment, segment.nightlyRate !== undefined ? perUnit(money(segment.nightlyRate, segment.currency), segment.rateUnit ?? 'night') : undefined, money),
+            ...loyaltyDetail(segment),
+            ...(segment.roomType ? [{ label: 'Room type', value: segment.roomType }] : []),
+            ...(segment.chain ? [{ label: 'Chain', value: segment.chainCode ? `${segment.chain} (${segment.chainCode})` : segment.chain }] : []),
+        ];
+    }
+    return [];
+};
 /**
  * One flight, rental car, hotel, Black Car or rail booking.
  * Uses a shared header, journey board and labelled details grounded in Hub.
  */
-const ItinerarySegmentCard = ({ segment, headingLevel = 3, onCheckIn, showCheckIn = false, variant = 'card', footer, renderVendorMark, className = '', }) => {
-    const meta = SEGMENT_META[segment.type];
+const ItinerarySegmentCard = ({ segment, headingLevel = 3, onCheckIn, showCheckIn = false, variant = 'card', footer, detailsLayout = 'inline', renderVendorMark, formatMoney = formatItineraryMoney, className = '', }) => {
+    const meta = segment.type === 'rail' && segment.mode === 'bus' ? BUS_META : SEGMENT_META[segment.type];
     const badge = STATUS_BADGE$1[segment.status];
     const pillConfirmation = segment.confirmation?.trim();
     const details = buildDetails(segment);
+    const facts = buildFacts(segment, formatMoney);
     const Heading = `h${headingLevel}`;
     const vendorCode = segment.type === 'air' || segment.type === 'rail' ? segment.carrierCode : segment.type === 'car' ? segment.vendorCode : segment.type === 'hotel' ? segment.chainCode : undefined;
     // Flights and trains both flag an arrival on a later calendar day.
     const dayOffset = segment.type === 'air' || segment.type === 'rail' ? calendarDayOffset(segment.departureDate, segment.arrivalDate) : 0;
+    // Lands on the date it left, at an earlier clock time: eastward over the date line (SYD 10:10 AM ->
+    // LAX 6:00 AM, both Oct 4). Only with an arrival date given, so an unknown one never reads as "same day".
+    const arrivesEarlierSameDay = (segment.type === 'air' || segment.type === 'rail')
+        && !!segment.arrivalDate && dayOffset === 0
+        && (parseClockTime(segment.arrivalTime) ?? Infinity) < (parseClockTime(segment.departureTime) ?? -Infinity);
     const duration = segment.type === 'air' || segment.type === 'rail'
         ? segment.elapsed
         : segment.type === 'car' || segment.type === 'limo'
@@ -15353,9 +15574,11 @@ const ItinerarySegmentCard = ({ segment, headingLevel = 3, onCheckIn, showCheckI
             }
             : segment.type === 'limo'
                 ? {
-                    startLabel: segment.pickupTime?.trim() ? 'Pickup time' : 'Pickup date',
+                    // The pickup date only on a standalone card: as a timeline section, the day's header above
+                    // already carries it. A date-only black car is labelled by its date.
+                    startLabel: segment.pickupTime?.trim() || variant === 'section' ? 'Pick-up time' : 'Pick-up date',
                     startTime: segment.pickupTime?.trim(),
-                    startCode: segment.pickupDate ? formatItineraryDate(segment.pickupDate) : '',
+                    startCode: variant === 'card' && segment.pickupDate ? formatItineraryDate(segment.pickupDate) : '',
                     startPlace: '',
                     endLabel: 'Drop-off location',
                     endTime: segment.dropoffLocation?.trim(),
@@ -15372,15 +15595,31 @@ const ItinerarySegmentCard = ({ segment, headingLevel = 3, onCheckIn, showCheckI
                     endCode: '',
                     endPlace: '',
                 };
-    const hasStart = !!(endpoints.startTime || endpoints.startCode || endpoints.startPlace);
+    // An airport or station code rides on its Departs / Arrives label ("DEPARTS ABI"), in the label's type,
+    // above the time; the other types' second line (a car's or black car's date) keeps its own place.
+    const codeOnLabel = segment.type === 'air' || segment.type === 'rail';
+    // A black car's pickup location is its own block beside the pickup time, labelled and set like the
+    // drop-off location opposite it.
+    const pickupLocation = segment.type === 'limo' ? segment.pickupLocation?.trim() ?? '' : '';
+    const hasPickupWhen = !!(endpoints.startTime || endpoints.startCode || endpoints.startPlace);
+    const hasStart = hasPickupWhen || !!pickupLocation;
     const hasEnd = !!(endpoints.endTime || endpoints.endCode || endpoints.endPlace);
-    const headerCheckIn = segment.type === 'air' && showCheckIn && !!onCheckIn;
+    const checkInUrl = segment.type === 'air' ? segment.checkInUrl?.trim() : undefined;
+    const canCheckIn = !!checkInUrl || !!onCheckIn;
+    const headerCheckIn = segment.type === 'air' && showCheckIn && canCheckIn;
     const checkInLabel = segment.type === 'air' ? `Check in for ${segment.carrierCode ?? segment.carrier} ${segment.flightNumber}` : '';
+    /** Check In as a link to the airline's page when the flight has one, else a button calling `onCheckIn`. */
+    const checkInControl = (variant, children, ariaLabel) => checkInUrl ? (jsx("a", { href: checkInUrl, target: "_blank", rel: "noopener noreferrer", className: cx(sx(buttonStyle), sx(variantStyles$7[variant]), sx(sizeStyles$a.sm)), "aria-label": ariaLabel, "data-test": `itinerary-check-in-${segment.id}`, children: jsx("span", { className: sx(contentStyle$d), children: children }) })) : (jsx(Button, { size: "sm", variant: variant, "aria-label": ariaLabel, "data-test": `itinerary-check-in-${segment.id}`, onClick: () => segment.type === 'air' && onCheckIn?.(segment), children: children }));
     const noteSections = [
         ...(segment.type === 'limo' ? [{ label: 'Cancellation policy', lines: segment.cancellationPolicies }] : []),
         { label: 'Segment Notes', lines: segment.type === 'limo' ? [...(segment.comments ?? []), ...(segment.notes ?? [])] : segment.notes },
     ];
-    return (jsxs("article", { className: cx(sx(cardStyle$a), sx(typeStyles$1[segment.type]), segment.status === 'cancelled' && sx(isCancelledStyle), variant === 'section' && sx(sectionVariantStyle), className), "data-test": `itinerary-segment-${segment.id}`, "aria-label": `${meta.label} — ${getSegmentTitle(segment)}`, children: [jsxs("div", { className: cx(sx(headerStyle$w), pillConfirmation && sx(confirmationHeaderStyle)), children: [jsx("span", { className: sx(iconStyle$2), "aria-hidden": "true", children: renderVendorMark?.(segment, vendorCode) ?? jsx(TravelServiceIcon, { type: meta.code, vendor: vendorCode, size: 48 }) }), jsxs("span", { className: sx(headingsStyle), children: [jsx("span", { className: sx(eyebrowStyle$8), children: meta.label }), jsx("span", { className: sx(titleRowStyle$2), children: jsx(Heading, { className: sx(titleStyle$u), children: getSegmentTitle(segment) }) }), segment.type === 'air' && segment.operatedBy?.trim() && jsxs("span", { className: sx(operatedByStyle), children: ["Operated by ", segment.operatedBy] }), (segment.type === 'car' || segment.type === 'hotel') && segment.reservationName?.trim() && (jsxs("span", { className: sx(operatedByStyle), "data-test": `itinerary-reserved-for-${segment.id}`, children: ["Reserved for ", segment.reservationName] }))] }), headerCheckIn && (jsx(Button, { size: "sm", variant: "primary", "aria-label": checkInLabel, "data-test": `itinerary-check-in-${segment.id}`, onClick: () => onCheckIn?.(segment), children: "Check In" })), jsx(StatusBadge, { status: badge.variant, label: pillConfirmation ? `${badge.label}: ${pillConfirmation}` : badge.label, className: sx(statusStyle$4), style: pillConfirmation ? { maxWidth: '100%', whiteSpace: 'normal', overflowWrap: 'anywhere', lineHeight: 'var(--lh-sm)' } : undefined })] }), (hasStart || hasEnd) && jsxs("div", { className: sx(routeStyle$2), children: [hasStart && jsxs("div", { className: sx(endpointStyle), children: [jsx("span", { className: sx(endpointLabelStyle), children: endpoints.startLabel }), segment.type === 'car' && jsx("span", { className: sx(endpointTimeStyle), children: endpoints.startCode }), endpoints.startTime && jsx("span", { className: sx(segment.type === 'car' ? endpointCodeStyle : endpointTimeStyle), children: endpoints.startTime }), segment.type !== 'car' && endpoints.startCode && jsx("span", { className: sx(endpointCodeStyle), children: endpoints.startCode }), endpoints.startPlace && jsx("span", { className: sx(endpointPlaceStyle), children: endpoints.startPlace })] }), hasStart && hasEnd && jsxs("div", { className: sx(connectorStyle), children: [duration && jsx("span", { className: sx(connectorLabelStyle), children: duration }), jsx("span", { className: sx(connectorArrowStyle), "aria-hidden": "true", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }), jsx("polyline", { points: "12 5 19 12 12 19" })] }) }), (segment.type === 'air' || segment.type === 'rail') && !!segment.miles && jsxs("span", { className: sx(connectorLabelStyle), children: [segment.miles.toLocaleString('en-US'), " miles"] }), segment.type === 'car' && !!segment.carCount && jsxs("span", { className: sx(connectorLabelStyle), children: [segment.carCount, " ", segment.carCount === 1 ? 'Vehicle' : 'Vehicles'] }), segment.type === 'hotel' && !!segment.rooms && jsxs("span", { className: sx(connectorLabelStyle), children: [segment.rooms, " ", segment.rooms === 1 ? 'Room' : 'Rooms'] })] }), hasEnd && jsxs("div", { className: sx(endpointStyle), children: [jsx("span", { className: sx(endpointLabelStyle), children: endpoints.endLabel }), segment.type === 'car' && jsx("span", { className: sx(endpointTimeStyle), children: endpoints.endCode }), endpoints.endTime && (jsxs("span", { className: sx(segment.type === 'car' ? endpointCodeStyle : endpointTimeStyle), children: [endpoints.endTime, dayOffset > 0 && jsxs("span", { className: sx(nextDayStyle), children: ["+", dayOffset, " day", dayOffset === 1 ? '' : 's'] })] })), segment.type !== 'car' && endpoints.endCode && jsx("span", { className: sx(endpointCodeStyle), children: endpoints.endCode }), endpoints.endPlace && jsx("span", { className: sx(endpointPlaceStyle), children: endpoints.endPlace })] })] }), details.length > 0 && (jsx("dl", { className: sx(detailsStyle$1), children: details.map((detail) => (jsxs("div", { className: cx(sx(detailStyle$1), detail.fullRow && sx(detailFullRowStyle)), children: [jsx("dt", { className: sx(detailLabelStyle), children: detail.label }), jsx("dd", { className: cx(sx(detailValueStyle), detail.mono && sx(monoStyle$2)), children: detail.value }), detail.below && jsxs(Fragment, { children: [jsx("dt", { className: cx(sx(detailLabelStyle), sx(detailBelowLabelStyle)), children: detail.below.label }), jsx("dd", { className: sx(detailValueStyle), children: detail.below.value })] })] }, detail.label))) })), segment.type === 'air' && segment.flightStatus && (jsx("p", { className: sx(flightStatusStyle), "data-test": `itinerary-flight-status-${segment.id}`, children: segment.flightStatus })), segment.type === 'air' && segment.checkInAvailable && onCheckIn && !headerCheckIn && (jsx("div", { className: sx(actionsStyle$6), children: jsxs(Button, { size: "sm", variant: "secondary", "data-test": `itinerary-check-in-${segment.id}`, onClick: () => onCheckIn?.(segment), children: ["Check in for ", segment.carrierCode ?? segment.carrier, " ", segment.flightNumber] }) })), noteSections.map(({ label, lines }) => {
+    return (jsxs("article", { className: cx(sx(cardStyle$a), sx(typeStyles$1[segment.type]), segment.status === 'cancelled' && sx(isCancelledStyle), variant === 'section' && sx(sectionVariantStyle), className), "data-test": `itinerary-segment-${segment.id}`, "aria-label": `${meta.label} — ${getSegmentTitle(segment)}`, children: [jsxs("div", { className: sx(headerStyle$w), children: [jsx("span", { className: sx(iconStyle$2), "aria-hidden": "true", children: renderVendorMark?.(segment, vendorCode) ?? jsx(TravelServiceIcon, { type: meta.code, vendor: vendorCode, size: 48 }) }), jsxs("span", { className: sx(headingsStyle), children: [jsx("span", { className: sx(eyebrowStyle$8), children: meta.label }), jsx("span", { className: sx(titleRowStyle$2), children: jsx(Heading, { className: sx(titleStyle$u), children: getSegmentTitle(segment) }) }), segment.type === 'air' && segment.operatedBy?.trim() && jsxs("span", { className: sx(operatedByStyle), children: ["Operated by ", segment.operatedBy] }), (segment.type === 'car' || segment.type === 'hotel') && segment.reservationName?.trim() && (jsxs("span", { className: sx(operatedByStyle), "data-test": `itinerary-reserved-for-${segment.id}`, children: ["Reserved for ", segment.reservationName] }))] }), headerCheckIn && checkInControl('primary', 'Check In', checkInLabel), jsx(StatusBadge, { status: badge.variant, label: pillConfirmation ? `${badge.label}: ${pillConfirmation}` : badge.label, className: sx(statusStyle$4), style: pillConfirmation ? { maxWidth: '100%', whiteSpace: 'normal', overflowWrap: 'anywhere', lineHeight: 'var(--lh-sm)' } : undefined })] }), (hasStart || hasEnd) && jsxs("div", { className: sx(routeStyle$2), children: [hasStart && (() => {
+                        const when = hasPickupWhen && jsxs("div", { className: sx(endpointStyle), children: [jsxs("span", { className: sx(endpointLabelStyle), children: [endpoints.startLabel, codeOnLabel && endpoints.startCode && ` ${endpoints.startCode}`] }), segment.type === 'car' && jsx("span", { className: sx(endpointTimeStyle), children: endpoints.startCode }), endpoints.startTime && jsx("span", { className: sx(segment.type === 'car' ? endpointCodeStyle : endpointTimeStyle), children: endpoints.startTime }), !codeOnLabel && segment.type !== 'car' && endpoints.startCode && jsx("span", { className: sx(endpointCodeStyle), children: endpoints.startCode }), endpoints.startPlace && jsx("span", { className: sx(endpointPlaceStyle), children: endpoints.startPlace })] });
+                        if (!pickupLocation)
+                            return when;
+                        return (jsxs("div", { className: sx(endpointGroupStyle), children: [when, jsxs("div", { className: sx(endpointStyle), children: [jsx("span", { className: sx(endpointLabelStyle), children: "Pick-up location" }), jsx("span", { className: sx(endpointTimeStyle), children: pickupLocation })] })] }));
+                    })(), hasStart && hasEnd && jsxs("div", { className: sx(connectorStyle), children: [duration && jsx("span", { className: sx(connectorLabelStyle), children: duration }), jsx("span", { className: sx(connectorArrowStyle), "aria-hidden": "true", children: jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }), jsx("polyline", { points: "12 5 19 12 12 19" })] }) }), (segment.type === 'air' || segment.type === 'rail') && !!segment.miles && jsxs("span", { className: sx(connectorLabelStyle), children: [segment.miles.toLocaleString('en-US'), " miles"] }), segment.type === 'car' && !!segment.carCount && jsxs("span", { className: sx(connectorLabelStyle), children: [segment.carCount, " ", segment.carCount === 1 ? 'Vehicle' : 'Vehicles'] }), segment.type === 'hotel' && !!segment.rooms && jsxs("span", { className: sx(connectorLabelStyle), children: [segment.rooms, " ", segment.rooms === 1 ? 'Room' : 'Rooms'] })] }), hasEnd && jsxs("div", { className: sx(endpointStyle), children: [jsxs("span", { className: sx(endpointLabelStyle), children: [endpoints.endLabel, codeOnLabel && endpoints.endCode && ` ${endpoints.endCode}`] }), segment.type === 'car' && jsx("span", { className: sx(endpointTimeStyle), children: endpoints.endCode }), endpoints.endTime && (jsxs("span", { className: sx(segment.type === 'car' ? endpointCodeStyle : endpointTimeStyle), children: [endpoints.endTime, dayOffset > 0 && (jsxs("span", { className: sx(nextDayStyle), role: "img", "aria-label": dayOffset === 1 ? 'next day' : `${dayOffset} days later`, children: [jsx("span", { "aria-hidden": "true", children: dayOffset === 1 ? 'next' : `+${dayOffset}` }), jsx("span", { "aria-hidden": "true", children: dayOffset === 1 ? 'day' : 'days' })] })), arrivesEarlierSameDay && (jsxs("span", { className: cx(sx(nextDayStyle), sx(sameDayStyle)), role: "img", "aria-label": "same day", children: [jsx("span", { "aria-hidden": "true", children: "same" }), jsx("span", { "aria-hidden": "true", children: "day" })] }))] })), !codeOnLabel && segment.type !== 'car' && endpoints.endCode && jsx("span", { className: sx(endpointCodeStyle), children: endpoints.endCode }), endpoints.endPlace && jsx("span", { className: sx(endpointPlaceStyle), children: endpoints.endPlace })] })] }), details.length > 0 && (jsx("dl", { className: cx(sx(detailsStyle$1), detailsLayout === 'stacked' && sx(detailsStackedStyle)), children: details.map((detail) => (jsxs("div", { className: cx(sx(detailStyle$1), detail.fullRow && sx(detailFullRowStyle)), children: [jsx("dt", { className: sx(detailLabelStyle), children: detail.label }), jsx("dd", { className: cx(sx(detailValueStyle), detail.mono && sx(monoStyle$2)), children: detail.value })] }, detail.label))) })), facts.length > 0 && (jsx("dl", { className: cx(sx(detailsStyle$1), sx(detailsStackedStyle), sx(factsStyle$5)), "data-test": `itinerary-facts-${segment.id}`, children: facts.map((fact) => (jsxs("div", { className: sx(detailStyle$1), children: [jsx("dt", { className: sx(detailLabelStyle), children: fact.label }), jsx("dd", { className: cx(sx(detailValueStyle), fact.mono && sx(monoStyle$2)), children: fact.value })] }, fact.label))) })), segment.type === 'air' && segment.flightStatus && (jsx("p", { className: sx(flightStatusStyle), "data-test": `itinerary-flight-status-${segment.id}`, children: segment.flightStatus })), segment.type === 'air' && (segment.checkInAvailable || !!checkInUrl) && canCheckIn && !headerCheckIn && (jsx("div", { className: sx(actionsStyle$6), children: checkInControl('secondary', checkInLabel) })), noteSections.map(({ label, lines }) => {
                 const content = lines?.filter((line) => line.trim());
                 return content?.length ? (jsxs("section", { "aria-label": label, className: sx(footerStyle$7), children: [jsx("div", { className: sx(noteLabelStyle), children: label }), content.map((line, index) => jsx("p", { className: sx(noteLineStyle), children: line }, index))] }, label)) : null;
             }), footer && jsx("div", { className: sx(footerStyle$7), children: footer })] }));
@@ -15441,52 +15680,111 @@ const daySegmentsStyle = {
     display: 'flex',
     flexDirection: 'column',
 };
-/* The rule between a day's segments sits on this wrapper, clear of the segment's own border reset. */
+/* A thin rule between a day's segments, on this wrapper, clear of the segment's own border reset. Each
+   card's tinted header band already marks where one service ends and the next begins, so a change of
+   type gets no heavier rule. */
 const daySectionStyle = {
     label: 'ItineraryTimeline-daySectionStyle',
     '& + &': { borderTop: '1px solid var(--border-color-dark)' },
 };
-/* Where the segment type changes — air to car, car to hotel — a slightly heavier navy rule. */
-const typeChangeSectionStyle = {
-    label: 'ItineraryTimeline-typeChangeSectionStyle',
-    '&&': { borderTop: '2px solid var(--color-primary, #19345f)' },
-};
-/* A connection: the dividing rule carries the layover, so the section drops its own rule. */
+/* A connection: its layover section draws its own rules, so the wrapper drops the thin one. */
 const layoverSectionStyle = {
     label: 'ItineraryTimeline-layoverSectionStyle',
     '&&': { borderTop: 0 },
 };
+/* The connection's amber, and its pale wash for the section behind the layover. */
+const AMBER = 'var(--color-warning-accent, #E8A13A)';
+const AMBER_WASH = `color-mix(in srgb, ${AMBER} 14%, white)`;
+/* The layover between two flights: a full-width pale amber section, padded like the cards so its
+   rail lines up under their logo column. */
 const layoverStyle = {
     label: 'ItineraryTimeline-layoverStyle',
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'stretch',
     gap: 'var(--space-3)',
-    /* No top padding: the rule sits exactly where the section's own border would. */
     padding: '0 var(--space-6)',
-    /* Centre the pill on the rule: half its height (line + padding + border) above the section edge. */
-    marginTop: 'calc((var(--lh-sm, 20px) + 10px) / -2)',
-    '&::before, &::after': {
-        content: '""',
-        flex: 1,
-        height: 2,
-        backgroundColor: 'var(--color-warning-accent, #E8A13A)',
-    },
+    backgroundColor: AMBER_WASH,
+    borderTop: `1px solid color-mix(in srgb, ${AMBER} 35%, white)`,
+    borderBottom: `1px solid color-mix(in srgb, ${AMBER} 35%, white)`,
 };
-/* A pill in the warning amber, so a tight connection is hard to miss. */
-const layoverLabelStyle = {
-    label: 'ItineraryTimeline-layoverLabelStyle',
+/* The 48px logo column, so the dashed line meets both cards' logos. */
+const layoverRailStyle = {
+    label: 'ItineraryTimeline-layoverRailStyle',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: 48,
+};
+const layoverLineStyle = {
+    label: 'ItineraryTimeline-layoverLineStyle',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    borderLeft: `2px dashed ${AMBER}`,
+};
+/* A dot where the line meets each flight, centred on the section's top and bottom edges. */
+const layoverDot = {
+    position: 'absolute',
+    left: '50%',
+    width: 8,
+    height: 8,
+    borderRadius: 9999,
+    backgroundColor: AMBER,
+};
+const layoverDotStartStyle = {
+    label: 'ItineraryTimeline-layoverDotStartStyle',
+    ...layoverDot,
+    top: 0,
+    transform: 'translate(-50%, -50%)',
+};
+const layoverDotEndStyle = {
+    label: 'ItineraryTimeline-layoverDotEndStyle',
+    ...layoverDot,
+    bottom: 0,
+    transform: 'translate(-50%, 50%)',
+};
+/* The clock on the line, in a white disc ringed in the amber. */
+const layoverClockStyle = {
+    label: 'ItineraryTimeline-layoverClockStyle',
+    position: 'relative',
     display: 'inline-flex',
     alignItems: 'center',
-    gap: 6,
-    padding: '4px 12px',
-    border: '1px solid var(--color-warning-accent, #E8A13A)',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    width: 28,
+    height: 28,
+    margin: 'var(--space-3) 0',
+    border: `2px solid ${AMBER}`,
     borderRadius: 9999,
-    backgroundColor: 'color-mix(in srgb, var(--color-warning-accent, #E8A13A) 16%, var(--bg-surface, #fff))',
-    color: 'var(--fg-1)',
+    backgroundColor: 'white',
+    color: 'var(--color-warning, #B26B00)',
+};
+const layoverTextStyle = {
+    label: 'ItineraryTimeline-layoverTextStyle',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minWidth: 0,
+    padding: 'var(--space-3) 0',
+};
+const layoverLabelStyle = {
+    label: 'ItineraryTimeline-layoverLabelStyle',
+    fontSize: 'var(--fs-xs)',
+    lineHeight: 'var(--lh-xs)',
+    fontWeight: 'var(--fw-semibold)',
+    letterSpacing: '0.025em',
+    textTransform: 'uppercase',
+    color: 'var(--color-warning, #B26B00)',
+};
+const layoverDetailStyle = {
+    label: 'ItineraryTimeline-layoverDetailStyle',
     fontSize: 'var(--fs-sm)',
     lineHeight: 'var(--lh-sm)',
-    whiteSpace: 'nowrap',
-    '& svg': { color: 'var(--color-warning, #B26B00)' },
+    color: 'var(--fg-1)',
     '& strong': { fontWeight: 'var(--fw-bold, 700)' },
 };
 /* ---------- Loading / error / empty ---------- */
@@ -15535,13 +15833,18 @@ const errorStateStyle$1 = {
  * and keeps the legs of a connection in the order they are flown.
  *
  * Day grouping keys off the plain `YYYY-MM-DD` string, so ordering never depends
- * on the reader's time zone. Segments with no stated time sort last, keeping the
- * order they were given.
+ * on the reader's time zone. A segment's `travelDay`, when given, is its day in
+ * place of its own date; within a day, segments order by their own date, then
+ * time. Segments with no stated time sort last, keeping the order they were given.
+ *
+ * `preserveOrder` keeps each day's segments in the order given (days are still
+ * ordered by date), for a host whose order is already right where local clock
+ * times are not — a day that crosses the date line, ordered by UTC.
  */
-const groupSegmentsByDay = (segments) => {
+const groupSegmentsByDay = (segments, { preserveOrder = false } = {}) => {
     const days = new Map();
     segments.forEach((segment) => {
-        const date = getSegmentDate(segment);
+        const date = segment.travelDay?.trim() || getSegmentDate(segment);
         const existing = days.get(date);
         if (existing)
             existing.push(segment);
@@ -15554,7 +15857,12 @@ const groupSegmentsByDay = (segments) => {
         .map(([date, daySegments]) => ({
         date,
         // Array.prototype.sort is stable, so untimed segments keep their given order.
-        segments: [...daySegments].sort((a, b) => {
+        segments: preserveOrder ? daySegments : [...daySegments].sort((a, b) => {
+            // A segment listed under an earlier travel day (a connection after midnight) follows that day's own.
+            const aDate = getSegmentDate(a);
+            const bDate = getSegmentDate(b);
+            if (aDate && bDate && aDate !== bDate)
+                return aDate.localeCompare(bDate);
             const aStart = getSegmentStartMinutes(a);
             const bStart = getSegmentStartMinutes(b);
             if (aStart === null || bStart === null)
@@ -15563,16 +15871,24 @@ const groupSegmentsByDay = (segments) => {
         }),
     }));
 };
-const SEGMENT_NOUNS = { air: 'flight', car: 'car rental', hotel: 'hotel stay', limo: 'Black Car transfer', rail: 'rail journey' };
+const segmentKind = (segment) => (segment.type === 'rail' && segment.mode === 'bus' ? 'bus' : segment.type);
+const SEGMENT_NOUNS = {
+    air: ['flight', 'flights'],
+    car: ['car rental', 'car rentals'],
+    hotel: ['hotel stay', 'hotel stays'],
+    limo: ['Black Car transfer', 'Black Car transfers'],
+    rail: ['rail journey', 'rail journeys'],
+    bus: ['motor coach', 'motor coaches'],
+};
 /** Plain-language summary of a day, e.g. `2 flights · 1 hotel stay`. */
 const summariseDay = (segments) => {
     const counts = new Map();
-    segments.forEach((segment) => counts.set(segment.type, (counts.get(segment.type) ?? 0) + 1));
-    return ['air', 'car', 'hotel', 'limo', 'rail']
-        .filter((type) => counts.has(type))
-        .map((type) => {
-        const count = counts.get(type);
-        return `${count} ${SEGMENT_NOUNS[type]}${count > 1 ? 's' : ''}`;
+    segments.forEach((segment) => counts.set(segmentKind(segment), (counts.get(segmentKind(segment)) ?? 0) + 1));
+    return ['air', 'car', 'hotel', 'limo', 'rail', 'bus']
+        .filter((kind) => counts.has(kind))
+        .map((kind) => {
+        const count = counts.get(kind);
+        return `${count} ${SEGMENT_NOUNS[kind][count > 1 ? 1 : 0]}`;
     })
         .join(' · ');
 };
@@ -15608,10 +15924,17 @@ const formatLayover = (minutes) => {
     return rest ? `${hours}h ${rest}m` : `${hours}h`;
 };
 const ClockIcon = () => (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("polyline", { points: "12 6 12 12 16 14" })] }));
+/**
+ * The time between two connecting flights, as its own full-width section: a pale
+ * amber band with, under the cards' 48px logo column, a dashed line from the
+ * flight above to the flight below (a dot where it meets each) carrying a clock,
+ * and the layover beside it.
+ */
+const LayoverRow = ({ minutes, airport }) => (jsxs("div", { className: sx(layoverStyle), "data-test": "itinerary-layover", children: [jsxs("span", { className: sx(layoverRailStyle), "aria-hidden": "true", children: [jsx("span", { className: sx(layoverLineStyle) }), jsx("span", { className: sx(layoverDotStartStyle) }), jsx("span", { className: sx(layoverDotEndStyle) }), jsx("span", { className: sx(layoverClockStyle), children: jsx(ClockIcon, {}) })] }), jsxs("span", { className: sx(layoverTextStyle), children: [jsx("span", { className: sx(layoverLabelStyle), children: "Connection" }), jsxs("span", { className: sx(layoverDetailStyle), children: [jsx("strong", { children: formatLayover(minutes) }), " layover", airport.trim() ? ` in ${airport}` : ''] })] })] }));
 const FILTER_TYPES = {
     air: ['air'],
     hotel: ['hotel'],
-    ground: ['car', 'limo'],
+    ground: ['car', 'limo', 'bus'],
     rail: ['rail'],
 };
 const FILTER_TABS = [
@@ -15621,12 +15944,12 @@ const FILTER_TABS = [
     { value: 'ground', label: 'Ground', icon: jsx(CarIcon$1, { size: 16 }) },
     { value: 'rail', label: 'Rail', icon: jsx(RailIcon, { size: 16 }) },
 ];
-const matchesFilter = (segment, filter) => filter === 'all' || FILTER_TYPES[filter].includes(segment.type);
+const matchesFilter = (segment, filter) => filter === 'all' || FILTER_TYPES[filter].includes(segmentKind(segment));
 /**
  * Groups all supported bookings under each travel day.
  * Also covers loading, error and nothing-booked-yet states.
  */
-const ItineraryTimeline = ({ segments, loading = false, error, emptyMessage = 'Nothing is booked on this trip yet. Your travel team will add flights, cars and hotels as they are confirmed.', onCheckIn, renderVendorMark, showTypeTabs = false, className = '', }) => {
+const ItineraryTimeline = ({ segments, loading = false, error, emptyMessage = 'Nothing is booked on this trip yet. Your travel team will add flights, cars and hotels as they are confirmed.', onCheckIn, renderVendorMark, renderSegmentFooter, formatMoney, preserveOrder = false, showTypeTabs = false, className = '', }) => {
     const [filter, setFilter] = useState('all');
     const panelId = useId();
     if (loading) {
@@ -15635,7 +15958,7 @@ const ItineraryTimeline = ({ segments, loading = false, error, emptyMessage = 'N
     if (error) {
         return (jsx("div", { className: cx(sx(timelineStyle), className), "data-test": "itinerary-timeline-error", children: jsx("div", { className: cx(sx(stateStyle$3), sx(errorStateStyle$1)), role: "alert", children: jsx("p", { className: sx(stateTextStyle$1), children: error }) }) }));
     }
-    const allDays = groupSegmentsByDay(segments);
+    const allDays = groupSegmentsByDay(segments, { preserveOrder });
     const days = allDays
         .map((day) => ({ ...day, segments: day.segments.filter((segment) => matchesFilter(segment, filter)) }))
         .filter((day) => day.segments.length > 0);
@@ -15650,9 +15973,22 @@ const ItineraryTimeline = ({ segments, loading = false, error, emptyMessage = 'N
                 activation: "automatic", "aria-label": "Segment type", controls: panelId })), jsx("div", { className: sx(daysStyle), id: panelId, role: showTypeTabs ? 'tabpanel' : undefined, children: days.map((day) => (jsxs("section", { className: sx(dayStyle), "aria-labelledby": `itinerary-day-${day.date || 'undated'}`, children: [jsxs("div", { className: sx(dayHeaderStyle), children: [jsx("h2", { className: sx(dayTitleStyle), id: `itinerary-day-${day.date || 'undated'}`, children: day.date ? formatItineraryDate(day.date, 'long') : 'Date to be confirmed' }), jsx("span", { className: sx(daySummaryStyle), children: summariseDay(day.segments) })] }), jsx("div", { className: sx(daySegmentsStyle), children: day.segments.map((segment, index) => {
                                 const previous = index > 0 ? day.segments[index - 1] : undefined;
                                 const layover = previous ? getLayoverMinutes(previous, segment) : null;
-                                const newType = !!previous && previous.type !== segment.type;
-                                const firstFlight = segment.type === 'air' && day.segments.findIndex((item) => item.type === 'air') === index;
-                                return (jsxs("div", { className: cx(sx(daySectionStyle), layover !== null && sx(layoverSectionStyle), newType && sx(typeChangeSectionStyle)), "data-type-change": newType || undefined, children: [layover !== null && segment.type === 'air' && (jsx("div", { className: sx(layoverStyle), "data-test": "itinerary-layover", children: jsxs("span", { className: sx(layoverLabelStyle), children: [jsx(ClockIcon, {}), jsxs("span", { children: [jsx("strong", { children: formatLayover(layover) }), " layover in ", segment.departureAirport] })] }) })), jsx(ItinerarySegmentCard, { segment: segment, headingLevel: 3, variant: "section", onCheckIn: onCheckIn, showCheckIn: firstFlight, renderVendorMark: renderVendorMark })] }, segment.id));
+                                // Check In goes in the header of the first flight, in the day's order, that can draw it — a
+                                // checkInUrl, or checkInAvailable with an onCheckIn handler — for each departure date: one
+                                // check-in covers that date's connections, as Hub's API gives one link per departure date. A
+                                // flight that offers check-in but can't draw it (no URL, no handler) never claims the date, so
+                                // a later flight's working link isn't stripped. A day card holds more than one date only when a
+                                // travelDay lists an after-midnight connection under the day before.
+                                const offersCheckIn = (item) => item.type === 'air' && (!!item.checkInUrl?.trim() || (!!item.checkInAvailable && !!onCheckIn));
+                                const checkInFlight = segment.type === 'air'
+                                    ? day.segments.find((item) => offersCheckIn(item) && item.type === 'air' && item.departureDate === segment.departureDate)
+                                    : undefined;
+                                const showCheckIn = segment.id === checkInFlight?.id;
+                                // That date's later flights drop their own offer, so the card draws no second one in its body.
+                                const card = segment.type === 'air' && offersCheckIn(segment) && !showCheckIn ? { ...segment, checkInAvailable: false, checkInUrl: undefined } : segment;
+                                return (jsxs("div", { className: cx(sx(daySectionStyle), layover !== null && sx(layoverSectionStyle)), children: [layover !== null && segment.type === 'air' && jsx(LayoverRow, { minutes: layover, airport: segment.departureAirport }), jsx(ItinerarySegmentCard, { segment: card, headingLevel: 3, variant: "section", 
+                                            // A flight's Seats / Class / Loyalty Number / CO₂ read as small labels over values.
+                                            detailsLayout: segment.type === 'air' ? 'stacked' : 'inline', onCheckIn: onCheckIn, showCheckIn: showCheckIn, renderVendorMark: renderVendorMark, footer: renderSegmentFooter?.(segment), formatMoney: formatMoney })] }, segment.id));
                             }) })] }, day.date || 'undated'))) })] }));
 };
 ItineraryTimeline.displayName = 'ItineraryTimeline';
@@ -37712,12 +38048,14 @@ const VIEW_OPTIONS = [
     { value: 'all', label: 'All' },
     { value: 'itinerary', label: 'Itinerary Only' },
 ];
+const costKind = (segment) => (segment.type === 'rail' && segment.mode === 'bus' ? 'bus' : segment.type);
 const COST_ROWS = [
-    { type: 'air', label: 'Air' },
-    { type: 'car', label: 'Car rental' },
-    { type: 'hotel', label: 'Hotel' },
-    { type: 'limo', label: 'Black Car' },
-    { type: 'rail', label: 'Rail' },
+    { kind: 'air', label: 'Air' },
+    { kind: 'car', label: 'Car rental' },
+    { kind: 'hotel', label: 'Hotel' },
+    { kind: 'limo', label: 'Black Car' },
+    { kind: 'bus', label: 'Motor Coach' },
+    { kind: 'rail', label: 'Rail' },
 ];
 /**
  * The lead traveler's surname plus how many others are on the record locator,
@@ -37734,13 +38072,13 @@ const itineraryPageName = (travelers) => {
  * A traveler's bookings in day order, including Black Car and rail.
  * Trip data and print, email, calendar and invoice actions arrive as props.
  */
-const ItineraryPage = ({ tripName, recordLocator, travelers, startDate, endDate, segments, status = 'confirmed', sportCode, totalCost, currency = 'USD', agent, invoice, bookingDetails = [], loading = false, error, notice, defaultView = 'all', onViewChange, alertBanners = [], travelNotes, closingBanners = [], closingNotes, onRetry, sectionName = 'Individual Travel', pageName, onBack, backLabel = 'Back to individual travel', onPrint, onEmail, onAddToCalendar, onDownloadInvoice, onCheckIn, renderVendorMark, className = '', }) => {
+const ItineraryPage = ({ tripName, recordLocator, travelers, startDate, endDate, segments, status = 'confirmed', sportCode, totalCost, currency = 'USD', agent, invoice, bookingDetails = [], loading = false, error, notice, defaultView = 'all', onViewChange, alertBanners = [], travelNotes, closingBanners = [], closingNotes, onRetry, sectionName = 'Individual Travel', pageName, onBack, backLabel = 'Back to individual travel', onPrint, onEmail, onAddToCalendar, onDownloadInvoice, onCheckIn, renderVendorMark, renderSegmentFooter, formatMoney = formatItineraryMoney, preserveOrder = false, className = '', }) => {
     const badge = STATUS_BADGE[status];
     const travelerLabel = travelers.length === 1 ? travelers[0] : `${travelers.length} travelers`;
     const showStatus = Boolean(tripName) && !loading && !error;
     const costByType = COST_ROWS.map((row) => ({
         ...row,
-        amount: segments.filter((segment) => segment.type === row.type).reduce((sum, segment) => sum + (segment.cost ?? 0), 0),
+        amount: segments.filter((segment) => costKind(segment) === row.kind).reduce((sum, segment) => sum + (segment.cost ?? 0), 0),
     })).filter((row) => row.amount > 0);
     const showCosts = totalCost !== undefined && !loading && !error;
     const showActions = !loading && !error && Boolean(onPrint || onEmail || onAddToCalendar || onDownloadInvoice);
@@ -37761,13 +38099,13 @@ const ItineraryPage = ({ tripName, recordLocator, travelers, startDate, endDate,
     const itineraryOnly = view === 'itinerary';
     const showInvoice = Boolean(invoice) && !loading && !error;
     // The trip cost is the Booking Details card's second section, under a thin rule.
-    const bookingCard = (jsx(BookingDetailsCard, { details: bookingDetails, refId: recordLocator, children: showCosts && (jsx("section", { "aria-label": "Trip cost", children: jsxs("dl", { className: sx(costsStyle), children: [costByType.map((row) => (jsxs("div", { className: sx(costStyle), children: [jsx("dt", { className: costLabelClass, children: row.label }), jsx("dd", { className: costValueClass, children: formatItineraryMoney(row.amount, currency) })] }, row.type))), jsxs("div", { className: cx(sx(costStyle), sx(costTotalStyle)), children: [jsx("dt", { className: cx(costLabelClass, costTotalTextClass), children: "Total" }), jsx("dd", { className: cx(costValueClass, costTotalTextClass), children: formatItineraryMoney(totalCost, currency) })] })] }) })) }));
+    const bookingCard = (jsx(BookingDetailsCard, { details: bookingDetails, refId: recordLocator, children: showCosts && (jsx("section", { "aria-label": "Trip cost", children: jsxs("dl", { className: sx(costsStyle), children: [costByType.map((row) => (jsxs("div", { className: sx(costStyle), children: [jsx("dt", { className: costLabelClass, children: row.label }), jsx("dd", { className: costValueClass, children: formatMoney(row.amount, currency) })] }, row.kind))), jsxs("div", { className: cx(sx(costStyle), sx(costTotalStyle)), children: [jsx("dt", { className: cx(costLabelClass, costTotalTextClass), children: "Total" }), jsx("dd", { className: cx(costValueClass, costTotalTextClass), children: formatMoney(totalCost, currency) })] })] }) })) }));
     const notices = (alertBanners.length > 0 || travelNotes) && (jsxs("div", { className: sx(noticesStyle), children: [alertBanners.length > 0 && jsx(PageBanners, { className: sx(bannersStyle), systemBanners: [], alertBanners: alertBanners }), travelNotes && jsx("div", { className: sx(travelNotesStyle), "data-test": "itinerary-travel-notes", children: travelNotes })] }));
     // A full-width row at the top of the cards: who to call and how to reach them.
     const agentCard = agent && (jsxs("section", { className: sx(agentCardStyle), "aria-label": "Your travel team", children: [jsx("div", { className: sx(agentHeaderStyle), children: jsx("h2", { className: sx(agentTitleStyle), children: "Your Travel Team" }) }), jsxs("div", { className: sx(agentRowStyle), children: [jsxs("div", { className: sx(agentInfoStyle), children: [jsx("p", { className: sx(agentNameStyle), children: agent.name }), agent.role && jsx("p", { className: sx(agentRoleStyle), children: agent.role })] }), jsxs("ul", { className: sx(agentLinksStyle), children: [agent.email && (jsx(AgentContact, { icon: jsx(MailIcon, { size: 16 }), label: "Email", children: jsx("a", { className: sx(agentLinkStyle), href: `mailto:${agent.email}`, children: agent.email }) })), agent.businessHours && (jsx(AgentContact, { icon: jsx(CalendarIcon$1, { size: 16 }), label: "Business Hours", children: agent.businessHours })), agent.tollFreeNumber && (jsx(AgentContact, { icon: jsx(PhoneIcon, { size: 16 }), label: "Toll Free Number", children: jsx("a", { className: sx(agentLinkStyle), href: telHref(agent.tollFreeNumber), children: agent.tollFreeNumber }) })), agent.afterHoursPhone && (jsxs(AgentContact, { icon: jsx(HeadsetIcon, { size: 16 }), label: "After-Hours/Emergency Service", children: [jsx("a", { className: sx(agentLinkStyle), href: telHref(agent.afterHoursPhone), children: agent.afterHoursPhone }), agent.afterHoursNote && jsxs(Fragment, { children: [" ", agent.afterHoursNote] })] }))] })] })] }));
     const titleRow = (jsxs("div", { className: sx(titleRowStyle), children: [jsx("h2", { className: sx(sectionTitleStyle$3), children: "Air Invoice Details" }), showStatus && jsx(StatusBadge, { status: badge.variant, label: badge.label })] }));
     const actions = showActions && (jsxs("div", { className: sx(actionsStyle$1), "aria-label": "Itinerary actions", children: [onPrint && jsx(Button, { type: "button", variant: "secondary", size: "sm", leftIcon: jsx(PrinterIcon, { size: 16 }), "data-test": "itinerary-print", onClick: onPrint, children: "Print" }), onEmail && jsx(Button, { type: "button", variant: "secondary", size: "sm", leftIcon: jsx(MailIcon, { size: 16 }), "data-test": "itinerary-email", onClick: onEmail, children: "Email" }), onAddToCalendar && jsx(Button, { type: "button", variant: "secondary", size: "sm", leftIcon: jsx(CalendarIcon$1, { size: 16 }), "data-test": "itinerary-add-to-calendar", onClick: onAddToCalendar, children: "Add to calendar" }), onDownloadInvoice && jsx(Button, { type: "button", variant: "secondary", size: "sm", leftIcon: jsx(DocumentIcon, { size: 16 }), "data-test": "itinerary-download-invoice", onClick: onDownloadInvoice, children: "Invoice PDF" })] }));
-    return (jsxs("div", { className: cx(sx(pageStyle$d), className), "data-test": "itinerary-page", children: [jsx(PageHeaderSubsection, { sectionName: sectionName, pageName: pageName ?? (travelers.length > 0 ? `Itinerary for ${itineraryPageName(travelers)}` : 'Itinerary'), meta: startDate && endDate ? jsx(TravelDateRange, { startDate: startDate, endDate: endDate }) : undefined, onBack: onBack, backLabel: backLabel }), !showInvoice && notices, !showInvoice && agentCard, showInvoice ? (jsxs("section", { className: sx(invoiceSectionStyle), "aria-label": "Booking and invoice", children: [jsxs("div", { className: sx(invoiceActionsStyle), children: [jsx(Segment, { size: "sm", options: VIEW_OPTIONS, value: view, onChange: changeView, "aria-label": "Itinerary view" }), actions] }), !itineraryOnly && notices, !itineraryOnly && agentCard, !itineraryOnly && bookingCard, !itineraryOnly && invoice && jsx(AirInvoiceCard, { ...invoice, title: "Air Invoice Details" })] })) : (jsxs("header", { className: sx(headerStyle$b), children: [jsxs("div", { className: sx(headerMainStyle$1), children: [titleRow, jsxs("dl", { className: sx(factsStyle$1), children: [recordLocator && (jsxs("div", { className: sx(factStyle), children: [jsx("dt", { className: sx(factLabelStyle), children: "Confirmation" }), jsx("dd", { className: cx(sx(factValueStyle), sx(monoStyle$1)), children: recordLocator })] })), startDate && endDate && (jsxs("div", { className: sx(factStyle), children: [jsx("dt", { className: sx(factLabelStyle), children: "Travel dates" }), jsx("dd", { className: sx(factValueStyle), children: formatItineraryDateRange(startDate, endDate) })] })), travelers.length > 0 && (jsxs("div", { className: sx(factStyle), children: [jsx("dt", { className: sx(factLabelStyle), children: travelers.length === 1 ? 'Traveler' : 'Travelers' }), jsx("dd", { className: sx(factValueStyle), title: travelers.join(', '), children: travelerLabel })] })), sportCode && (jsxs("div", { className: sx(factStyle), children: [jsx("dt", { className: sx(factLabelStyle), children: "Program" }), jsx("dd", { className: sx(factValueStyle), children: sportCode })] }))] })] }), actions] })), !showInvoice && bookingCard, !itineraryOnly && travelers.length > 1 && (jsxs("section", { className: sx(travelersStyle), "aria-label": "Travelers on this itinerary", children: [jsx("h2", { className: sx(sectionTitleStyle$3), children: "Travelers" }), jsx("ul", { className: sx(travelerListStyle), children: travelers.map((traveler) => jsx("li", { className: sx(travelerChipStyle), children: traveler }, traveler)) })] })), !itineraryOnly && !loading && !error && notice && (jsx("div", { "data-test": "itinerary-notice", children: jsx(Alert, { variant: "warning", title: "Additional booking details", children: notice }) })), jsxs("div", { className: sx(bodyStyle$1), children: [jsx("div", { className: sx(mainStyle$1), children: jsxs("div", { "data-test": loading ? 'itinerary-loading' : error ? 'itinerary-error' : undefined, children: [jsx(ItineraryTimeline, { segments: segments, loading: loading, error: error, onCheckIn: onCheckIn, renderVendorMark: renderVendorMark, showTypeTabs: true }), error && onRetry && (jsx("div", { className: sx(retryRowStyle), children: jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: onRetry, "data-test": "itinerary-retry", children: "Try again" }) }))] }) }), !loading && !error && (closingBanners.length > 0 || closingNotes) && (jsxs("div", { className: sx(noticesStyle), "data-test": "itinerary-closing", children: [closingBanners.length > 0 && jsx(PageBanners, { className: sx(bannersStyle), systemBanners: closingBanners, alertBanners: [] }), closingNotes && jsx("div", { className: sx(closingNotesStyle), children: closingNotes })] }))] })] }));
+    return (jsxs("div", { className: cx(sx(pageStyle$d), className), "data-test": "itinerary-page", children: [jsx(PageHeaderSubsection, { sectionName: sectionName, pageName: pageName ?? (travelers.length > 0 ? `Itinerary for ${itineraryPageName(travelers)}` : 'Itinerary'), meta: startDate && endDate ? jsx(TravelDateRange, { startDate: startDate, endDate: endDate, showDays: true }) : undefined, onBack: onBack, backLabel: backLabel }), !showInvoice && notices, !showInvoice && agentCard, showInvoice ? (jsxs("section", { className: sx(invoiceSectionStyle), "aria-label": "Booking and invoice", children: [jsxs("div", { className: sx(invoiceActionsStyle), children: [jsx(Segment, { size: "sm", options: VIEW_OPTIONS, value: view, onChange: changeView, "aria-label": "Itinerary view" }), actions] }), !itineraryOnly && notices, !itineraryOnly && agentCard, !itineraryOnly && bookingCard, !itineraryOnly && invoice && jsx(AirInvoiceCard, { ...invoice, title: "Air Invoice Details" })] })) : (jsxs("header", { className: sx(headerStyle$b), children: [jsxs("div", { className: sx(headerMainStyle$1), children: [titleRow, jsxs("dl", { className: sx(factsStyle$1), children: [recordLocator && (jsxs("div", { className: sx(factStyle), children: [jsx("dt", { className: sx(factLabelStyle), children: "Confirmation" }), jsx("dd", { className: cx(sx(factValueStyle), sx(monoStyle$1)), children: recordLocator })] })), startDate && endDate && (jsxs("div", { className: sx(factStyle), children: [jsx("dt", { className: sx(factLabelStyle), children: "Travel dates" }), jsx("dd", { className: sx(factValueStyle), children: formatItineraryDateRange(startDate, endDate) })] })), travelers.length > 0 && (jsxs("div", { className: sx(factStyle), children: [jsx("dt", { className: sx(factLabelStyle), children: travelers.length === 1 ? 'Traveler' : 'Travelers' }), jsx("dd", { className: sx(factValueStyle), title: travelers.join(', '), children: travelerLabel })] })), sportCode && (jsxs("div", { className: sx(factStyle), children: [jsx("dt", { className: sx(factLabelStyle), children: "Program" }), jsx("dd", { className: sx(factValueStyle), children: sportCode })] }))] })] }), actions] })), !showInvoice && bookingCard, !itineraryOnly && travelers.length > 1 && (jsxs("section", { className: sx(travelersStyle), "aria-label": "Travelers on this itinerary", children: [jsx("h2", { className: sx(sectionTitleStyle$3), children: "Travelers" }), jsx("ul", { className: sx(travelerListStyle), children: travelers.map((traveler) => jsx("li", { className: sx(travelerChipStyle), children: traveler }, traveler)) })] })), !itineraryOnly && !loading && !error && notice && (jsx("div", { "data-test": "itinerary-notice", children: jsx(Alert, { variant: "warning", title: "Additional booking details", children: notice }) })), jsxs("div", { className: sx(bodyStyle$1), children: [jsx("div", { className: sx(mainStyle$1), children: jsxs("div", { "data-test": loading ? 'itinerary-loading' : error ? 'itinerary-error' : undefined, children: [jsx(ItineraryTimeline, { segments: segments, loading: loading, error: error, onCheckIn: onCheckIn, renderVendorMark: renderVendorMark, renderSegmentFooter: renderSegmentFooter, formatMoney: formatMoney, preserveOrder: preserveOrder, showTypeTabs: true }), error && onRetry && (jsx("div", { className: sx(retryRowStyle), children: jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: onRetry, "data-test": "itinerary-retry", children: "Try again" }) }))] }) }), !loading && !error && (closingBanners.length > 0 || closingNotes) && (jsxs("div", { className: sx(noticesStyle), "data-test": "itinerary-closing", children: [closingBanners.length > 0 && jsx(PageBanners, { className: sx(bannersStyle), systemBanners: closingBanners, alertBanners: [] }), closingNotes && jsx("div", { className: sx(closingNotesStyle), children: closingNotes })] }))] })] }));
 };
 ItineraryPage.displayName = 'ItineraryPage';