@autobusal/routes-order 1.37.7 → 1.37.9

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/Sort/styles.ts

@@ -94,7 +94,12 @@ export const Option = styled.button<{ $active: boolean }>`
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 5px 2px;
-  font-size: calc(${ props => props.theme.size.xs } - 2px);
+  // Claude - 2026-09-16 (audit): xs, not xs minus 2 - that was 10px, under
+  // the phone floor. (These pills are only ever painted at 640px and up -
+  // see Options in ./Sort.tsx - but the rule cascades to the hidden phone
+  // copy of every one of them regardless, and a text-size audit reads
+  // computed style, not display.)
+  font-size: ${ props => props.theme.size.xs };
   font-weight: 700;
   white-space: nowrap;
 

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

@@ -2,6 +2,7 @@ import { TFunction } from 'i18next';
 import Facts from '../Facts/Facts';
 import Faq from '../Faq/Faq';
 import Availability from '../Availability/Availability';
+import AvailabilitySkeleton from '../Availability/Skeleton';
 import AvailabilitySchema from '../Availability/Schema';
 import Schedule from '../Schedule/Schedule';
 import Links from '../Links/Links';
@@ -16,6 +17,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,10 +58,15 @@ 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);
+  // Edited: Claude - Date: 2026-09-16
+  // `isLoading`, not `isFetching`: this is the ONE state the skeleton below
+  // exists for - the first request, before anything has ever answered. A
+  // background refetch re-uses `dates` from cache while it runs, so it never
+  // sees this true and never swaps a real table back out for a placeholder.
+  const { data: dates, isLoading: datesLoading } = useGetAvailability(from, to);
 
   const facts = data?.facts;
 
@@ -165,7 +173,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 }
@@ -178,11 +186,23 @@ const Sections = ({ from, to, t }: Props): (JSX.Element | null) => {
            at all when the endpoint gives us nothing, which is also what
            happens on a pair that has stopped running: the notice in the
            facts block above has already said so, and thirty rows of "no
-           departures" underneath it would be a wall, not an answer. */ }
-      { availability && (
+           departures" underneath it would be a wall, not an answer.
+
+           Edited: Claude - Date: 2026-09-16
+           WHILE IT LOADS, a skeleton the same shape takes the space instead
+           of nothing - see Availability/Skeleton for why (measured CLS of
+           0.52-1.16 on this exact block). `datesLoading` is the only other
+           branch: a pair that answers with nothing goes straight from the
+           skeleton to rendering nothing at all, which is correct - there
+           was never a table to reserve room for. */ }
+      { availability ? (
         <Anchored>
           <Availability id={ AVAILABILITY } data={ availability } t={ t } />
         </Anchored>
+      ) : datesLoading && (
+        <Anchored>
+          <AvailabilitySkeleton id={ AVAILABILITY } from={ facts.from } to={ facts.to } t={ t } />
+        </Anchored>
       ) }
 
       <Anchored>

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`