@autobusal/routes-order 1.37.6 → 1.37.8

package/Availability/Schema.tsx

@@ -36,9 +36,27 @@ interface Props {
  * is a single parse for a consumer and a single tag in the snapshot;
  * scattering them would multiply the boilerplate by the number of coaches.
  */
+const TRIPS = 100;
+
 const Schema = ({ data, t }: Props): (JSX.Element | null) => {
   const stop = (name: string) => ({ '@type': 'BusStop', name });
 
+  /**
+   * HOW MANY DEPARTURES GET MARKUP, which is not the same as how many the
+   * page shows.
+   *
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * MEASURED on a busy pair (Tirana-Thessaloniki, ten coaches a day): thirty
+   * days produced 300 BusTrip nodes and 194 KB of JSON-LD - 41% of a 482 KB
+   * page, for a hundred near-identical descriptions of the same two-hour
+   * journey at different clock times. The table underneath still lists every
+   * one of the thirty days in plain text, so nothing is hidden from a reader
+   * or from a crawler; what is capped is the repetition in the markup.
+   *
+   * A hundred is roughly a fortnight on the busiest pair here and the whole
+   * month on most of them, which is the horizon anybody books within.
+   */
   const trips = data.days.flatMap(day => day.departures.map(row => ({
     '@type': 'BusTrip',
     name: t('routes_order.facts.title', { from: data.from, to: data.to }),
@@ -103,7 +121,7 @@ const Schema = ({ data, t }: Props): (JSX.Element | null) => {
     return null;
   }
 
-  return <JsonLd data={ { '@context': 'https://schema.org', '@graph': trips } } />;
+  return <JsonLd data={ { '@context': 'https://schema.org', '@graph': trips.slice(0, TRIPS) } } />;
 };
 
 export default Schema;

package/Facts/Facts.tsx

@@ -1,5 +1,5 @@
 import { TFunction } from 'i18next';
-import { Container, Grid, Fact, Label, Value, Note, Notice, Operators, Prose } from './styles';
+import { Container, Heading, Grid, Fact, Label, Value, Note, Notice, Operators, Prose } from './styles';
 import { FactsData } from './types';
 import { DAYS, duration } from './questions';
 import { stopped, detail } from './service';
@@ -11,6 +11,12 @@ interface Props {
   // same response, and two components each running the same query would have
   // meant the prerender crawl paying for every pair twice.
   facts: FactsData
+  /**
+   * Claude - 2026-09-16 (audit): h1 on the pair page, where this title is
+   * the page's subject; h2 on the results steps, whose own step heading is
+   * the h1. The caller knows which page it is; this block does not.
+   */
+  heading?: 'h1' | 'h2'
   t: TFunction<'common'>
 }
 
@@ -45,7 +51,7 @@ interface Props {
  * is printed in the weaker wording. A pair with one weekly coach ends up
  * with a short honest block, not a padded one.
  */
-const Facts = ({ id, facts, t }: Props): JSX.Element => {
+const Facts = ({ id, facts, heading = 'h2', t }: Props): JSX.Element => {
   /**
    * Edited: Claude - Date: 2026-08-20
    *
@@ -109,7 +115,7 @@ const Facts = ({ id, facts, t }: Props): JSX.Element => {
 
   return (
     <Container id={ id } className="box">
-      <h2>{ t('routes_order.facts.title', { from: facts.from, to: facts.to }) }</h2>
+      <Heading as={ heading }>{ t('routes_order.facts.title', { from: facts.from, to: facts.to }) }</Heading>
 
       { dead && (
         <Notice>

package/Facts/styles.ts

@@ -4,6 +4,18 @@ export const Container = styled.section`
   margin-top: 25px;
 `;
 
+/**
+ * The section's title, at whichever level the page hands it.
+ *
+ * Claude - 2026-09-16 (audit): on the pair page this IS the page's subject
+ * and renders as its one h1; on the results steps it drops to h2 under the
+ * step heading. The size is pinned to the h2 scale either way, so promoting
+ * the level is an outline decision and does not resize the block.
+ */
+export const Heading = styled.h2`
+  font-size: ${ props => props.theme.size.xl };
+`;
+
 export const Grid = styled.dl`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

package/Found/Dates/Dates.tsx

@@ -3,7 +3,10 @@ import { TFunction } from 'i18next';
 import { AiOutlineCaretLeft, AiOutlineCaretRight } from 'react-icons/ai';
 import { Button } from '@autobusal/common';
 import { useMediaQuery } from '@autobusal/hooks';
-import { createDate, getDayParts } from '@autobusal/utilities';
+import { createDate, prepareDate, getDayParts } from '@autobusal/utilities';
+import { useGetSettings } from '@autobusal/providers/services';
+import { useGetSuggestions } from '@autobusal/routes-search/services';
+import { todayIn } from '../../Step1/prepare';
 import Loading from './Loading';
 import { Container, Inner, ButtonDay, DayPrice, Cheapest, Weekday, DayNumber, Month } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
@@ -40,6 +43,29 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
 
   const { data, isLoading } = useGetDates(step1, type, number);
 
+  /**
+   * The first day that can still be boarded, as the departure city reckons it.
+   *
+   * Claude - 2026-09-16 (audit): the cut-off used to be `new Date() <= day`
+   * - the device's current INSTANT against the day's UTC midnight - which
+   * declared today unavailable from 00:00 UTC onwards, i.e. from 02:00 in
+   * Tirana. obtapi already starts the window on today (Search\Dates::find)
+   * and says per day whether anything runs, so the only job left here is
+   * not to offer a day that has passed where the coach leaves from: the
+   * origin's calendar day, then the server's, then the device's. The same
+   * clock the form now opens on. On the return step the strip is the
+   * reverse pair, so its origin is the destination that was searched.
+   */
+  const { data: cities } = useGetSuggestions();
+
+  const { data: settings } = useGetSettings();
+
+  const origin = type === '_return' ? step1.to : step1.from;
+
+  const zone = cities.find(city => city.slug === origin)?.country?.timezone;
+
+  const floor = createDate(todayIn(zone) ?? settings.today ?? prepareDate(new Date()));
+
   if (isLoading) {
     return <Loading t={ t } />;
   }
@@ -60,8 +86,6 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
     setNumber(number + 1);
   };
 
-  const today = new Date();
-
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-01
    *
@@ -116,8 +140,8 @@ const Dates = ({ type, step1, t, onSearch }: Props): JSX.Element => {
   const items = shown.map(item => {
     const date = createDate(item.day);
 
-    // if date in the future, and we have routes available
-    const isAvailable = today.getTime() <= date.getTime() && item.routes;
+    // today or later where the coach leaves from, and something runs that day
+    const isAvailable = date.getTime() >= floor.getTime() && item.routes;
 
     const isCheapest = varies && lowest !== null && item.from_price === lowest;
 

package/Found/Dates/styles.ts

@@ -44,12 +44,18 @@ export const Inner = styled.div`
    * they took 70px of a 355px row between them - a fifth of the week's worth
    * of space spent on two chevrons, which left each day 34px and forced the
    * prices to wrap three times.
+   *
+   * Claude - 2026-09-16 (audit): squeezed to 30px tall they were 26px wide,
+   * and a thumb misses that. 44px square each: the phone strip shows THREE
+   * days now rather than seven, so 88px of arrows still leaves each day
+   * about 89px of a 375px screen.
    */
   & > button:first-child,
   & > button:last-child {
     flex: 0 0 auto;
-    padding: 0 6px;
-    height: 30px;
+    padding: 0;
+    width: 44px;
+    height: 44px;
   }
 
   @media (min-width: 640px) {
@@ -134,7 +140,8 @@ export const ButtonDay = styled.button<{ $available: boolean, $selected: boolean
   justify-content: center;
   gap: 2px;
   padding: 4px 0;
-  min-height: 26px;
+  // Claude - 2026-09-16 (audit): the 44px tap minimum - the chips measured 37px
+  min-height: 44px;
   font-weight: 700;
   text-align: center;
   font-size: ${ props => props.theme.size.xs };
@@ -178,11 +185,11 @@ export const DayPrice = styled.span<{ $cheapest: boolean }>`
   white-space: normal;
   overflow-wrap: anywhere;
   line-height: 1.15;
-  font-size: calc(${ props => props.theme.size.xs } - 1px);
+  // Claude - 2026-09-16 (audit): xs at every width - 11px is under the floor
+  font-size: ${ props => props.theme.size.xs };
 
   @media (min-width: 640px) {
     white-space: nowrap;
-    font-size: ${ props => props.theme.size.xs };
   }
   font-weight: ${ props => props.$cheapest ? 700 : 400 };
   opacity: .85;
@@ -196,13 +203,19 @@ export const DayPrice = styled.span<{ $cheapest: boolean }>`
  * unreadable at 10px. On the selected day it inherits the button's own
  * contrast colour and leans on weight instead of hue.
  */
+/*
+ * Claude - 2026-09-16 (audit): the strip is no longer dark - it sits on
+ * background.neutral - and the green that read well on it measures 2.42:1
+ * there (#79AB51 on #F2F2F2). The word is the cue now, in the ordinary ink
+ * (14.4:1 light, 11:1 dark), and at xs rather than a 10px xxs.
+ */
 export const Cheapest = styled.span<{ $selected: boolean }>`
   display: block;
-  font-size: ${ props => props.theme.size.xxs };
+  font-size: ${ props => props.theme.size.xs };
   text-transform: uppercase;
   letter-spacing: .5px;
   font-weight: 700;
-  color: ${ props => props.$selected ? 'inherit' : props.theme.font.success };
+  color: ${ props => props.$selected ? 'inherit' : props.theme.font.normal };
 `;
 
 export const ContainerLoading = styled.div`

package/Found/Orders/Orders.tsx

@@ -1,10 +1,9 @@
 import { TFunction } from 'i18next';
 import { Inline } from '@autobusal/common';
 import Route from '../Route/Route';
-import Group from '../Group/Group';
 import Empty from '../Empty/Empty';
 import { getFavorites, getNormal } from './utilities';
-import { sortItems, groupItems, SortKey } from '../refine';
+import { sortItems, SortKey } from '../refine';
 import { Container, ContainerNotFound, Reset } from './styles';
 import { FoundData } from '@autobusal/providers/types/routes';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
@@ -67,9 +66,22 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
    * Preferred-stop pinning stays the OUTER partition and each side is
    * sorted within itself. Sorting the whole list first would have let
    * "cheapest" quietly un-pin a stop the user deliberately saved.
+   */
+  /*
+   * Claude - 2026-09-16 (Ferjolt: "When we have more than one departure for
+   * the same route from the same operator, should not group them as we do
+   * now but should show them as a standalone search result in full. Is very
+   * easy to get confused visitors with grouped alternatives. So, remove the
+   * grouping and put them all as standalone.")
    *
-   * Grouping runs AFTER sorting: groupItems keeps input order, so a
-   * collapsed set of shuttles lands wherever its best member sorted to.
+   * EVERY DEPARTURE IS ITS OWN CARD. Interchangeable departures used to
+   * collapse into one card with a row of times under it, and the card showed
+   * only the earliest - so somebody scanning for "the 14:00" saw a 06:00 and
+   * moved on, and somebody who did find the picker booked whichever time
+   * happened to be highlighted. The grouped card also defeated the sort it
+   * sat in: ordered "latest first", a group still led with its EARLIEST
+   * time. A run of similar rows is the honest shape of an hourly service,
+   * and the sort and filters above are there to cut it down.
    */
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-05
@@ -82,30 +94,16 @@ const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferr
   const date = step1[type];
 
   const render = (list: FoundData[], kind: 'favorite' | 'normal'): JSX.Element[] => (
-    groupItems(sortItems(list, sort)).map(group => (
-      group.length > 1
-        ? (
-          <Group
-            key={ group[0].id }
-            items={ group }
-            type={ kind }
-            date={ date }
-            passengers={ passengers }
-            t={ t }
-            onSave={ onSave }
-          />
-        )
-        : (
-          <Route
-            key={ group[0].id }
-            type={ kind }
-            data={ group[0] }
-            date={ date }
-            passengers={ passengers }
-            t={ t }
-            onSave={ onSave }
-          />
-        )
+    sortItems(list, sort).map(item => (
+      <Route
+        key={ item.id }
+        type={ kind }
+        data={ item }
+        date={ date }
+        passengers={ passengers }
+        t={ t }
+        onSave={ onSave }
+      />
     ))
   );
 

package/Found/Route/Route.tsx

@@ -37,13 +37,9 @@ interface Props {
   passengers: number
   t: TFunction<'common'>
   onSave: (data: FoundData) => void
-  // Edited: Ferjolt Ozuni - Date: 2026-08-01
-  // Slot under the trip row, used by Group to hang a departure-time picker
-  // on a card that stands for several interchangeable departures.
-  children?: React.ReactNode
 }
 
-const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JSX.Element => {
+const Route = ({ data, type, date, passengers, t, onSave }: Props): JSX.Element => {
   const [ information, setInformation ] = useState<boolean>(false);
 
   // Edited: Ferjolt Ozuni - Date: 2026-08-03
@@ -345,12 +341,10 @@ const Route = ({ data, type, date, passengers, t, onSave, children }: Props): JS
         </Price>
       </Trip>
 
-      { children }
-
       { /* Claude - 2026-09-01: the wide-screen copy, back where it sat before
-           the phone rebuild - bottom-left of the card, below the itinerary
-           and whatever `children` adds, rather than inside the fare column.
-           Exactly one of the two is ever displayed; see ButtonDetails. */ }
+           the phone rebuild - bottom-left of the card, below the itinerary,
+           rather than inside the fare column. Exactly one of the two is ever
+           displayed; see ButtonDetails. */ }
       <ButtonDetails
         $only="wide"
         type="button"

package/Found/Route/styles.ts

@@ -344,9 +344,14 @@ export const Iso = styled.span`
    * every millimetre it gives back goes to the city name, which is what
    * people actually read.
    */
+  /*
+   * Claude - 2026-09-16 (audit): xs and no smaller. "Even smaller" came out
+   * at 10px, under the 12px floor for text on a phone; the tighter margin
+   * gives back what those two points asked for.
+   */
   @media (max-width: 639px) {
     margin: 0 3px;
-    font-size: calc(${ props => props.theme.size.xs } - 2px);
+    font-size: ${ props => props.theme.size.xs };
   }
   font-weight: 700;
   text-transform: uppercase;
@@ -377,16 +382,20 @@ export const Time = styled.div`
    * mid-word. Stripped of its pill background and padding here it costs
    * about half that, and both ends gain 20px.
    */
+  /*
+   * Claude - 2026-09-16 (audit): xs, not xs minus one - 11px is under the
+   * 12px floor, and the pill's padding was the space, not the point size.
+   */
   @media (max-width: 639px) {
     flex-direction: column;
     gap: 0;
-    font-size: calc(${ props => props.theme.size.xs } - 1px);
+    font-size: ${ props => props.theme.size.xs };
     white-space: nowrap;
 
     & > span {
       padding: 0;
       background: none;
-      font-size: calc(${ props => props.theme.size.xs } - 1px);
+      font-size: ${ props => props.theme.size.xs };
     }
 
     & > span > svg {
@@ -521,6 +530,19 @@ export const Price = styled.div`
     flex: 1 1 100%;
   }
 
+  /*
+   * Claude - 2026-09-16 (audit): a 44px "Select" under the thumb - it
+   * measured 154x32. The shared Button has no phone size and common is not
+   * this package's to edit, so the height is set from the cell that holds
+   * it; by exclusion, because the details toggle is a button in the same
+   * cell and sizes itself.
+   */
+  @media (max-width: 767px) {
+    & > button:not(.details-toggle) {
+      height: 44px;
+    }
+  }
+
   @media (min-width: 768px) {
     flex: 0 0 165px;
     flex-direction: column;
@@ -613,7 +635,8 @@ export const PriceNotice = styled.span`
    * Left-aligned under the fare on a phone, where it is a full-width line
    * beneath a price and a button rather than the middle of a centred stack.
    */
-  font-size: ${ props => props.theme.size.xxs };
+  // Claude - 2026-09-16 (audit): xs - the xxs was 10px, under the phone floor
+  font-size: ${ props => props.theme.size.xs };
   line-height: 1.25;
   color: ${ props => props.theme.font.faded };
   text-align: left;
@@ -685,7 +708,8 @@ export const CodeCompany = styled(Link)`
   border-radius: 100px;
   background: ${ props => props.theme.background.neutral };
   color: ${ props => props.theme.font.faded };
-  font-size: ${ props => props.theme.size.xxs };
+  // Claude - 2026-09-16 (audit): xs - the xxs was 10px, under the phone floor
+  font-size: ${ props => props.theme.size.xs };
   font-weight: 700;
   line-height: 1.4;
   letter-spacing: .3px;
@@ -800,6 +824,14 @@ export const ButtonDetails = styled.button<{ $only?: 'narrow' | 'wide' }>`
     font-size: ${ props => props.theme.size.xs };
   }
 
+  /*
+   * Claude - 2026-09-16 (audit): 54x25 on a phone is a target a thumb
+   * misses. The box grows to the 44px minimum; the type does not.
+   */
+  @media (max-width: 767px) {
+    min-height: 44px;
+  }
+
   &:hover {
     color: ${ props => props.theme.font.normal };
   }
@@ -976,11 +1008,21 @@ export const NextDay = styled.sup`
  * leaves the reader working out what day the departure was, which is the
  * question the whole thing exists to answer.
  */
+/*
+ * Claude - 2026-09-16 (audit): a PILL, not yellow type. Set in primary.normal
+ * on the white card this measured 1.78:1 (#EABD23 on #FFFFFF) - the brand
+ * yellow is a fill, not an ink, and 12px text needs 4.5:1. The highlight the
+ * yellow was there for survives as the background, with the theme's own
+ * contrast ink on it: #121212 on #EABD23 is 10.5:1, in both modes.
+ */
 export const Day = styled.span`
+  padding: 1px 6px;
+  border-radius: 4px;
   font-size: ${ props => props.theme.size.xs };
   font-weight: 700;
   white-space: nowrap;
-  color: ${ props => props.theme.primary.normal };
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
 `;
 
 /**
@@ -1002,7 +1044,8 @@ export const Day = styled.span`
  * fact about the bus, not a countdown we invented to hurry anyone.
  */
 export const SeatsLeft = styled.span<{ $low: boolean }>`
-  font-size: ${ props => props.theme.size.xxs };
+  // Claude - 2026-09-16 (audit): xs - the xxs was 10px, under the phone floor
+  font-size: ${ props => props.theme.size.xs };
   line-height: 1.25;
   text-align: left;
   font-weight: ${ props => (props.$low ? 700 : 400) };

package/Found/refine.ts

@@ -531,52 +531,6 @@ export const filterItems = (items: FoundData[], refinement: Refinement): FoundDa
   items.filter(item => matches(item, refinement))
 );
 
-/**
- * Collapse interchangeable departures into one entry.
- *
- * Edited: Ferjolt Ozuni - Date: 2026-08-01
- *
- * Hourly shuttle service is the dominant Albanian intercity pattern, so a
- * busy pair renders a wall of rows that differ only in the departure time -
- * the same operator, the same two stops, the same fare, the same journey
- * length. Those are one product with a choice of time, and reading them as
- * twenty separate options is what makes the page tiring.
- *
- * Duration and price are BOTH in the key on purpose: without them a slower
- * or dearer trip would hide inside a group under a headline it doesn't
- * honour. External offers are keyed by their own id so they never merge
- * with anything - they carry no stop ids, and grouping on missing values
- * would fuse unrelated partner inventory into a single row.
- *
- * Input order is preserved, so a group lands wherever its best member
- * sorted to and the caller does not have to re-sort.
- */
-export const groupItems = (items: FoundData[]): FoundData[][] => {
-  const groups = new Map<string, FoundData[]>();
-  const order: string[] = [];
-
-  items.forEach(item => {
-    const key = item.external
-      ? `ext:${ item.id }`
-      : [
-          item.operator.id,
-          item.locations.from.stop?.id ?? '-',
-          item.locations.to.stop?.id ?? '-',
-          item.price.value,
-          item.duration
-        ].join('|');
-
-    if (!groups.has(key)) {
-      groups.set(key, []);
-      order.push(key);
-    }
-
-    groups.get(key)?.push(item);
-  });
-
-  return order.map(key => groups.get(key) as FoundData[]);
-};
-
 const countBy = (
   items: FoundData[],
   refinement: Refinement,

package/RoutesOrder.tsx

@@ -12,6 +12,7 @@ import RoutesSearch from '@autobusal/routes-search';
 import { useGetSuggestions } from '@autobusal/routes-search/services';
 import { SearchAgain, SearchInner, SearchToggle, SearchSummary, SearchPanel } from './styles';
 import Sections from './Sections/Sections';
+import { useGetFacts } from './Facts/services';
 import Step1 from './Step1/Step1';
 import prepare from './Step1/prepare';
 import Step2 from './Step2';
@@ -48,6 +49,25 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
   const fromCity = cities.find(city => city.slug === params.from);
   const toCity = cities.find(city => city.slug === params.to);
 
+  /**
+   * Which heading is the page's h1.
+   *
+   * Claude - 2026-09-16 (audit): on /bus-lines/{from}/{to} the only h1 was
+   * the search form's "Search Schedules" and the journey itself - the facts
+   * title - was an h2. The facts block is the subject, so it takes the h1
+   * on the step the pair page renders and the form's heading steps down.
+   * Keyed on the facts having ARRIVED rather than on the URL naming a pair:
+   * a pair obtapi does not sell renders no facts block, and demoting the
+   * form there would leave the page with no h1 at all. Same query key as
+   * Sections' own call, so react-query answers both from one request.
+   */
+  const pairFrom = fromCity?.slug ?? params.from;
+  const pairTo = toCity?.slug ?? params.to;
+
+  const { data: pairFacts } = useGetFacts(pairFrom, pairTo);
+
+  const subject = Boolean(pairFacts?.facts);
+
   const title = fromCity && toCity
     ? t('routes_order.title_pair', { from: fromCity.name, to: toCity.name })
     : t('routes_order.title');
@@ -382,6 +402,7 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
         <Step1
           value={ step1 }
           redirected={ redirected }
+          heading={ subject ? 'h2' : 'h1' }
           t={ t }
           onSave={ onStep1 }
         />
@@ -436,8 +457,9 @@ const RoutesOrder = ({ t }: Props): JSX.Element => {
            checkout. */ }
       { (showStep1 || showStep2 || showStep3) && (
         <Sections
-          from={ fromCity?.slug ?? params.from }
-          to={ toCity?.slug ?? params.to }
+          from={ pairFrom }
+          to={ pairTo }
+          heading={ showStep1 ? 'h1' : 'h2' }
           t={ t }
         />
       ) }

package/Sections/Sections.tsx

@@ -16,6 +16,8 @@ import { Nav, Anchor, Anchored } from './styles';
 interface Props {
   from?: string
   to?: string
+  // the facts title's level - h1 on the pair page, h2 under a step heading
+  heading?: 'h1' | 'h2'
   t: TFunction<'common'>
 }
 
@@ -55,7 +57,7 @@ const LINKS = 'links';
  * The nav renders only when there is more than the wizard to navigate to -
  * a bar whose only link is "Trips" is furniture.
  */
-const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
+const Sections = ({ from, to, heading, t }: Props): (JSX.Element | null) => {
   const { data } = useGetFacts(from, to);
 
   const { data: dates } = useGetAvailability(from, to);
@@ -165,7 +167,7 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
       { availability && <AvailabilitySchema data={ availability } t={ t } /> }
 
       <Anchored>
-        <Facts id={ FACTS } facts={ facts } t={ t } />
+        <Facts id={ FACTS } facts={ facts } heading={ heading } t={ t } />
       </Anchored>
 
       { dead && onward }

package/Step1/Step1.tsx

@@ -3,27 +3,55 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { TFunction } from 'i18next';
 import { FaRoute } from 'react-icons/fa';
 import RoutesSearch from '@autobusal/routes-search';
-import prepare from './prepare';
+import prepare, { todayIn } from './prepare';
 import Steps from '../Steps/Steps';
 import { Title } from '../styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { useGetSettings } from '@autobusal/providers/services';
+import { useGetSuggestions } from '@autobusal/routes-search/services';
 
 interface Props {
   value?: RoutesSearchForm
   redirected: boolean
+  /**
+   * The level of the "Search Schedules" heading.
+   *
+   * Claude - 2026-09-16 (audit): on the bare /bus-lines page the form IS
+   * the page and this is its h1. On a pair page the subject is the journey
+   * - the facts block's own title - and an h1 above it left every
+   * /bus-lines/{from}/{to} page named "Search Schedules" to crawlers and
+   * screen readers alike. RoutesOrder decides, because it is the one place
+   * that knows whether the facts block is going to render.
+   */
+  heading?: 'h1' | 'h2'
   t: TFunction<'common'>
   onSave: (data: RoutesSearchForm) => void
 }
 
-const Step1 = ({ value, redirected, t, onSave }: Props): JSX.Element => {
+const Step1 = ({ value, redirected, heading = 'h1', t, onSave }: Props): JSX.Element => {
   const params = useParams();
 
   const [ searchParams ] = useSearchParams();
 
   const { data } = useGetSettings();
 
-  const prepared = prepare(value, params, searchParams, data.preferences.defaultLocations);
+  /**
+   * The day the form opens on: TODAY, where the coach leaves from.
+   *
+   * Claude - 2026-09-16 (audit): it was futureDate(1) - tomorrow on the
+   * buyer's device clock - which predates same-day selling and put 17/09 in
+   * the box while it was still the 16th in Thessaloniki. The same clock the
+   * picker floors on (setDepartureZone in the search form): the origin's
+   * timezone, then the server's own date, then the device as a last resort.
+   * The city list is the search form's cached query, so this costs nothing.
+   */
+  const { data: cities } = useGetSuggestions();
+
+  const origin = params.from ?? data.preferences.defaultLocations.from;
+
+  const zone = cities.find(city => city.slug === origin)?.country?.timezone;
+
+  const prepared = prepare(value, params, searchParams, data.preferences.defaultLocations, todayIn(zone) ?? data.today);
 
   // Two ways this page ends up with a complete search spec:
   // 1. `?type=submit` - set by the in-app search form (home/Main/Main.tsx)
@@ -45,7 +73,7 @@ const Step1 = ({ value, redirected, t, onSave }: Props): JSX.Element => {
 
   return (
     <>
-      <Title>
+      <Title as={ heading }>
         <FaRoute />
         { t('routes_order.step1.title') }
       </Title>

package/Step1/prepare.ts

@@ -2,11 +2,42 @@ import { Params } from 'react-router-dom';
 import { futureDate, isPreparedDate } from '@autobusal/utilities';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 
+/**
+ * Today, DD/MM/YYYY, as the clock in `zone` reckons it.
+ *
+ * Claude - 2026-09-16 (audit): the same en-CA trick the calendar's departure
+ * floor uses (common/Calendar/utilities/settings.ts) - it formats as
+ * YYYY-MM-DD, the one date string that parses unambiguously, and the parts
+ * are reassembled rather than the string parsed so no UTC instant can land
+ * on the day before. Null when there is no zone or the runtime rejects it,
+ * so the caller falls back rather than opening the form on nothing.
+ */
+export const todayIn = (zone?: string | null): string | null => {
+  if (!zone) {
+    return null;
+  }
+
+  try {
+    const [ year, month, day ] = new Intl.DateTimeFormat('en-CA', {
+      timeZone: zone,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
+    }).format(new Date()).split('-');
+
+    return `${ day }/${ month }/${ year }`;
+  } catch {
+    return null;
+  }
+};
+
 const prepare = (
   value: (RoutesSearchForm | undefined),
   params: Readonly<Params<string>>,
   searchParams: URLSearchParams,
-  defaultLocations: { from: string, to: string }
+  defaultLocations: { from: string, to: string },
+  // the day to open on when the URL names none - see Step1 for whose clock
+  today?: string | null
 ): RoutesSearchForm => {
   if (value !== undefined) {
     return value;
@@ -24,7 +55,13 @@ const prepare = (
    */
   const to = params.to ?? '';
 
-  const departure = params.departure?.replace(/-/g, '/') ?? futureDate(1);
+  /*
+   * Claude - 2026-09-16 (audit): TODAY, not tomorrow. `today` is the day as
+   * the departure city reckons it (Step1 works it out); without one the
+   * device clock is the only clock left. futureDate(1) dated from before
+   * same-day sales existed, and nothing documented a reason to keep it.
+   */
+  const departure = params.departure?.replace(/-/g, '/') ?? today ?? futureDate(0);
 
   /*
    * Edited: Claude - Date: 2026-08-29

package/Step4/Passenger/Passenger.tsx

@@ -1,12 +1,12 @@
 import { useId, useState } from 'react';
 import { TFunction } from 'i18next';
 import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
-import { Calendar, Gender, ChooseSeat, Required } from '@autobusal/common';
+import { Calendar, ChooseSeat, Required } from '@autobusal/common';
 import { Validate, Display } from '@autobusal/utilities';
 import Choose from '../Saved/Choose';
 import Remember from '../Saved/Remember';
 import { useGetSavedPassenger } from '../../services';
-import { Container, Title, Notice } from './styles';
+import { Container, Title, Notice, Fieldset, Legend } from './styles';
 import { PersonData, SavedPassenger, SavedPassengerRecord } from '@autobusal/providers/types/persons';
 import { OccupiedData } from '@autobusal/providers/types/buses';
 
@@ -171,9 +171,10 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
     // The form should post exactly what it shows.
     if (has('sex')) {
       // 0 is a perfectly good answer here, so this tests for null rather than
-      // for falsiness. A traveller with no stored sex leaves the control at
-      // its own default and is reported by `missing` instead.
-      onUpdate(names.sex, chosen.sex === null ? 0 : chosen.sex);
+      // for falsiness. A traveller with no stored sex leaves the group EMPTY
+      // - reported by `missing`, and then required below - rather than being
+      // quietly booked as male.
+      onUpdate(names.sex, chosen.sex === null ? '' : chosen.sex);
     }
 
     if (has('passport')) {
@@ -233,6 +234,23 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
   // nobody has been chosen to merge into.
   const full = saved !== undefined && savedMax !== undefined && savedMax > 0 && saved.length >= savedMax && picked === 0;
 
+  /**
+   * The gender to tick when the form mounts, or null for none.
+   *
+   * Claude - 2026-09-16 (audit): common's <Gender> ticked "Male" whenever
+   * nothing was known, so every passenger whose buyer never touched the
+   * control travelled as male in the operator's manifest - our guess dressed
+   * up as an answer. The radios are rendered here instead, start empty and
+   * are required like the fields around them; only a value that was
+   * actually recorded (a saved traveller's, or this form's own before a
+   * step back) pre-selects one.
+   */
+  const stored = values?.[names.sex];
+
+  const sex = record !== undefined
+    ? record.sex
+    : (stored === undefined || stored === '' ? null : Number(stored));
+
   return (
     <Container className="box">
       <Title>
@@ -259,10 +277,19 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
         <div className="row">
           <Required htmlFor={ id(names.firstName) }>{ t('routes_order.step4.first_name') }</Required>
 
+          { /* Claude - 2026-09-16 (audit): autocomplete tokens on every field
+               a browser or password manager can fill, SCOPED per passenger
+               with a section- prefix - without it a two-passenger form is
+               offered the same person twice. aria-required says what the
+               asterisk shows. The date of birth and the seat pickers are
+               shared controls (common) that render their own inputs and are
+               not touched here. */ }
           <input
             type="text"
             key={ `${ names.firstName }-${ applied }` }
             id={ id(names.firstName) }
+            autoComplete={ `section-${ name } given-name` }
+            aria-required="true"
             defaultValue={ start(names.firstName, record?.first_name) }
             { ...refs(names.firstName, Validate('required|min_length:2|max_length:100', t)) }
           />
@@ -277,6 +304,8 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
             type="text"
             key={ `${ names.lastName }-${ applied }` }
             id={ id(names.lastName) }
+            autoComplete={ `section-${ name } family-name` }
+            aria-required="true"
             defaultValue={ start(names.lastName, record?.last_name) }
             { ...refs(names.lastName, Validate('required|min_length:2|max_length:100', t)) }
           />
@@ -306,15 +335,31 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
 
         { has('sex') && (
           <div className="row">
-            { t('routes_order.step4.gender') }
-
-            <Gender
-              key={ `${ names.sex }-${ applied }` }
-              name={ names.sex }
-              defaultValue={ record !== undefined ? (record.sex ?? undefined) : (values !== undefined ? Number(values[names.sex]) : undefined) }
-              t={ t }
-              refs={ refs }
-            />
+            { /* a fieldset, so the two radios share one accessible name - on
+                 their own each announced only "Male" or "Female" with nothing
+                 saying what the question was */ }
+            <Fieldset key={ `${ names.sex }-${ applied }` }>
+              <Legend>
+                <Required>{ t('routes_order.step4.gender') }</Required>
+              </Legend>
+
+              <div className="list">
+                { ([ [ 0, 'male' ], [ 1, 'female' ] ] as const).map(([ value, label ]) => (
+                  <label key={ value }>
+                    <input
+                      type="radio"
+                      value={ value }
+                      defaultChecked={ sex === value }
+                      autoComplete={ `section-${ name } sex` }
+                      aria-required="true"
+                      { ...refs(names.sex, Validate('required', t)) }
+                    />
+
+                    { t(`data.gender.${ label }`, { ns: 'common' }) }
+                  </label>
+                )) }
+              </div>
+            </Fieldset>
 
             { Display(errors[names.sex]) }
           </div>
@@ -331,6 +376,7 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
                 type="text"
                 key={ `${ names.passport }-${ applied }` }
                 id={ id(names.passport) }
+                aria-required="true"
                 defaultValue={ start(names.passport, record?.passport) }
                 { ...refs(names.passport, Validate('required|min_length:2|max_length:50', t)) }
               />
@@ -349,6 +395,8 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
                 type="text"
                 key={ `${ names.phone }-${ applied }` }
                 id={ id(names.phone) }
+                autoComplete={ `section-${ name } tel` }
+                aria-required={ phoneOptional ? undefined : 'true' }
                 defaultValue={ start(names.phone, record?.phone) }
                 { ...refs(names.phone, Validate(phoneOptional ? 'min_length:5|max_length:50' : 'required|min_length:5|max_length:50', t)) }
               />
@@ -376,6 +424,7 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
               type="email"
               key={ `${ names.email }-${ applied }` }
               id={ id(names.email) }
+              autoComplete={ `section-${ name } email` }
               defaultValue={ start(names.email, undefined) }
               { ...refs(names.email, Validate('email|max_length:255', t)) }
             />
@@ -402,6 +451,8 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
                 type="text"
                 key={ `${ names.whatsapp }-${ applied }` }
                 id={ id(names.whatsapp) }
+                autoComplete={ `section-${ name } tel` }
+                aria-required="true"
                 defaultValue={ start(names.whatsapp, record?.whatsapp) }
                 { ...refs(names.whatsapp, Validate('required|min_length:5|max_length:50', t)) }
               />
@@ -418,6 +469,8 @@ const Passenger = ({ type, number, values, fields, askEmail, phoneOptional, with
                 type="text"
                 key={ `${ names.telegram }-${ applied }` }
                 id={ id(names.telegram) }
+                autoComplete={ `section-${ name } nickname` }
+                aria-required="true"
                 defaultValue={ start(names.telegram, record?.telegram) }
                 { ...refs(names.telegram, Validate('required|min_length:2|max_length:100', t)) }
               />

package/Step4/Passenger/styles.ts

@@ -2,6 +2,37 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   margin-bottom: 5px;
+
+  /*
+   * Claude - 2026-09-16 (audit): 44px fields under a thumb. The theme sizes
+   * every text input at 38px, which is fine under a mouse and short of the
+   * 44px minimum on a phone; min-height beats the global height, so nothing
+   * else about the fields changes.
+   */
+  @media (max-width: 639px) {
+    input:not([type='checkbox']):not([type='radio']), select {
+      min-height: 44px;
+    }
+  }
+`;
+
+/**
+ * The gender radios, as a group with one accessible name.
+ *
+ * Claude - 2026-09-16 (audit): the browser's default fieldset chrome is
+ * removed so the group sits in its row like every other field; the legend
+ * carries the required label the way the other rows' labels do.
+ */
+export const Fieldset = styled.fieldset`
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+  border: 0;
+`;
+
+export const Legend = styled.legend`
+  padding: 0;
+  margin-bottom: 6px;
 `;
 
 export const Title = styled.h3`

package/Step5/Billing/Billing.tsx

@@ -93,7 +93,10 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_fn') }>{ t('routes_order.step5.billing.first_name') }</Required>
 
-            <input type="text" id={ id('bill_fn') } { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
+            { /* Claude - 2026-09-16 (audit): `billing` autocomplete tokens, so a
+                 browser or password manager fills the block as the billing
+                 address it is; aria-required says what the asterisk shows. */ }
+            <input type="text" id={ id('bill_fn') } autoComplete="billing given-name" aria-required="true" { ...refs('bill_fn', Validate('required|min_length:2|max_length:100', t)) } />
 
             { Display(errors.bill_fn) }
           </div>
@@ -101,7 +104,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_ln') }>{ t('routes_order.step5.billing.last_name') }</Required>
 
-            <input type="text" id={ id('bill_ln') } { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
+            <input type="text" id={ id('bill_ln') } autoComplete="billing family-name" aria-required="true" { ...refs('bill_ln', Validate('required|min_length:2|max_length:100', t)) } />
 
             { Display(errors.bill_ln) }
           </div>
@@ -113,7 +116,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('email') }>{ t('routes_order.step5.billing.email') }</Required>
 
-            <input type="email" id={ id('email') } { ...refs('email', Validate('required|email|max_length:255', t)) } />
+            <input type="email" id={ id('email') } autoComplete="email" aria-required="true" { ...refs('email', Validate('required|email|max_length:255', t)) } />
 
             { Display(errors.email) }
 
@@ -127,7 +130,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_phone') }>{ t('routes_order.step5.billing.phone') }</Required>
 
-            <input type="text" id={ id('bill_phone') } { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
+            <input type="text" id={ id('bill_phone') } autoComplete="billing tel" aria-required="true" { ...refs('bill_phone', Validate('required|min_length:10|max_length:20', t)) } />
 
             { Display(errors.bill_phone) }
           </div>
@@ -138,7 +141,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
         <div className="row">
           <Required htmlFor={ id('bill_address') }>{ t('routes_order.step5.billing.address') }</Required>
 
-          <textarea id={ id('bill_address') } { ...refs('bill_address', Validate(`required|min_length:${ gaps ? 5 : 2 }`, t)) }></textarea>
+          <textarea id={ id('bill_address') } autoComplete="billing street-address" aria-required="true" { ...refs('bill_address', Validate(`required|min_length:${ gaps ? 5 : 2 }`, t)) }></textarea>
 
           { Display(errors.bill_address) }
         </div>
@@ -149,7 +152,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_city') }>{ t('routes_order.step5.billing.city') }</Required>
 
-            <input type="text" id={ id('bill_city') } { ...refs('bill_city', Validate(`required|min_length:2|max_length:${ gaps ? 40 : 100 }`, t)) } />
+            <input type="text" id={ id('bill_city') } autoComplete="billing address-level2" aria-required="true" { ...refs('bill_city', Validate(`required|min_length:2|max_length:${ gaps ? 40 : 100 }`, t)) } />
 
             { Display(errors.bill_city) }
           </div>
@@ -159,7 +162,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
           <div className="row">
             <Required htmlFor={ id('bill_country') }>{ t('routes_order.step5.billing.country') }</Required>
 
-            <select id={ id('bill_country') } { ...refs('bill_country', Validate('required|min:1', t)) }>
+            <select id={ id('bill_country') } autoComplete="billing country-name" aria-required="true" { ...refs('bill_country', Validate('required|min:1', t)) }>
               <option value={ 0 }>{ t('routes_order.step5.billing.country_choose') }</option>
               { items }
             </select>
@@ -184,7 +187,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
                  rather than the asterisked one, but still associated */ }
             <label htmlFor={ id('bill_company') }>{ t('routes_order.step5.billing.company') }</label>
 
-            <input type="text" id={ id('bill_company') } { ...refs('bill_company') } />
+            <input type="text" id={ id('bill_company') } autoComplete="organization" { ...refs('bill_company') } />
 
             { Display(errors.bill_company) }
           </div>
@@ -210,7 +213,7 @@ const Billing = ({ errors, t, refs, only }: Props): JSX.Element => {
       { asked('terms') && (
         <div className="row row-nomargin">
           <label className="single">
-            <input type="checkbox" value="1" { ...refs('terms', Validate('required', t)) } />&nbsp;
+            <input type="checkbox" value="1" aria-required="true" { ...refs('terms', Validate('required', t)) } />&nbsp;
 
             <span dangerouslySetInnerHTML={{
               __html: t('routes_order.step5.billing.terms', {

package/Step5/Billing/styles.ts

@@ -2,6 +2,14 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   margin-top: 25px;
+
+  // Claude - 2026-09-16 (audit): the passenger block's 44px phone fields,
+  // for the same reason - see Step4/Passenger/styles.ts
+  @media (max-width: 639px) {
+    input:not([type='checkbox']):not([type='radio']), select {
+      min-height: 44px;
+    }
+  }
 `;
 
 export const NoticeEmail = styled.div`

package/Step5/Summary/About/About.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
 import { FaCircleDot, FaLocationDot } from 'react-icons/fa6';
-import { Trip, TripLabel, Container, ContainerIcon, Icon, Information, Title, Operator, Carrier, Logo, Leg, Point, PointIcon, PointCity, Country, PointMeta } from './styles';
+import { Trip, TripLabel, Container, ContainerIcon, Icon, Information, Title, Line, Code, Operator, Carrier, Logo, Leg, Point, PointIcon, PointCity, Country, PointMeta } from './styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { FoundData } from '@autobusal/providers/types/routes';
 
@@ -57,7 +57,20 @@ const About = ({ type, step1, data, number, t }: Props): (JSX.Element | null) =>
         </ContainerIcon>
 
         <Information>
-          <Title>{ data.name } ({ data.code })</Title>
+          { /* Claude - 2026-09-16 (audit): THE LEG THAT WAS BOUGHT, not the
+               coach's own name. "THESSALONIKI - VERIA - SHKODER (II)" is the
+               operator's route - a coach that carries on to Shkodër - and a
+               buyer who searched Thessaloniki to Tirana read it as the wrong
+               ticket. The two cities are the title, and the date and time sit
+               in bold on the origin line below. The code and the operator's
+               route name drop to a line of detail, where they still match
+               the printed ticket without claiming to be the journey. */ }
+          <Title>{ data.locations.from.city.name } → { data.locations.to.city.name }</Title>
+
+          <Line>
+            <Code title={ t('routes_order.step2.route.name') }>{ data.code }</Code>
+            { data.name }
+          </Line>
 
           { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
                Mark and name together, ranged right. The name used to sit

package/Step5/Summary/About/styles.ts

@@ -62,6 +62,28 @@ export const Title = styled.h2`
   text-transform: uppercase;
 `;
 
+/**
+ * The route code and the operator's own name for the route, under the title.
+ *
+ * Claude - 2026-09-16 (audit): detail, set as detail - small and faded, with
+ * only the code in the ordinary ink so it can be read back against a ticket.
+ * `anywhere`, because an operator's route name lists every city it calls at
+ * and the checkout sidebar is a narrow column.
+ */
+export const Line = styled.div`
+  margin-top: 2px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  overflow-wrap: anywhere;
+`;
+
+export const Code = styled.span`
+  margin-right: 6px;
+  font-weight: 700;
+  letter-spacing: .3px;
+  color: ${ props => props.theme.font.normal };
+`;
+
 export const SubTitle = styled.div`
   display: inline-block;
   padding: 4px 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.37.6",
+  "version": "1.37.8",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts",

package/styles.ts

@@ -4,6 +4,12 @@ export const Title = styled.h1`
   display: flex;
   align-items: center;
   gap: 10px;
+  /*
+   * Claude - 2026-09-16: pinned to the h1 scale, because Step1 now renders
+   * this AS an h2 on the pair page (see its heading prop) - the level is a
+   * document-outline decision, not a request for a smaller heading.
+   */
+  font-size: ${ props => props.theme.size.xxl };
 `;
 
 export const SubTitle = styled.h3`

package/Found/Group/Group.tsx

@@ -1,68 +0,0 @@
-import { useMemo, useState } from 'react';
-import { TFunction } from 'i18next';
-import Route from '../Route/Route';
-import { departureOf } from '../refine';
-import { Container, Title, Times, Time } from './styles';
-import { FoundData } from '@autobusal/providers/types/routes';
-
-interface Props {
-  items: FoundData[]
-  type: 'favorite' | 'normal'
-  date?: string
-  passengers: number
-  t: TFunction<'common'>
-  onSave: (data: FoundData) => void
-}
-
-/**
- * One card for a set of interchangeable departures.
- *
- * Edited: Ferjolt Ozuni - Date: 2026-08-01
- *
- * The card shows a real departure - never an abstract summary - and the
- * other times sit under it as a picker. Whatever is selected is what gets
- * booked, so there is no separate "now choose a time" step to forget: the
- * card always represents a bookable trip, starting with the earliest.
- */
-const Group = ({ items, type, date, passengers, t, onSave }: Props): JSX.Element => {
-  // chronological for the picker, regardless of how the list itself is
-  // sorted - a row of times out of time order is just confusing
-  const departures = useMemo(() => (
-    [ ...items ].sort((first, second) => departureOf(first) - departureOf(second))
-  ), [ items ]);
-
-  const [ selected, setSelected ] = useState<number>(0);
-
-  const current = departures[selected] ?? departures[0];
-
-  return (
-    <Route
-      type={ type }
-      data={ current }
-      date={ date }
-      passengers={ passengers }
-      t={ t }
-      onSave={ onSave }
-    >
-      <Container>
-        <Title>{ t('routes_order.step2.route.departures', { total: departures.length }) }</Title>
-
-        <Times>
-          { departures.map((item, index) => (
-            <Time
-              key={ item.id }
-              type="button"
-              $active={ index === selected }
-              aria-pressed={ index === selected }
-              onClick={ () => setSelected(index) }
-            >
-              { item.locations.from.departure }
-            </Time>
-          )) }
-        </Times>
-      </Container>
-    </Route>
-  );
-};
-
-export default Group;

package/Found/Group/styles.ts

@@ -1,44 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px;
-  background: ${ props => props.theme.background.neutral };
-  border-radius: ${ props => props.theme.borderRadius };
-`;
-
-export const Title = styled.h6`
-  margin-bottom: 0;
-  font-size: ${ props => props.theme.size.xs };
-  text-transform: uppercase;
-  color: ${ props => props.theme.font.faded };
-`;
-
-export const Times = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-`;
-
-export const Time = styled.button<{ $active: boolean }>`
-  padding: 5px 12px;
-  font-size: ${ props => props.theme.size.s };
-  font-weight: 700;
-  border-radius: 100px;
-  border: 1px solid ${ props => props.theme.inputs.border };
-  background: ${ props => props.theme.background.normal };
-  color: ${ props => props.theme.font.normal };
-  transition: all 0.2s ease;
-
-  &:hover {
-    border-color: ${ props => props.theme.primary.normal };
-  }
-
-  ${ props => props.$active && css`
-    color: ${ props => props.theme.primary.contrast };
-    background: ${ props => props.theme.primary.normal };
-    border-color: ${ props => props.theme.primary.normal };
-  ` }
-`;