diff --git a/client/src/components/Roadtrip/RoadtripSidebar.tsx b/client/src/components/Roadtrip/RoadtripSidebar.tsx
index 41a798387..df5afdddd 100644
--- a/client/src/components/Roadtrip/RoadtripSidebar.tsx
+++ b/client/src/components/Roadtrip/RoadtripSidebar.tsx
@@ -8,7 +8,7 @@ import {
 } from 'lucide-react'
 import MDancingTrek from '../../mobile/components/MDancingTrek'
 import type { RefuelSearch } from './useRefuelSearch'
-import type { RefuelCandidate } from './refuelSuggestion'
+import { REFUEL_EMPTY_KEY, REFUEL_WORDS, refuelBandState, type RefuelCandidate } from './refuelSuggestion'
 import type { DryPoint } from './roadtripModel'
 import { useTranslation } from '../../i18n/TranslationContext'
 import { Tooltip } from '../shared/Tooltip'
@@ -445,9 +445,10 @@ function RefuelBand({ dry, refuel, dayId, onAsk, onAccept }: {
   const { vehicleKind } = useVehicleRange()
   const electric = vehicleKind === 'electric'
   const DryIcon = electric ? Zap : Fuel
-  const key = `${dayId}:${dry.legIndex}`
-  const open = refuel.openFor === key
-  const settled = open && !refuel.loading && refuel.outcome
+  const words = REFUEL_WORDS[electric ? 'electric' : 'fuel']
+  // Which control, which sentence and which offers: decided in refuelSuggestion so the
+  // phone band reads the same answer instead of keeping its own copy of the conditions.
+  const band = refuelBandState(refuel, dayId, dry.legIndex)
 
   return (
     <div className="min-w-0">
@@ -490,7 +491,7 @@ function RefuelBand({ dry, refuel, dayId, onAsk, onAccept }: {
                 className="truncate font-geist font-semibold uppercase tracking-[0.16em] text-danger"
                 style={{ fontSize: FS.label }}
               >
-                {t(electric ? 'roadtrip.refuel.dryElectric' : 'roadtrip.refuel.dry')}
+                {t(words.dry)}
               </div>
               {/* How far INTO this leg, where a drive band keeps its figures. Not the
                   range that was crossed: that is the traveller's own setting, says
@@ -513,7 +514,7 @@ function RefuelBand({ dry, refuel, dayId, onAsk, onAccept }: {
                 found nothing leaves a button rather than a dead end — the place search
                 is a shared public service that does time out, and "it did not answer"
                 with no way to retry reads as broken rather than as busy. */}
-            {open && (refuel.loading || refuel.results.length) ? (
+            {band.control === 'close' ? (
               <Tooltip label={t('common.close')}>
                 <button
                   type="button"
@@ -525,18 +526,14 @@ function RefuelBand({ dry, refuel, dayId, onAsk, onAccept }: {
                 </button>
               </Tooltip>
             ) : (
-              <Tooltip label={settled && refuel.outcome !== 'found'
-                ? t('roadtrip.refuel.again')
-                : t(electric ? 'roadtrip.refuel.findElectric' : 'roadtrip.refuel.find')}>
+              <Tooltip label={t(band.control === 'again' ? 'roadtrip.refuel.again' : words.find)}>
                 <button
                   type="button"
                   onClick={onAsk}
-                  aria-label={settled && refuel.outcome !== 'found'
-                    ? t('roadtrip.refuel.again')
-                    : t(electric ? 'roadtrip.refuel.findElectric' : 'roadtrip.refuel.find')}
+                  aria-label={t(band.control === 'again' ? 'roadtrip.refuel.again' : words.find)}
                   className="group/fuel grid h-[22px] w-[22px] shrink-0 place-items-center rounded-lg text-danger transition-colors hover:bg-danger-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
                 >
-                  {settled && refuel.outcome !== 'found'
+                  {band.control === 'again'
                     ? <RotateCcw size={13} strokeWidth={2} aria-hidden />
                     : (
                       /* The glow stops under the pointer: a lamp that keeps blinking
@@ -553,12 +550,11 @@ function RefuelBand({ dry, refuel, dayId, onAsk, onAccept }: {
             )}
           </div>
 
-          {open && refuel.loading ? (
+          {band.loading ? (
             <span className="text-content-muted" style={{ fontSize: FS.meta }}>{t('roadtrip.refuel.looking')}</span>
           ) : null}
 
-          {settled ? (
-            refuel.results.length ? (
+          {band.offers.length ? (
               <ul className="flex flex-col gap-1">
                 {/* Three at most. This is an offer beside a plan, not a list to browse;
                     the corridor panel is where somebody goes to see all of them.
@@ -569,7 +565,7 @@ function RefuelBand({ dry, refuel, dayId, onAsk, onAccept }: {
                     not enough to tell them apart — measured on a real day the top three
                     came back as "Vattenfall InCharge" three times over, identical but for
                     a number nobody could see the meaning of. */}
-                {refuel.results.slice(0, 3).map(poi => {
+                {band.offers.map(poi => {
                   const kind = STOP_KIND_BY_KEY[poi.category]
                   const KindIcon = kind?.Icon ?? Fuel
                   return (
@@ -632,11 +628,11 @@ function RefuelBand({ dry, refuel, dayId, onAsk, onAccept }: {
                           </span>
                         </span>
                         {onAccept ? (
-                          <Tooltip label={t(electric ? 'roadtrip.refuel.addElectric' : 'roadtrip.refuel.add', { name: poi.name })}>
+                          <Tooltip label={t(words.add, { name: poi.name })}>
                             <button
                               type="button"
                               onClick={() => onAccept(poi)}
-                              aria-label={t(electric ? 'roadtrip.refuel.addElectric' : 'roadtrip.refuel.add', { name: poi.name })}
+                              aria-label={t(words.add, { name: poi.name })}
                               className="grid h-[22px] w-[22px] shrink-0 place-items-center rounded-lg bg-surface-secondary text-content-secondary transition-colors hover:bg-accent hover:text-accent-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
                             >
                               <Plus size={13} strokeWidth={2.2} aria-hidden />
@@ -648,18 +644,15 @@ function RefuelBand({ dry, refuel, dayId, onAsk, onAccept }: {
                   )
                 })}
               </ul>
-            ) : (
-              /* Three different sentences for three different facts. "Nothing on this
-                 stretch" after a request that failed or was cut short states something
-                 that was never checked, which is worse than saying nothing. */
-              <span className="text-content-muted" style={{ fontSize: FS.meta }}>
-                {refuel.outcome === 'none'
-                  ? t('roadtrip.refuel.none')
-                  : refuel.outcome === 'incomplete'
-                    ? t('roadtrip.refuel.incomplete')
-                    : t('roadtrip.refuel.failed')}
-              </span>
-            )
+          ) : null}
+
+          {/* Three different sentences for three different facts. "Nothing on this
+              stretch" after a request that failed or was cut short states something
+              that was never checked, which is worse than saying nothing. */}
+          {band.empty ? (
+            <span className="text-content-muted" style={{ fontSize: FS.meta }}>
+              {t(REFUEL_EMPTY_KEY[band.empty])}
+            </span>
           ) : null}
       </div>
     </div>
diff --git a/client/src/components/Roadtrip/refuelSuggestion.test.ts b/client/src/components/Roadtrip/refuelSuggestion.test.ts
index 886518769..d4a7769d8 100644
--- a/client/src/components/Roadtrip/refuelSuggestion.test.ts
+++ b/client/src/components/Roadtrip/refuelSuggestion.test.ts
@@ -1,5 +1,8 @@
 import { describe, it, expect } from 'vitest'
-import { reachableRefuels, outcomeOf } from './refuelSuggestion'
+import {
+  reachableRefuels, outcomeOf, refuelBandState, refuelKey, REFUEL_EMPTY_KEY, REFUEL_OFFER_LIMIT, REFUEL_WORDS,
+  type RefuelCandidate, type RefuelOutcome, type RefuelSearchView,
+} from './refuelSuggestion'
 import type { LatLng } from './corridor'
 import type { Poi } from '../Map/poiCategories'
 
@@ -122,3 +125,67 @@ describe('reachableRefuels — one entry per station', () => {
     expect(out.map(p => p.name).sort()).toEqual(['Aral', 'Shell'])
   })
 })
+
+describe('refuelBandState', () => {
+  const candidate = (name: string): RefuelCandidate =>
+    ({ ...poi(name, 52, 13.5), alongKm: 40, offRouteKm: 0.4, spareKm: 30 })
+  const search = (over: Partial<RefuelSearchView> = {}): RefuelSearchView =>
+    ({ openFor: null, loading: false, outcome: null, results: [], ...over })
+
+  it('FE-ROADTRIP-REFUEL-013: a search filed under another leg leaves this band alone', () => {
+    // One search is open at a time and it names the dry point it belongs to, so a band
+    // three legs down the chain must not light up for a question asked about this one.
+    expect(refuelKey(7, 1)).toBe('7:1')
+    const band = refuelBandState(search({ openFor: '7:4', outcome: 'found', results: [candidate('a')] }), 7, 1)
+    expect(band).toEqual({ open: false, loading: false, offers: [], empty: null, control: 'find' })
+  })
+
+  it('FE-ROADTRIP-REFUEL-014: while the request runs the lamp steps aside for the way out', () => {
+    const band = refuelBandState(search({ openFor: '7:1', loading: true }), 7, 1)
+    expect(band).toEqual({ open: true, loading: true, offers: [], empty: null, control: 'close' })
+  })
+
+  it('FE-ROADTRIP-REFUEL-015: an answer lists three at most, in the order the search ranked them', () => {
+    const results = ['a', 'b', 'c', 'd', 'e'].map(candidate)
+    const band = refuelBandState(search({ openFor: '7:1', outcome: 'found', results }), 7, 1)
+    expect(REFUEL_OFFER_LIMIT).toBe(3)
+    expect(band.offers.map(o => o.name)).toEqual(['a', 'b', 'c'])
+    expect(band.control).toBe('close')
+    expect(band.empty).toBeNull()
+  })
+
+  it.each<Exclude<RefuelOutcome, 'found'>>(['none', 'incomplete', 'failed'])(
+    'FE-ROADTRIP-REFUEL-016: an empty answer (%s) says which nothing it was and leaves a retry',
+    outcome => {
+      // A retry rather than a dead end: the place search is a shared service that does
+      // time out, and no answer with no way to ask again reads as broken.
+      const band = refuelBandState(search({ openFor: '7:1', outcome }), 7, 1)
+      expect(band).toEqual({ open: true, loading: false, offers: [], empty: outcome, control: 'again' })
+      expect(REFUEL_EMPTY_KEY[outcome]).toBe(`roadtrip.refuel.${outcome}`)
+    },
+  )
+
+  it('FE-ROADTRIP-REFUEL-017: asked but nothing back yet keeps the lamp and says nothing', () => {
+    const band = refuelBandState(search({ openFor: '7:1' }), 7, 1)
+    expect(band).toEqual({ open: true, loading: false, offers: [], empty: null, control: 'find' })
+  })
+
+  it('FE-ROADTRIP-REFUEL-018: the battery never borrows the tank\'s words', () => {
+    expect(REFUEL_WORDS.fuel).toEqual({
+      dry: 'roadtrip.refuel.dry', find: 'roadtrip.refuel.find', add: 'roadtrip.refuel.add',
+    })
+    expect(REFUEL_WORDS.electric).toEqual({
+      dry: 'roadtrip.refuel.dryElectric', find: 'roadtrip.refuel.findElectric', add: 'roadtrip.refuel.addElectric',
+    })
+  })
+
+  it('FE-ROADTRIP-REFUEL-019: results that arrive before their outcome already offer the way out', () => {
+    // The close control follows the results rather than the outcome, which is how the
+    // desktop rail always decided it: once there is something on the map to dismiss,
+    // the band offers to dismiss it.
+    const band = refuelBandState(search({ openFor: '7:1', results: [candidate('a')] }), 7, 1)
+    expect(band.control).toBe('close')
+    expect(band.offers).toEqual([])
+    expect(band.empty).toBeNull()
+  })
+})
diff --git a/client/src/components/Roadtrip/refuelSuggestion.ts b/client/src/components/Roadtrip/refuelSuggestion.ts
index 9daf24b80..0a9d548e6 100644
--- a/client/src/components/Roadtrip/refuelSuggestion.ts
+++ b/client/src/components/Roadtrip/refuelSuggestion.ts
@@ -121,3 +121,103 @@ function oneEach(sorted: RefuelCandidate[]): RefuelCandidate[] {
   }
   return kept
 }
+
+/**
+ * How many answers a band lists, on the desktop rail and on the phone alike.
+ *
+ * Three at most. This is an offer beside a plan, not a list to browse; the corridor
+ * search is where somebody goes to see all of them. Named once so the two bands can never
+ * disagree about what "the offers" are.
+ */
+export const REFUEL_OFFER_LIMIT = 3
+
+/**
+ * The name a search is filed under: the card day the band is drawn on and the leg.
+ *
+ * One search is open at a time and it names the dry point it belongs to, so a band three
+ * legs down the chain does not light up for a question asked about this one. The card
+ * day rather than the day a borrowed stop is stored on, because the answer has to arrive
+ * under a key the band that asked is watching.
+ */
+export function refuelKey(dayId: number, legIndex: number): string {
+  return `${dayId}:${legIndex}`
+}
+
+/** What sits in the band's trailing slot: the lamp that goes looking, a retry, or a close. */
+export type RefuelControl = 'find' | 'again' | 'close'
+
+/**
+ * The part of the search a band reads.
+ *
+ * Structural rather than the hook's own type, because useRefuelSearch.ts imports this
+ * module and the pure half should not have to know about the half with the network in it.
+ */
+export interface RefuelSearchView {
+  openFor: string | null
+  loading: boolean
+  outcome: RefuelOutcome | null
+  results: readonly RefuelCandidate[]
+}
+
+/** Everything a band shows that is not markup, decided once for both shells. */
+export interface RefuelBandState {
+  /** The open search belongs to this band. */
+  open: boolean
+  /** This band's question is out and has not come back yet. */
+  loading: boolean
+  /** The answers to list, already capped at REFUEL_OFFER_LIMIT; empty until there are some. */
+  offers: RefuelCandidate[]
+  /** Which kind of nothing came back, or null while there is no empty answer to report. */
+  empty: Exclude<RefuelOutcome, 'found'> | null
+  /** What fills the trailing slot; `refuelBandState` says why each one wins when it does. */
+  control: RefuelControl
+}
+
+/**
+ * The state of one dry band, given the one search that may be open.
+ *
+ * The lamp steps aside while a request runs or offers are showing, for the way to close
+ * the answer: every press is a real request against a shared service, and a lamp still
+ * standing there invites a second one nobody asked for. An answer that found nothing
+ * leaves a retry rather than a dead end, because the place search is a public service
+ * that does time out, and "it did not answer" with no way to ask again reads as broken
+ * rather than as busy.
+ *
+ * The empty answer keeps three different sentences for three different facts. "Nothing
+ * on this stretch" after a request that failed or was cut short states something that was
+ * never checked, which is worse than saying nothing, so anything that is not a plain
+ * `none` or `incomplete` reads as `failed`.
+ */
+export function refuelBandState(search: RefuelSearchView, dayId: number, legIndex: number): RefuelBandState {
+  const open = search.openFor === refuelKey(dayId, legIndex)
+  const loading = open && search.loading
+  const settled = open && !search.loading && search.outcome != null
+  const offers = settled && search.results.length > 0 ? search.results.slice(0, REFUEL_OFFER_LIMIT) : []
+  let empty: RefuelBandState['empty'] = null
+  if (settled && offers.length === 0) {
+    empty = search.outcome === 'none' || search.outcome === 'incomplete' ? search.outcome : 'failed'
+  }
+  let control: RefuelControl = 'find'
+  if (loading || (open && search.results.length > 0)) control = 'close'
+  else if (settled && search.outcome !== 'found') control = 'again'
+  return { open, loading, offers, empty, control }
+}
+
+/** Which sentence each kind of empty answer gets. */
+export const REFUEL_EMPTY_KEY: Record<Exclude<RefuelOutcome, 'found'>, string> = {
+  none: 'roadtrip.refuel.none',
+  incomplete: 'roadtrip.refuel.incomplete',
+  failed: 'roadtrip.refuel.failed',
+}
+
+/**
+ * The band's words for a tank and for a battery.
+ *
+ * An electric car does not run out of TANK, and a battery band that talks about fuel is
+ * the kind of detail that makes the rest look careless. Kept as one table so the title,
+ * the lamp's label and the offer's label never mix the two vocabularies.
+ */
+export const REFUEL_WORDS = {
+  fuel: { dry: 'roadtrip.refuel.dry', find: 'roadtrip.refuel.find', add: 'roadtrip.refuel.add' },
+  electric: { dry: 'roadtrip.refuel.dryElectric', find: 'roadtrip.refuel.findElectric', add: 'roadtrip.refuel.addElectric' },
+} as const
diff --git a/client/src/mobile/screens/trip/roadtrip/MRoadtripRows.tsx b/client/src/mobile/screens/trip/roadtrip/MRoadtripRows.tsx
index acb75f371..177a1b266 100644
--- a/client/src/mobile/screens/trip/roadtrip/MRoadtripRows.tsx
+++ b/client/src/mobile/screens/trip/roadtrip/MRoadtripRows.tsx
@@ -1,11 +1,13 @@
-import { AlertTriangle, Bike, CarFront, Footprints, Fuel, Hourglass, Moon, Pin, Plus, Search, Sunrise, Zap } from 'lucide-react'
-import type { ReactNode } from 'react'
+import { AlertTriangle, Bike, CarFront, Footprints, Fuel, Hourglass, Moon, Pin, Plus, RotateCcw, Sunrise, X, Zap } from 'lucide-react'
+import type { CSSProperties, ReactNode } from 'react'
+import MDancingTrek from '../../../components/MDancingTrek'
+import MIconBtn from '../../../components/MIconBtn'
 import { formatDurationShort, serviceColor } from '../../../../components/Roadtrip/roadtripModel'
 import { STOP_KIND_BY_KEY } from '../../../../components/Roadtrip/stopKinds'
 import { formatDistance } from '../../../../utils/units'
 import type { StopRow } from '../../../../components/Roadtrip/roadtripRowModel'
 import type { RefuelSearch } from '../../../../components/Roadtrip/useRefuelSearch'
-import type { RefuelCandidate } from '../../../../components/Roadtrip/refuelSuggestion'
+import { REFUEL_EMPTY_KEY, REFUEL_WORDS, refuelBandState, type RefuelCandidate } from '../../../../components/Roadtrip/refuelSuggestion'
 import type { DistanceUnit, RouteSegment, ScheduleWarning } from '@trek/shared/roadtrip'
 import type { TranslationFn } from '../../../../types'
 
@@ -169,11 +171,51 @@ export function RtLegRow({ seg, mode, chrome }: {
 }
 
 /**
- * The one loud row of the chain: the tank runs out here.
+ * The ground the dry band stands on, where the mascot is.
  *
- * Full width and a 44px button, where the desktop has a 22px reserve light. This is
- * the single situation on a drive that forces an action, so it gets the only shout
- * on the screen.
+ * Opaque on purpose: the mascot cuts its eyes and wheel hubs out in `--m-bg`, and
+ * `--m-card` is 55% alpha in both themes, so on the card's own ground the red body would
+ * show through the eyes. `--m-sheetop` is the phone's opaque surface. Mixed against that
+ * rather than against `--m-bg`, because the mascot's span renames `--m-bg` to this value
+ * and a variable defined in terms of itself is invalid, which would drop the cutouts.
+ */
+const DRY_GROUND = 'color-mix(in srgb, var(--m-st-danger) 11%, var(--m-sheetop))'
+
+/**
+ * The lamp's circle: a soft wash of the band's own colour rather than the black action
+ * fill. The lamp is a warning light that happens to be pressable, and the 44px circle is
+ * what tells a thumb so without turning it into the loudest thing on the screen.
+ */
+const DANGER_SOFT: CSSProperties = {
+  background: 'color-mix(in srgb, var(--m-st-danger) 14%, transparent)',
+  color: 'var(--m-st-danger)',
+}
+
+/**
+ * Where the tank runs out on this leg, and the reserve lamp that goes looking.
+ *
+ * The desktop band's design, sized for a thumb: the mascot on its skateboard and not
+ * enjoying it, a small uppercase warning, and the lamp itself as the button. Not a pill
+ * with the words on it, because a labelled pill beside a mascot and a title leaves the
+ * title almost no room: the band's content box is only about
+ * 299px wide at 375px and 284px at 360px, and a label like "Cerca un punt de recàrrega"
+ * is a long way into that. So the lamp is the button, as on the desktop, and its words
+ * live in the label a screen reader announces.
+ *
+ * 44px where the desktop lamp is 22px, because it is aimed with a thumb. The title clamps
+ * to two lines instead of truncating, because a warning that loses its end says nothing
+ * ("Qui il serbatoio si esaurisce" does not fit on one). Offline the lamp stops glowing,
+ * because a lamp that glows invites a press that cannot work. Somebody who may not edit
+ * the day still sees the lamp, as a plain mark: the empty tank is information, not an
+ * action.
+ *
+ * While a search runs or its offers show, the lamp steps aside for a close, and an empty
+ * answer leaves a retry in its place. The close matters because the map draws the offers,
+ * and without it nothing in the band could clear those pins short of accepting one. It
+ * stays while offline too, and the offline sentence stands down with it: closing is local,
+ * so there is no dead control left to explain. Which control shows, which offers and which
+ * empty sentence is decided in `refuelBandState`, the same place the desktop band reads
+ * it from.
  */
 export function RtDryRow({ intoLegKm, chrome, electric, onSearch, offline, refuel, dayId, legIndex, onAccept }: {
   intoLegKm: number
@@ -188,56 +230,79 @@ export function RtDryRow({ intoLegKm, chrome, electric, onSearch, offline, refue
   onAccept?: (poi: RefuelCandidate) => void
 }) {
   const { t, unit } = chrome
-  // One search is open at a time and it names the dry point it belongs to, so a band
-  // three legs down the chain does not light up for a question asked about this one.
-  const open = refuel.openFor === `${dayId}:${legIndex}`
-  const settled = open && !refuel.loading && refuel.outcome
+  const band = refuelBandState(refuel, dayId, legIndex)
+  const words = REFUEL_WORDS[electric ? 'electric' : 'fuel']
+  const Lamp = electric ? Zap : Fuel
   return (
     <div
-      className="my-2 -mx-1 flex flex-col gap-[7px] rounded-[16px] border px-3 py-2.5"
+      className="-mx-1 my-2 flex flex-col gap-2 rounded-[16px] border px-3 py-2.5"
       style={{
-        borderColor: 'color-mix(in srgb, var(--m-st-danger) 30%, transparent)',
-        background: 'linear-gradient(180deg, color-mix(in srgb, var(--m-st-danger) 12%, var(--m-card)) 0%, var(--m-card) 100%)',
+        borderColor: 'color-mix(in srgb, var(--m-st-danger) 22%, transparent)',
+        // Flat through the padding and the 44px header row, so the ground behind the
+        // mascot's eyes is the one they are cut in, and only the answers below fade out.
+        backgroundImage: `linear-gradient(180deg, ${DRY_GROUND} 0px, ${DRY_GROUND} 54px, var(--m-card) 100%)`,
+        boxShadow: 'inset 0 1px 0 color-mix(in srgb, var(--m-st-danger) 20%, transparent)',
       }}
     >
-      <span className="flex items-center gap-[7px]" style={{ color: 'var(--m-st-danger)' }}>
-        {electric ? <Zap size={16} strokeWidth={2} aria-hidden="true" /> : <Fuel size={16} strokeWidth={2} aria-hidden="true" />}
-        <span className="text-[0.8125rem] font-bold">
-          {electric ? t('roadtrip.refuel.dryElectric') : t('roadtrip.refuel.dry')}
+      <div className="flex min-h-[44px] items-center gap-2.5">
+        {/* Renamed on this span only, never on the band: the offers below are drawn in
+            --m-ink too, and they have to stay ink. Not a tap target either, because
+            nothing in the chain but a destination row reacts to a tap. */}
+        <span
+          className="pointer-events-none flex flex-none"
+          style={{ '--m-ink': 'var(--m-st-danger)', '--m-bg': DRY_GROUND } as CSSProperties}
+        >
+          {/* Out of fuel is a thing that happens to the drive, so it is the mascot with
+              the vehicle, and it is not enjoying it. */}
+          <MDancingTrek scene="transport" mood="sad" size={34} />
         </span>
-      </span>
-      <span className="font-geist text-[0.71875rem] text-m-muted">
-        {t('roadtrip.refuel.after', { distance: formatDistance(Math.round(intoLegKm), unit) })}
-      </span>
-      {onSearch && (
-        <>
+        <span className="min-w-0 flex-1">
+          <span className="line-clamp-2 font-geist text-[0.625rem] font-bold uppercase leading-[1.35] tracking-[.09em] text-[color:var(--m-st-danger)]">
+            {t(words.dry)}
+          </span>
+          <span className="mt-[2px] block font-geist text-[0.71875rem] tabular-nums text-m-muted">
+            {t('roadtrip.refuel.after', { distance: formatDistance(Math.round(intoLegKm), unit) })}
+          </span>
+        </span>
+        {band.control === 'close' ? (
+          <MIconBtn variant="neutral" size={44} onClick={refuel.close} ariaLabel={t('common.close')}>
+            <X size={16} strokeWidth={2.2} aria-hidden="true" />
+          </MIconBtn>
+        ) : onSearch ? (
           <button
             type="button"
             onClick={onSearch}
             disabled={offline}
-            className="flex h-11 w-full items-center justify-center gap-[7px] rounded-full bg-m-act text-[0.8125rem] font-semibold text-m-actfg disabled:bg-[color:var(--m-ic)] disabled:text-m-faint"
+            aria-label={t(band.control === 'again' ? 'roadtrip.refuel.again' : words.find)}
+            style={offline ? undefined : DANGER_SOFT}
+            className={`grid h-11 w-11 flex-none place-items-center rounded-full ${offline ? 'bg-[color:var(--m-ic)] text-m-faint' : ''}`}
           >
-            <Search size={15} strokeWidth={2.2} aria-hidden="true" />
-            {electric ? t('roadtrip.refuel.findElectric') : t('roadtrip.refuel.find')}
+            {band.control === 'again'
+              ? <RotateCcw size={17} strokeWidth={2.2} aria-hidden="true" />
+              : <Lamp size={18} strokeWidth={2} className={offline ? undefined : 'trek-lowfuel'} aria-hidden="true" />}
           </button>
-          {/* Blunt rather than greyed out: the button keeps its shape and says why. */}
-          {offline && (
-            <span className="font-geist text-[0.6875rem] leading-[1.4] text-m-faint">{t('mobileTrip.rtSearchOffline')}</span>
-          )}
-        </>
+        ) : (
+          <span className="grid h-11 w-11 flex-none place-items-center text-[color:var(--m-st-danger)]" aria-hidden="true">
+            <Lamp size={18} strokeWidth={2} className="trek-lowfuel" />
+          </span>
+        )}
+      </div>
+
+      {/* Blunt rather than silent: the lamp keeps its place and this says why it is out. */}
+      {onSearch && offline && band.control !== 'close' && (
+        <span className="font-geist text-[0.6875rem] leading-[1.4] text-m-faint">{t('mobileTrip.rtSearchOffline')}</span>
       )}
 
-      {open && refuel.loading && (
+      {band.loading && (
         <span className="font-geist text-[0.71875rem] text-m-muted">{t('roadtrip.refuel.looking')}</span>
       )}
 
       {/* The answer, in the band that asked. The desktop puts it in the rail row for the
           same reason: a station offered somewhere other than where the tank runs out is
-          an offer somebody has to go and find. Three at most: this is an offer beside a
-          plan, and the search sheet above is where all of them live. */}
-      {settled && (refuel.results.length ? (
+          an offer somebody has to go and find. */}
+      {band.offers.length > 0 && (
         <ul className="flex flex-col gap-[6px]">
-          {refuel.results.slice(0, 3).map(poi => (
+          {band.offers.map(poi => (
             <RefuelOffer
               key={poi.osm_id}
               poi={poi}
@@ -247,17 +312,13 @@ export function RtDryRow({ intoLegKm, chrome, electric, onSearch, offline, refue
             />
           ))}
         </ul>
-      ) : (
-        /* Three sentences for three different facts. "Nothing on this stretch" after a
-           request that failed states something that was never checked. */
-        <span className="font-geist text-[0.71875rem] leading-[1.4] text-m-muted">
-          {refuel.outcome === 'none'
-            ? t('roadtrip.refuel.none')
-            : refuel.outcome === 'incomplete'
-              ? t('roadtrip.refuel.incomplete')
-              : t('roadtrip.refuel.failed')}
-        </span>
-      ))}
+      )}
+
+      {/* Three sentences for three different facts. "Nothing on this stretch" after a
+          request that failed states something that was never checked. */}
+      {band.empty && (
+        <span className="font-geist text-[0.71875rem] leading-[1.4] text-m-muted">{t(REFUEL_EMPTY_KEY[band.empty])}</span>
+      )}
     </div>
   )
 }
@@ -303,7 +364,7 @@ function RefuelOffer({ poi, chrome, electric, onAccept }: {
         <button
           type="button"
           onClick={onAccept}
-          aria-label={t(electric ? 'roadtrip.refuel.addElectric' : 'roadtrip.refuel.add', { name: poi.name })}
+          aria-label={t(REFUEL_WORDS[electric ? 'electric' : 'fuel'].add, { name: poi.name })}
           className="grid h-[38px] w-[38px] flex-none place-items-center rounded-full bg-[color:var(--m-ic)] text-m-ink"
         >
           <Plus size={16} strokeWidth={2.2} aria-hidden="true" />
diff --git a/client/tests/unit/mobile/trip/MRoadtripRows.test.tsx b/client/tests/unit/mobile/trip/MRoadtripRows.test.tsx
index c211d91e3..08cbd1197 100644
--- a/client/tests/unit/mobile/trip/MRoadtripRows.test.tsx
+++ b/client/tests/unit/mobile/trip/MRoadtripRows.test.tsx
@@ -9,7 +9,7 @@ import type { TranslationFn } from '../../../../src/types'
 import type { RefuelSearch } from '../../../../src/components/Roadtrip/useRefuelSearch'
 import type { RefuelCandidate } from '../../../../src/components/Roadtrip/refuelSuggestion'
 
-// FE-MOB-RTROW-001 to FE-MOB-RTROW-030
+// FE-MOB-RTROW-001 to FE-MOB-RTROW-037
 
 // Same echo strategy as tests/helpers/mobileTrip: assertions stay on keys, not copy.
 const t: TranslationFn = (key, params) =>
@@ -222,11 +222,12 @@ describe('RtDryRow', () => {
   const props = { intoLegKm: 82, chrome, electric: false, offline: false, refuel: idle, dayId: 7, legIndex: 1 }
 
   it('FE-MOB-RTROW-018: names the fuel wording and the distance into the leg for a combustion car', () => {
-    render(<RtDryRow {...props} onSearch={vi.fn()} />)
+    const { container } = render(<RtDryRow {...props} onSearch={vi.fn()} />)
 
     expect(screen.getByText('roadtrip.refuel.dry')).toBeInTheDocument()
     expect(screen.getByText('roadtrip.refuel.after:82 km')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'roadtrip.refuel.find' })).toBeInTheDocument()
+    expect(container.querySelector('svg.trek--transport')).not.toBeNull()
   })
 
   it('FE-MOB-RTROW-019: swaps to the charging wording for an electric car', () => {
@@ -252,18 +253,23 @@ describe('RtDryRow', () => {
     const button = screen.getByRole('button', { name: 'roadtrip.refuel.find' })
     expect(button).toBeDisabled()
     expect(screen.getByText('mobileTrip.rtSearchOffline')).toBeInTheDocument()
+    // The lamp stops glowing: a lamp that glows invites a press that cannot work.
+    expect(button.querySelector('svg.lucide-fuel')).not.toBeNull()
+    expect(button.querySelector('.trek-lowfuel')).toBeNull()
 
     fireEvent.click(button)
     expect(onSearch).not.toHaveBeenCalled()
   })
 
   it('FE-MOB-RTROW-022: drops the button entirely without write permission, offline line included', () => {
-    render(<RtDryRow {...props} offline />)
+    const { container } = render(<RtDryRow {...props} offline />)
 
     expect(screen.queryByRole('button')).toBeNull()
     expect(screen.queryByText('mobileTrip.rtSearchOffline')).toBeNull()
-    // The warning itself stays: it is information, not an action.
+    // The warning itself stays: it is information, not an action. The reserve lamp too,
+    // as a mark rather than a control.
     expect(screen.getByText('roadtrip.refuel.dry')).toBeInTheDocument()
+    expect(container.querySelector('.trek-lowfuel')).not.toBeNull()
   })
   const offer = (over: Record<string, unknown> = {}) => ({
     osm_id: 'n1', name: 'Shell Ebina', lat: 35.44, lng: 139.39, category: 'fuel',
@@ -339,6 +345,110 @@ describe('RtDryRow', () => {
     expect(screen.getByText('roadtrip.refuel.failed')).toBeInTheDocument()
     expect(screen.queryByText('roadtrip.refuel.none')).toBeNull()
   })
+
+  it('FE-MOB-RTROW-032: the mascot rides the skateboard, sad, in the band colour and on an opaque ground', () => {
+    const { container } = render(<RtDryRow {...props} onSearch={vi.fn()} />)
+
+    const mascot = container.querySelector('svg.trek--transport') as SVGElement
+    // Expression eyes, not the default open ones, bent down rather than up.
+    expect(mascot.querySelectorAll('.trek-eye')).toHaveLength(0)
+    const eyes = mascot.querySelectorAll('.trek-body g[stroke] path')
+    expect(eyes).toHaveLength(2)
+    const [, startY, controlY] = /^M[\d.]+ ([\d.]+) Q[\d.]+ ([\d.]+)/.exec(eyes[0].getAttribute('d') ?? '') ?? []
+    expect(Number(controlY)).toBeGreaterThan(Number(startY))
+
+    // Renamed on the mascot's own span, against an opaque surface so the cut out eyes
+    // do not show the body through them.
+    const wrapper = mascot.parentElement as HTMLElement
+    expect(wrapper.style.getPropertyValue('--m-ink')).toBe('var(--m-st-danger)')
+    expect(wrapper.style.getPropertyValue('--m-bg')).toContain('--m-sheetop')
+    // And never on the band, where the offers read --m-ink and have to stay ink.
+    expect((container.firstElementChild as HTMLElement).style.getPropertyValue('--m-ink')).toBe('')
+  })
+
+  it('FE-MOB-RTROW-033: the reserve lamp is the button, with its words in the label only', () => {
+    const fuel = render(<RtDryRow {...props} onSearch={vi.fn()} />)
+
+    const lamp = screen.getByRole('button', { name: 'roadtrip.refuel.find' })
+    expect(lamp.querySelector('svg.lucide-fuel.trek-lowfuel')).not.toBeNull()
+    // Not the black pill it replaced, and no visible label beside the mascot and title.
+    expect(lamp.className).not.toContain('bg-m-act')
+    expect(screen.queryByText('roadtrip.refuel.find')).toBeNull()
+    fuel.unmount()
+
+    render(<RtDryRow {...props} electric onSearch={vi.fn()} />)
+    expect(screen.getByRole('button', { name: 'roadtrip.refuel.findElectric' }).querySelector('svg.lucide-zap')).not.toBeNull()
+  })
+
+  it('FE-MOB-RTROW-034: while the search runs or offers show, the lamp steps aside for a close', () => {
+    // The map draws the offers, and the band is where somebody lets those pins go.
+    const close = vi.fn()
+    const running = render(<RtDryRow {...props} refuel={answering({ loading: true, close })} onSearch={vi.fn()} />)
+
+    expect(screen.queryByRole('button', { name: 'roadtrip.refuel.find' })).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'common.close' }))
+    expect(close).toHaveBeenCalledTimes(1)
+    running.unmount()
+
+    const found = render(<RtDryRow {...props} refuel={answering({ outcome: 'found', results: [offer()], close })} onSearch={vi.fn()} />)
+    expect(screen.getByText('Shell Ebina')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'roadtrip.refuel.find' })).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'common.close' }))
+    expect(close).toHaveBeenCalledTimes(2)
+    found.unmount()
+
+    // Offline the close still works, because closing is local, and with no dead control
+    // in the slot the sentence explaining one stands down.
+    render(<RtDryRow {...props} offline refuel={answering({ outcome: 'found', results: [offer()], close })} onSearch={vi.fn()} />)
+    const closeOffline = screen.getByRole('button', { name: 'common.close' })
+    expect(closeOffline).toBeEnabled()
+    expect(screen.queryByText('mobileTrip.rtSearchOffline')).toBeNull()
+    fireEvent.click(closeOffline)
+    expect(close).toHaveBeenCalledTimes(3)
+  })
+
+  it('FE-MOB-RTROW-035: an empty answer leaves a retry rather than a dead end, and offline it waits', () => {
+    const onSearch = vi.fn()
+    const failed = render(<RtDryRow {...props} refuel={answering({ outcome: 'failed' })} onSearch={onSearch} />)
+
+    expect(screen.queryByRole('button', { name: 'roadtrip.refuel.find' })).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'roadtrip.refuel.again' }))
+    expect(onSearch).toHaveBeenCalledTimes(1)
+    failed.unmount()
+
+    const none = render(<RtDryRow {...props} refuel={answering({ outcome: 'none' })} onSearch={onSearch} />)
+    expect(screen.getByRole('button', { name: 'roadtrip.refuel.again' })).toBeInTheDocument()
+    none.unmount()
+
+    render(<RtDryRow {...props} offline refuel={answering({ outcome: 'failed' })} onSearch={onSearch} />)
+    const again = screen.getByRole('button', { name: 'roadtrip.refuel.again' })
+    expect(again).toBeDisabled()
+    fireEvent.click(again)
+    expect(onSearch).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-MOB-RTROW-036: lists three offers at most, however many came back', () => {
+    const results = ['n1', 'n2', 'n3', 'n4'].map((id, i) => offer({ osm_id: id, name: `Station ${i + 1}` }))
+    const { container } = render(<RtDryRow {...props} refuel={answering({ outcome: 'found', results })} onSearch={vi.fn()} />)
+
+    expect(container.querySelectorAll('li')).toHaveLength(3)
+    expect(screen.queryByText('Station 4')).toBeNull()
+  })
+
+  it('FE-MOB-RTROW-037: the battery wording carries through to taking an offer', () => {
+    render(
+      <RtDryRow
+        {...props}
+        electric
+        refuel={answering({ outcome: 'found', results: [offer()] })}
+        onSearch={vi.fn()}
+        onAccept={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: 'roadtrip.refuel.addElectric:Shell Ebina' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'roadtrip.refuel.add:Shell Ebina' })).toBeNull()
+  })
 })
 
 describe('RtAutoRow', () => {