/* Bring The Truck — the customer app.
   ==========================================================================

   A THIRD stylesheet, alongside the marketing site and the owner portal. It
   shares tokens with neither on purpose: this is the product a customer sees
   once, at a slightly anxious moment, and it is quieter and roomier than the
   operations screens by design.

   THE RULE THAT RUNS THROUGH ALL OF IT: below 900px this is a phone app —
   bottom navigation, one dominant action, a vertical timeline. At 900px and up
   the bottom bar is gone, navigation is in the header, the timeline is
   horizontal, and content sits in columns. Every block below picks a side.
   ========================================================================== */

:root {
  --c-navy:      #0F2A4A;
  --c-navy-deep: #0A1F3A;
  --c-navy-soft: #1B3E63;
  --c-orange:    #F26B21;
  --c-orange-dk: #D9550F;

  --c-ink:    #14232F;
  --c-body:   #40525F;
  --c-muted:  #6C7C89;
  --c-line:   #E3EAF1;
  --c-line-2: #EFF3F7;

  --c-page:    #F6F8FA;
  --c-surface: #FFFFFF;

  --c-ok:   #15803D;
  --c-warn: #B45309;
  --c-bad:  #B42318;

  --c-ok-wash:   #ECFAF1;
  --c-warn-wash: #FFF8ED;
  --c-bad-wash:  #FEF3F2;
  --c-blue-wash: #EEF4FC;
  /* The brand orange at card strength. The washes above are all status
     colours; booking is not a status, and borrowing --c-warn-wash for it
     would tint a perfectly ordinary action with a warning. */
  --c-orange-wash: #FEF1E8;

  --c-r-sm: 10px;
  --c-r:    14px;
  --c-r-lg: 20px;

  --c-shadow: 0 1px 2px rgba(15, 42, 74, .05), 0 6px 18px rgba(15, 42, 74, .06);

  --c-tap: 48px;
  --c-bar: 58px;
  --c-safe-b: env(safe-area-inset-bottom, 0px);
  --c-safe-t: env(safe-area-inset-top, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

body.cust {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The bottom bar is fixed, so the page has to end above it or the last control
   sits underneath and cannot be tapped. */
.c-wrap {
  max-width: 640px; margin: 0 auto;
  padding: 20px 16px calc(var(--c-tap) + var(--c-safe-b) + 44px);
}

/* ---- App bar ------------------------------------------------------------ */
.c-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--c-bar);
  padding: calc(var(--c-safe-t) + 10px) 16px 10px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.c-bar__brand { display: flex; align-items: center; min-height: 40px; text-decoration: none; }
.c-bar__brand img { display: block; height: 34px; width: auto; }
.c-bar__word { font-weight: 800; color: var(--c-navy); letter-spacing: -.01em; }
.c-bar__word em { font-style: normal; color: var(--c-orange); }
.c-bar__title { margin: 0; flex: 1; font-size: 1rem; font-weight: 800; color: var(--c-ink); }
.c-bar__btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  color: var(--c-body); text-decoration: none; background: var(--c-line-2);
}
.c-bar__out {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 12px; border-radius: 999px;
  font-size: .84rem; font-weight: 700; color: var(--c-body); text-decoration: none;
}
.c-bar__out:hover { background: var(--c-line-2); }
.c-bar__out svg { width: 18px; height: 18px; }
.c-bar__out span { display: none; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--c-orange); outline-offset: 2px; border-radius: 4px;
}

/* ---- Bottom navigation (MOBILE ONLY) ------------------------------------ */
.c-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  /* FIVE fixed columns. The bar once declared four while holding five
     destinations, and grid did exactly what it was told: wrapped the fifth
     onto a second row. The column count and the item count now travel
     together, and no viewport width can ever wrap this bar again. */
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--c-surface); border-top: 1px solid var(--c-line);
  padding-bottom: var(--c-safe-b);
}
.c-nav a {
  min-height: var(--c-tap); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; padding: 8px 2px;
  font-size: .7rem; font-weight: 700; text-decoration: none; color: var(--c-muted);
  min-width: 0; white-space: nowrap;
}
.c-nav a svg { width: 21px; height: 21px; flex-shrink: 0; }
.c-nav a[aria-current="page"] { color: var(--c-navy); }
.c-nav a[aria-current="page"] svg { color: var(--c-orange); }
.c-nav a:focus-visible { outline: 3px solid var(--c-orange); outline-offset: -3px; }

/* Book, the raised centre action — the same grammar the public shell gives
   its Quote button. The truck rides in an orange disc lifted above the bar
   line, ringed in surface colour so it reads as sitting ON the bar rather
   than punched through it. The whole cell stays one tap target. */
.c-nav .c-nav__book { color: var(--c-navy); }
.c-nav .c-nav__book svg {
  box-sizing: content-box;
  width: 22px; height: 22px; padding: 11px;
  margin-top: -26px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #F26B21, #C84A0D);
  box-shadow: 0 4px 12px rgba(200, 74, 13, .35), 0 0 0 4px var(--c-surface);
}

/* THE BOOK BUTTON ASKS FOR ATTENTION, THEN STOPS ASKING.
   ------------------------------------------------------------------------
   The owner: "maybe we can pulsate the button at the bottom with a glow and
   pulsating rings, I think I like that better because it attracts attention
   to it."

   It shipped bounded first — three beats on arrival, then rest — on the
   argument that a bar carried by every screen, including the one showing a
   live map of the driver, should not throb under it forever. The owner looked
   at it and overruled that: "the pulsing Book icon should continuously pulse
   and not stop." His call, and his business: the door back in is the thing he
   most wants seen, and a cue that has already stopped by the time somebody
   finishes reading the page is a cue they never got.

   So it loops. The last third of every cycle stays empty, which is what keeps
   a continuous pulse reading as a heartbeat rather than a strobe.

   IT IS ENTIRELY BOX-SHADOW, and that is not a stylistic choice. A shadow is
   ink: it cannot be clipped by a scroll container, it cannot appear in
   scrollable overflow (which is how a downward keyframe once put a sideways
   twitch in this app), and it cannot be hit-tested — so rings blooming across
   the neighbouring cells can never swallow a tap meant for Requests or
   Support. Pseudo-elements would have risked all three, and could not have
   been used anyway: the disc IS an <svg>, and replaced elements do not render
   ::before or ::after.

   Every stop carries the same five shadows in the same order so they
   interpolate: the resting drop shadow, the white collar that keeps the disc
   sitting ON the bar, two rings, and the glow. The rings are offset in time so
   the second leaves as the first dies — one chasing the other, rather than two
   moving as one. The last third of each cycle is empty on purpose: a beat
   needs a gap after it or it is a hum. */
@keyframes bttBookPulse {
  0% {
    box-shadow:
      0 4px 12px rgba(200, 74, 13, .35),
      0 0 0 4px var(--c-surface),
      0 0 0 4px rgba(242, 107, 33, .55),
      0 0 0 4px rgba(242, 107, 33, 0),
      0 0 12px 1px rgba(242, 107, 33, .45);
  }
  30% {
    box-shadow:
      0 4px 12px rgba(200, 74, 13, .35),
      0 0 0 4px var(--c-surface),
      0 0 0 15px rgba(242, 107, 33, 0),
      0 0 0 5px rgba(242, 107, 33, .42),
      0 0 22px 5px rgba(242, 107, 33, .55);
  }
  65% {
    box-shadow:
      0 4px 12px rgba(200, 74, 13, .35),
      0 0 0 4px var(--c-surface),
      0 0 0 15px rgba(242, 107, 33, 0),
      0 0 0 23px rgba(242, 107, 33, 0),
      0 0 12px 1px rgba(242, 107, 33, 0);
  }
  100% {
    box-shadow:
      0 4px 12px rgba(200, 74, 13, .35),
      0 0 0 4px var(--c-surface),
      0 0 0 15px rgba(242, 107, 33, 0),
      0 0 0 23px rgba(242, 107, 33, 0),
      0 0 12px 1px rgba(242, 107, 33, 0);
  }
}

/* No JavaScript starts it and none is needed to keep it going, so the cue
   behaves identically on a page whose scripts were blocked. Cheap to run
   forever because it is one 44px element painting a shadow — no transform, no
   layout, nothing the compositor has to re-measure. */
.c-nav .c-nav__book svg { animation: bttBookPulse 1500ms ease-out infinite; }

/* Reduced motion still gets the emphasis, just standing still: the ring sits
   outside the 4px collar so it is not painted over, and nothing moves.
   Removing the cue altogether would answer a request about motion by taking
   away the affordance. */
@media (prefers-reduced-motion: reduce) {
  .c-nav .c-nav__book svg {
    animation: none;
    box-shadow:
      0 4px 12px rgba(200, 74, 13, .35),
      0 0 0 4px var(--c-surface),
      0 0 0 9px rgba(242, 107, 33, .30),
      0 0 18px 3px rgba(242, 107, 33, .35);
  }
}

/* The tightest phones: five labels still on one line, just quieter. */
@media (max-width: 359px) {
  .c-nav a { font-size: .62rem; letter-spacing: -.01em; }
}

/* Desktop navigation lives in the header and does not exist below 900px. */
.c-topnav { display: none; }

/* ---- Headings ----------------------------------------------------------- */
.c-head { margin: 4px 0 18px; }
.c-head h1 {
  margin: 0; font-size: clamp(1.5rem, 6vw, 1.85rem); line-height: 1.2;
  font-weight: 800; letter-spacing: -.022em; color: var(--c-ink);
  overflow-wrap: anywhere;
}
.c-head__sub { margin: 6px 0 0; color: var(--c-muted); font-size: .95rem; }

.c-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }
.c-sec__t { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--c-ink); }
.c-sec__link { font-size: .86rem; font-weight: 700; color: var(--c-navy-soft); text-decoration: none; white-space: nowrap; }
.c-sec__link:hover { text-decoration: underline; }
/* A heading with nothing beside it can have the middle. */
.c-sec--center { justify-content: center; text-align: center; }

.c-hint { margin: 8px 0 0; font-size: .84rem; line-height: 1.5; color: var(--c-muted); }
.c-hint--lead { margin: -4px 0 12px; }

/* ---- Cards -------------------------------------------------------------- */
.c-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--c-r); padding: 18px 16px; margin-bottom: 14px;
  box-shadow: var(--c-shadow);
}
.c-card__h {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px; font-size: 1rem; font-weight: 800; color: var(--c-ink);
}
.c-card__h svg { width: 20px; height: 20px; color: var(--c-navy-soft); }
.c-card__p { margin: 0 0 14px; font-size: .95rem; line-height: 1.55; color: var(--c-body); }
.c-card__note { margin: 12px 0 0; font-size: .9rem; line-height: 1.5; color: var(--c-body); }

/* ---- The status headline ------------------------------------------------ */
.c-status {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg); padding: 20px 18px; margin-bottom: 16px;
  box-shadow: var(--c-shadow);
}
.c-status__eyebrow {
  margin: 0 0 6px; font-size: .76rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c-muted);
}
.c-status__h {
  margin: 0; font-size: clamp(1.5rem, 6.2vw, 1.9rem); line-height: 1.18;
  font-weight: 800; letter-spacing: -.022em; color: var(--c-navy);
}
.c-status__sub { margin: 8px 0 0; font-size: .98rem; line-height: 1.5; color: var(--c-body); }

.c-when {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 13px 14px;
  background: var(--c-ok-wash); border-radius: var(--c-r-sm);
}
.c-when--soft { background: var(--c-blue-wash); }
.c-when__i { width: 22px; height: 22px; flex: none; color: var(--c-navy); }
.c-when__d { margin: 0; font-weight: 800; font-size: .98rem; color: var(--c-ink); }
.c-when__t { margin: 2px 0 0; font-size: .87rem; color: var(--c-body); }

.c-next {
  margin: 16px 0; padding: 15px 16px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-orange); border-radius: var(--c-r-sm);
}
.c-next__h { margin: 0 0 4px; font-size: .78rem; font-weight: 800; letter-spacing: .05em;
             text-transform: uppercase; color: var(--c-muted); }
.c-next__b { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--c-body); }

/* ---- Exception panel ---------------------------------------------------- */
.c-exc {
  margin-bottom: 16px; padding: 18px 16px;
  border-radius: var(--c-r); border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-muted); background: var(--c-surface);
}
.c-exc--closed { border-left-color: var(--c-bad); background: var(--c-bad-wash); }
.c-exc--attention { border-left-color: var(--c-warn); background: var(--c-warn-wash); }
.c-exc__head { display: flex; align-items: center; gap: 10px; }
.c-exc__i { width: 22px; height: 22px; flex: none; }
.c-exc--closed .c-exc__i { color: var(--c-bad); }
.c-exc--attention .c-exc__i { color: var(--c-warn); }
.c-exc__h { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--c-ink); }
.c-exc__b { margin: 10px 0 0; font-size: .95rem; line-height: 1.55; color: var(--c-body); }
.c-exc__next { margin: 10px 0 0; font-size: .92rem; line-height: 1.55; color: var(--c-body); }
.c-exc__acts { display: grid; gap: 9px; margin-top: 16px; }

/* ---- MOBILE: vertical timeline ------------------------------------------
   A phone scrolls, and a vertical ladder is the shape that reads while
   scrolling. State is carried by the marker, the weight AND a screen-reader
   word — never by colour alone. */
.c-tl {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--c-r); padding: 18px 16px; margin-bottom: 16px;
  box-shadow: var(--c-shadow);
}
.c-tl__list { list-style: none; margin: 0; padding: 0; }
.c-tl__step { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.c-tl__step:last-child { padding-bottom: 0; }

/* The connector runs BETWEEN markers, so it stops at the last one rather than
   trailing off the end of the list. */
.c-tl__rail {
  position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px;
  background: var(--c-line); border-radius: 2px;
}
.c-tl__step:last-child .c-tl__rail { display: none; }
.c-tl__step.is-done .c-tl__rail { background: var(--c-ok); }

.c-tl__marker {
  position: relative; z-index: 1; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-line-2); color: var(--c-muted);
  border: 2px solid var(--c-line-2);
}
.c-tl__glyph { width: 17px; height: 17px; }
.c-tl__step.is-done .c-tl__marker { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.c-tl__step.is-current .c-tl__marker {
  background: var(--c-orange); border-color: var(--c-orange); color: #fff;
  box-shadow: 0 0 0 4px rgba(242, 107, 33, .18);
}

.c-tl__body { min-width: 0; padding-top: 3px; }
.c-tl__t { margin: 0; font-size: .98rem; font-weight: 700; color: var(--c-muted); }
.c-tl__step.is-done .c-tl__t { color: var(--c-body); }
.c-tl__step.is-current .c-tl__t { color: var(--c-ink); font-weight: 800; font-size: 1.05rem; }
.c-tl__d { margin: 3px 0 0; font-size: .88rem; line-height: 1.5; color: var(--c-body); }
.c-tl__extra { margin: 6px 0 0; font-size: .87rem; line-height: 1.5; color: var(--c-navy-soft); font-weight: 600; }
.c-tl__at { margin: 5px 0 0; font-size: .8rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* The horizontal tracker does not exist on a phone. */
.c-track { display: none; }

/* ---- Route rail --------------------------------------------------------- */
.c-route { position: relative; padding-left: 4px; }
.c-route__leg { display: flex; align-items: flex-start; gap: 11px; padding: 5px 0; }
.c-route__dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 6px;
  border: 2.5px solid var(--c-navy); background: var(--c-surface);
}
.c-route__dot--b { border-color: var(--c-orange); }
.c-route__rail {
  position: absolute; left: 9px; top: 22px; height: 20px; width: 2px;
  background: var(--c-line);
}
.c-route__text { font-size: .93rem; line-height: 1.45; color: var(--c-ink); overflow-wrap: anywhere; }

/* ---- Rows --------------------------------------------------------------- */
.c-rows { margin: 14px 0 0; }
.c-rows > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--c-line-2);
}
.c-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.c-rows dt { color: var(--c-muted); font-size: .87rem; flex: none; }
.c-rows dd { margin: 0; font-weight: 700; font-size: .93rem; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 379px) {
  .c-rows > div { flex-direction: column; gap: 2px; }
  .c-rows dd { text-align: left; }
}

/* ---- Pills -------------------------------------------------------------- */
.c-pill {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.c-pill--live      { background: var(--c-blue-wash); color: #1E3F5E; border-color: #CFDFF4; }
.c-pill--done      { background: var(--c-ok-wash);   color: #14532D; border-color: #BBE8CD; }
.c-pill--closed    { background: var(--c-bad-wash);  color: #7F1D1D; border-color: #F3CFCB; }
.c-pill--attention { background: var(--c-warn-wash); color: #7C3E09; border-color: #F5DBB4; }
.c-pill--neutral   { background: var(--c-line-2);    color: var(--c-body); border-color: var(--c-line); }

/* ---- The active job card ------------------------------------------------ */
.c-hero {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg); padding: 20px 18px; margin-bottom: 16px;
  box-shadow: var(--c-shadow);
}
.c-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.c-hero__ref { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--c-ink); }
.c-hero__sub { margin: 10px 0 0; font-size: .95rem; line-height: 1.5; color: var(--c-body); }
.c-hero .c-route { margin-top: 16px; }
.c-hero .c-btn { margin-top: 18px; }

/* ---- List rows ---------------------------------------------------------- */
.c-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; margin-bottom: 10px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--c-r); text-decoration: none; color: inherit;
  min-height: var(--c-tap);
}
.c-item:hover { border-color: var(--c-navy-soft); }
.c-item__main { flex: 1; min-width: 0; }
.c-item__t { margin: 0; font-weight: 800; font-size: .96rem; color: var(--c-ink); }
.c-item__m { margin: 3px 0 0; font-size: .84rem; color: var(--c-muted); overflow-wrap: anywhere; }
.c-item__go { width: 18px; height: 18px; flex: none; color: var(--c-muted); }

.c-req {
  display: block; padding: 16px; margin-bottom: 12px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--c-r); text-decoration: none; color: inherit;
  box-shadow: var(--c-shadow);
}
.c-req:hover { border-color: var(--c-navy-soft); }
.c-req__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.c-req__ref { margin: 0; font-weight: 800; font-size: 1.02rem; color: var(--c-ink); }
.c-req__meta { display: grid; gap: 0; margin: 14px 0 0; }
.c-req__meta > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--c-line-2); }
.c-req__meta > div:last-child { border-bottom: 0; }
.c-req__meta dt { color: var(--c-muted); font-size: .84rem; }
.c-req__meta dd { margin: 0; font-weight: 700; font-size: .88rem; text-align: right; }
.c-req__go {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  font-size: .88rem; font-weight: 700; color: var(--c-navy-soft);
}

/* ---- Buttons ------------------------------------------------------------ */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 20px;
  border: 1px solid var(--c-line); border-radius: var(--c-r-sm);
  background: var(--c-surface); color: var(--c-ink);
  font: inherit; font-size: .98rem; font-weight: 800; cursor: pointer;
  text-decoration: none; text-align: center;
}
.c-btn:hover { border-color: var(--c-navy-soft); }
.c-btn svg { width: 19px; height: 19px; }
.c-btn--primary { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.c-btn--primary:hover { background: var(--c-orange-dk); border-color: var(--c-orange-dk); }
.c-btn--block { display: flex; width: 100%; }
.c-btn[disabled] { opacity: .6; cursor: progress; }
.c-btn__spin {
  width: 17px; height: 17px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: c-spin .7s linear infinite;
}
@keyframes c-spin { to { transform: rotate(360deg); } }
.c-btns { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.c-btns--stack { grid-template-columns: 1fr; }
@media (max-width: 419px) { .c-btns { grid-template-columns: 1fr; } }

/* ---- Alerts ------------------------------------------------------------- */
.c-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px; margin-bottom: 14px;
  border-radius: var(--c-r-sm); font-size: .92rem; line-height: 1.5;
}
.c-alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.c-alert--ok   { background: var(--c-ok-wash);   color: #14532D; border: 1px solid #BBE8CD; }
.c-alert--bad  { background: var(--c-bad-wash);  color: #7F1D1D; border: 1px solid #F3CFCB; }
.c-alert--info { background: var(--c-blue-wash); color: #1E3F5E; border: 1px solid #CFDFF4; }

/* ---- Forms -------------------------------------------------------------- */
.c-field { margin-bottom: 16px; }
.c-field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 7px; color: var(--c-ink); }
.c-field input {
  width: 100%; min-height: var(--c-tap); padding: 12px 14px;
  font: inherit; font-size: 16px;      /* 16px stops iOS zooming on focus */
  color: var(--c-ink); background: var(--c-surface);
  border: 1px solid #D5DEE7; border-radius: var(--c-r-sm);
}
.c-field input:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(242,107,33,.2); }

/* Show/hide sits INSIDE the field, and the input reserves room for it so the
   two never overlap at any text size. */
.c-pw { position: relative; }
.c-pw input { padding-right: 52px; }
.c-pw__eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--c-muted); cursor: pointer;
}
.c-pw__eye:hover { color: var(--c-navy); }
.c-pw__eye svg { width: 20px; height: 20px; }

/* ---- Auth pages --------------------------------------------------------- */

/* ---- The hero film above a sign-in ---------------------------------------
   "I want the video at the top of the page and the sign in below."

   A band, not a background. 16:9 is the film's own shape, but an untamed
   16:9 on a landscape phone would fill the screen and push the form under
   the fold, so height is capped in viewport units and the frame crops
   rather than letterboxes.

   object-fit: cover on the <video> is what makes the cap safe: without it a
   capped box squashes the picture instead of trimming it.

   FULL WIDTH, and width:100% is enough for it because the shell renders
   this OUTSIDE <main> — inside, the portal's own padding was insetting it
   16px a side (343px in a 375px viewport, which is what the owner saw).
   No 100vw and no negative-margin breakout: 100vw counts the scrollbar,
   overshoots by half of one on each edge, and hands back the horizontal
   twitch this project already spent a day removing. */
.c-film {
  position: relative;
  width: 100%;
  margin: 0 0 22px;
  background: #0A1F3A;
  overflow: hidden;
  line-height: 0;
}
.c-film__v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 38vh;
  object-fit: cover;
  object-position: 50% 50%;
}
/* The column already had its own top margin for a page with nothing above
   it. With a film there, that gap is the film's job. */
.c-auth--filmed { margin-top: 0; }

.c-auth__word--lead { display: block; text-align: left; }

/* ---- The install page ----------------------------------------------------
   Where a scanned QR code lands. One job, so it is a short column with one
   dominant action and nothing competing with it. Same 420px measure as the
   sign-in screens, because it is the same kind of moment: a single decision
   on a phone held in one hand. */
.c-install { max-width: 420px; margin: 0 auto; padding: 28px 18px 48px; }
.c-install__h {
  margin: 0 0 10px; font-size: 1.65rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--c-ink); text-align: center;
}
.c-install__lede {
  margin: 0 0 22px; font-size: .98rem; line-height: 1.6;
  color: var(--c-body); text-align: center;
}
.c-install__list {
  margin: 0 0 26px; padding: 0; list-style: none;
  display: grid; gap: 10px;
}
.c-install__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .95rem; line-height: 1.5; color: var(--c-body);
}
/* The tick is a real icon in the markup, not generated content. It was a CSS
   escape once and shipped to a phone as two nonsense characters: the escape
   was mangled on the way into the file and nothing complained.
   An SVG from the same helper as every other icon cannot fail that way. */
.c-install__list li svg {
  width: 18px; height: 18px; flex: none;
  margin-top: 1px; color: var(--c-ok);
}
.c-install__go { margin: 0 0 14px; }
/* Not an error, so it is not styled as one — this is the ordinary state on a
   desktop and inside the installed app. */
.c-install__note {
  margin: 0 0 18px; font-size: .9rem; line-height: 1.55;
  color: var(--c-muted); text-align: center;
}
.c-install__alt { margin: 0; text-align: center; font-size: .92rem; }
/* The same three conditions as the /quote hand-off gate in app.css — the two
   must move together, because this link is a promise about what /quote will
   show. Where the form is hidden there, the offer of it is hidden here. */
@media (min-width: 900px) and (pointer: fine) and (hover: hover) {
  .c-install__alt[data-books-in-browser] { display: none; }
}
.c-install__alt a { color: var(--c-navy-soft); font-weight: 700; }

.c-auth { max-width: 420px; margin: 6vh auto; padding: 0 18px 48px; text-align: left; }
.c-auth__logo { display: block; margin: 0 auto 20px; height: 56px; width: auto; max-width: 100%; }
.c-auth__word { text-align: center; font-weight: 800; font-size: 1.2rem; color: var(--c-navy); margin: 0 0 18px; }
.c-auth__word em { font-style: normal; color: var(--c-orange); }
.c-auth__h { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; text-align: center; color: var(--c-ink); }
.c-auth__sub { margin: 0 0 22px; font-size: .95rem; line-height: 1.55; color: var(--c-muted); text-align: center; }
.c-auth__foot { margin: 18px 0 0; text-align: center; font-size: .9rem; }
.c-auth__foot a { color: var(--c-navy-soft); font-weight: 700; }
.c-auth__foot--muted { color: var(--c-muted); font-size: .85rem; line-height: 1.55; }
@media (max-width: 380px) { .c-auth__logo { height: 48px; } }

/* ---- Misc --------------------------------------------------------------- */
.c-empty { text-align: center; padding: 26px 12px; }
.c-empty__i { width: 34px; height: 34px; color: #A9B7C4; }
.c-empty__t { margin: 12px 0 0; font-weight: 800; font-size: 1rem; color: var(--c-ink); }
.c-empty__b { margin: 6px 0 0; font-size: .9rem; line-height: 1.5; color: var(--c-muted); }

.c-photos { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; }
.c-photos img { width: 100%; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-line); display: block; }

.c-ref-big { margin: 0 0 14px; font-size: 1.6rem; font-weight: 800; color: var(--c-navy); letter-spacing: -.02em; }

.c-faq { margin: 0; }
.c-faq > div { padding: 12px 0; border-bottom: 1px solid var(--c-line-2); }
.c-faq > div:last-child { border-bottom: 0; padding-bottom: 0; }
.c-faq dt { font-weight: 800; font-size: .93rem; color: var(--c-ink); }
.c-faq dd { margin: 5px 0 0; font-size: .9rem; line-height: 1.55; color: var(--c-body); }

/* Columns are a desktop idea; below 900px this is inert and the source order
   is the reading order. */
.c-cols > div + div { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .c-btn__spin { animation-duration: 2s; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   DESKTOP — 900px and up.
   Bottom bar gone, navigation in the header, timeline horizontal, columns.
   ========================================================================== */
@media (min-width: 900px) {
  .c-nav { display: none; }

  .c-wrap { max-width: 1120px; padding: 32px 32px 64px; }

  .c-bar { padding: 14px 32px; gap: 24px; }
  .c-bar__out span { display: inline; }

  .c-topnav { display: flex; align-items: center; gap: 4px; flex: 1; }
  .c-topnav a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: 999px;
    font-size: .92rem; font-weight: 700; text-decoration: none; color: var(--c-body);
  }
  .c-topnav a svg { width: 18px; height: 18px; }
  .c-topnav a:hover { background: var(--c-line-2); color: var(--c-ink); }
  .c-topnav a[aria-current="page"] { background: var(--c-navy); color: #fff; }
  .c-topnav a[aria-current="page"] svg { color: #fff; }

  /* Book stands apart on desktop too: an outlined orange pill that fills on
     hover — an action among destinations, same story as the mobile disc. */
  .c-topnav .c-nav__book { border: 1.5px solid var(--c-orange); color: var(--c-orange); }
  .c-topnav .c-nav__book svg { color: var(--c-orange); }
  .c-topnav .c-nav__book:hover { background: var(--c-orange); color: #fff; }
  .c-topnav .c-nav__book:hover svg { color: #fff; }

  /* Trip details beside each other rather than stacked down a long page. */
  .c-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .c-cols--home { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .c-cols > div + div { margin-top: 0; }

  .c-status { padding: 28px 30px; }
  .c-status__h { font-size: 2rem; }

  /* The vertical ladder is a phone shape. Gone. */
  .c-tl { display: none; }

  /* ---- Horizontal tracker --------------------------------------------- */
  .c-track {
    display: block;
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: var(--c-r); padding: 26px 28px 22px; margin-bottom: 20px;
    box-shadow: var(--c-shadow);
  }
  .c-track__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;
  }
  .c-track__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4px; }

  /* The connector sits behind the markers and stops at the first step, so
     nothing trails off the left edge. */
  .c-track__line {
    position: absolute; top: 17px; right: 50%; left: -50%; height: 2px;
    background: var(--c-line);
  }
  .c-track__step.is-done .c-track__line,
  .c-track__step.is-current .c-track__line { background: var(--c-ok); }

  .c-track__marker {
    position: relative; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-line-2); border: 2px solid var(--c-line-2);
    color: var(--c-muted); font-weight: 800; font-size: .84rem;
  }
  .c-track__glyph { width: 18px; height: 18px; }
  .c-track__step.is-done .c-track__marker { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
  .c-track__step.is-current .c-track__marker {
    background: var(--c-orange); border-color: var(--c-orange); color: #fff;
    box-shadow: 0 0 0 4px rgba(242, 107, 33, .18);
  }
  .c-track__t {
    margin-top: 10px; font-size: .8rem; font-weight: 700; line-height: 1.3;
    color: var(--c-muted); overflow-wrap: anywhere;
  }
  .c-track__step.is-done .c-track__t { color: var(--c-body); }
  .c-track__step.is-current .c-track__t { color: var(--c-ink); font-weight: 800; }
  .c-track__at { margin-top: 4px; font-size: .72rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }

  /* What the horizontal tracker cannot say on its own. */
  .c-track__detail {
    margin-top: 24px; padding: 18px 20px;
    background: var(--c-page); border-radius: var(--c-r-sm);
    border-left: 4px solid var(--c-orange);
  }
  .c-track__detail-h { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--c-ink); }
  .c-track__detail-b { margin: 6px 0 0; font-size: .95rem; line-height: 1.55; color: var(--c-body); }
  .c-track__detail-n { margin: 10px 0 0; font-size: .92rem; line-height: 1.55; color: var(--c-body); }

  /* Said once on desktop — the tracker's own panel already carries it. */
  .c-next { display: none; }

  .c-exc__acts { grid-template-columns: auto auto; justify-content: start; }
  .c-btns { grid-template-columns: auto auto; justify-content: start; }
  .c-btn { min-height: 46px; }
  .c-btn--block { display: inline-flex; width: auto; }
  .c-card--support .c-btn--block { width: auto; }
  .c-auth { margin: 9vh auto; }
}

/* ---- Where the truck is --------------------------------------------------
   MOBILE: a modest panel. The map is capped well below the viewport so the
   current stage stays visible above it and the timeline is a short scroll
   below — a map that fills the screen turns a status page into a map app, and
   the status is what the customer actually came for.

   DESKTOP: a genuinely different composition. Wider, taller, and sat beside
   the trip detail rather than stacked — not the mobile panel stretched.

   The text is the content and the map is the illustration, in both. */
.c-trk {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 14px;
}

.c-trk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.c-trk__h {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-ink);
}

/* The freshness pill. A WORD, not just a colour — "Signal delayed" is the
   information, and the tint only reinforces it. */
.c-trk__pill {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--c-line-2);
  color: var(--c-muted);
}
.c-trk__pill--live     { background: #ECFAF1; color: var(--c-ok); }
.c-trk__pill--updating { background: #FFF7ED; color: var(--c-warn); }
.c-trk__pill--delayed  { background: #FFF7ED; color: var(--c-warn); }

.c-trk__detail {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-body);
}

.c-trk__eta {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
}
.c-trk__eta[hidden] { display: none; }

/* Capped on a phone: tall enough to be a map, short enough that the timeline
   below is still obviously there. */
.c-trk__map {
  margin: 14px 0 0;
  height: 200px;
  max-height: 34vh;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-line-2);
}
.c-trk__map[hidden] { display: none; }

.c-trk__when {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* A stale marker must not shimmer as though it were live. Any animation this
   panel gains later is opt-in and stops here. */
@media (prefers-reduced-motion: reduce) {
  .c-trk,
  .c-trk * {
    animation: none !important;
    transition: none !important;
  }
}

@media (min-width: 900px) {
  .c-trk {
    padding: 22px 24px;
    margin: 0 0 18px;
    /* Beside the detail, not above it: the desktop composition puts the map
       and the trip facts side by side, which is the whole point of the width.
       Below 1100px it falls back to stacked rather than squeezing both. */
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-areas:
      "head   head"
      "map    detail"
      "map    when";
    column-gap: 24px;
    align-items: start;
  }

  .c-trk__head   { grid-area: head; margin-bottom: 6px; }
  .c-trk__map    { grid-area: map;  height: 320px; max-height: none; margin: 8px 0 0; }
  .c-trk__detail { grid-area: detail; margin: 8px 0 0; font-size: 15px; }
  .c-trk__when   { grid-area: when; margin: 10px 0 0; align-self: start; }

  /* The ETA belongs with the detail column on desktop. */
  .c-trk__eta {
    grid-area: detail;
    align-self: end;
    margin: 0;
  }

  .c-trk__h { font-size: 20px; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  /* Not enough width for two real columns; stack rather than crush. */
  .c-trk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "detail" "map" "when";
  }
  .c-trk__eta { grid-area: detail; align-self: auto; margin: 8px 0 0; }
}

/* ---- Scroll clearance for the fixed bottom navigation --------------------
   Same reasoning as the owner shell: the browser scrolls focused and
   programmatically-targeted elements without knowing a fixed bar sits over
   the last 50 pixels. Without this a keyboard user tabbing down the status
   page loses the control they just focused. */
html {
  scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
}

@media (min-width: 900px) {
  html { scroll-padding-bottom: 0; }
}

/* ---- First-party slippy map ----------------------------------------------
   Tiles are <img> elements from our own origin, positioned by transform.
   No canvas, no WebGL, no third-party library — so it renders on anything
   that can show a picture, including the old phones the vendor SDK could not
   support. */
/* NO height here. This class is applied to the .c-trk__map container, which
   already has one (200px on a phone, 320px on desktop) — and because this rule
   comes later in the stylesheet at equal specificity, a height here WINS and
   resolves to 100% of an auto-height parent, which is zero. The map then
   renders correctly into a box nobody can see. */
.c-map { position: relative; width: 100%; }

.c-map__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #E8EDF2;          /* the colour between tiles while they arrive */
  touch-action: none;            /* we handle panning; the page must not scroll */
  cursor: grab;
}
.c-map__surface.is-dragging { cursor: grabbing; }
.c-map__surface:focus-visible { outline: 3px solid var(--c-orange); outline-offset: -3px; }

.c-map__pane,
.c-map__markers { position: absolute; inset: 0; }
.c-map__markers { pointer-events: none; }

.c-map__tile {
  position: absolute;
  top: 0; left: 0;
  width: 256px; height: 256px;
  /* Hairline overlap: adjacent tiles otherwise show a seam at some zooms. */
  outline: 0.5px solid transparent;
  user-select: none;
  -webkit-user-drag: none;
}

/* Markers are centred on their point, so the transform positions the CENTRE
   rather than the corner. */
.c-map__pin {
  position: absolute;
  top: 0; left: 0;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.c-map__pin--truck    { background: var(--c-orange); width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.c-map__pin--pickup   { background: var(--c-navy); }
.c-map__pin--delivery { background: var(--c-ok); }

.c-map__zoom {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 36px: reachable with a thumb without being the size of the map. */
.c-map__btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; line-height: 1;
  color: var(--c-ink);
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
}
.c-map__btn:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }

/* Attribution is a licence condition. Always legible, never covered. */
.c-map__credit {
  position: absolute;
  right: 0; bottom: 0;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.4;
  color: #33424E;
  background: rgba(255, 255, 255, .82);
  border-top-left-radius: 6px;
  pointer-events: none;
}

.c-trk__mapnote {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #FFF7ED;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-warn);
}
.c-trk__mapnote[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .c-map__tile, .c-map__pin { transition: none !important; }
}

/* ---- Install instruction sheet (iOS) ------------------------------------- */
.c-sheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(15, 42, 74, .55);
}
.c-sheet[hidden] { display: none; }

.c-sheet__panel {
  width: 100%; max-width: 480px;
  background: var(--c-surface);
  border-radius: 18px 18px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(15, 42, 74, .25);
}
.c-sheet__h { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--c-navy); }
.c-sheet__p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--c-muted); }
.c-sheet__steps {
  margin: 0 0 18px; padding: 0 0 0 20px;
  font-size: 15px; line-height: 1.9; color: var(--c-ink);
}

@media (min-width: 900px) {
  .c-sheet { align-items: center; }
  .c-sheet__panel { border-radius: 18px; }
}

/* Matches the other header controls; 44px minimum, visible focus. */
.c-bar__btn[data-install-btn] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  color: inherit; background: transparent;
  border: 0; border-radius: 50%; cursor: pointer;
}
.c-bar__btn[data-install-btn]:hover { background: rgba(255, 255, 255, .12); }
.c-bar__btn[data-install-btn]:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }
.c-bar__btn[data-install-btn][hidden] { display: none; }

/* Same reasoning as the owner shell: visual size unchanged, target raised to
   the 44px minimum with a transparent inset overlay. */
.c-bar__btn[data-install-btn] { position: relative; }
.c-bar__btn[data-install-btn]::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   An extra trip.

   Two figures the customer is comparing under time pressure, so the new one is
   larger and the old one is plainly still there — a single number replacing
   another is how a price change reads as a mistake.
   --------------------------------------------------------------------------- */
.c-figures {
  margin: 16px 0 4px;
  display: grid;
  gap: 10px;
}
.c-figures div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.c-figures dt {
  color: var(--c-muted);
  font-size: 15px;
}
.c-figures dd {
  margin: 0;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.c-figures__now dd {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-navy);
}

/* The live trip counter, under the status headline. Quiet: it is context for
   the headline, not a competing one. */
.c-status__trip {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}

@media (min-width: 900px) {
  .c-figures { gap: 12px; }
}

/* ---------------------------------------------------------------------------
   The install band.

   A permanent horizontal invitation at the very top of the screen — never
   inside the installed app, which is what the display-mode query is for.
   On the public shell it is a link to the customer app, where installation
   can actually happen; on the customer shell it is a button that triggers
   the native prompt or the instruction sheet.
   --------------------------------------------------------------------------- */
.install-band {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  background: #12304E;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.install-band__icon { flex: 0 0 auto; font-size: 16px; }
.install-band > span:nth-child(2) { flex: 1; min-width: 0; }
.install-band__cta {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  background: #F26B21;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

@media (display-mode: standalone) {
  .install-band { display: none; }
}

/* The always-there booking door under the dashboard hero: quiet enough to
   leave the hero its one primary action, spaced off the card above it. */
/* "Book another pickup" — the door back in, offered beside a job that is
   already running.

   The owner: "the book another trip needs to be more visible, it blends into
   the page too much, it needs to standout more."

   It blended because of its SHAPE, not its colour. A white fill, a hairline in
   --c-line and the same corner radius as the cards stacked above and below it
   is, to the eye, another card — and it sat directly beneath a solid orange
   button, so the screen had just finished explaining what a button looks like
   here and this was not it.

   So it borrows the brand colour without taking the primary's job: the fill
   stays a wash, the border and the words carry the orange. Beside the solid
   orange "View status" in the card above it is plainly the second action, and
   beside the white cards around it is plainly not one of them.

   The truck rides along because it is the same mark as the Book button in the
   bar below, and two doors to the same place should look related. */
.c-btn--again {
  margin-top: 12px;
  border: 2px solid var(--c-orange);
  background: var(--c-orange-wash);
  color: var(--c-orange-dk);
}
.c-btn--again svg { color: var(--c-orange); }
/* Later in the file than `.c-btn:hover`, which is the only reason this wins —
   they have the same specificity. Do not move it above line 379. */
.c-btn--again:hover {
  border-color: var(--c-orange-dk);
  background: var(--c-surface);
}

/* ---- Change-the-time and cancel ------------------------------------------
   The actions row on the status screen, the slot picker, and the one
   deliberately red button in the customer app. */
.c-status__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.c-status__acts .c-btn { flex: 1 1 auto; }

.c-btn--danger { background: #B3261E; border-color: #B3261E; color: #fff; }
.c-btn--danger:hover { background: #9A1F18; }
.c-btn--quiet-danger { color: #B3261E; border-color: #E3B4B1; }
.c-btn--quiet-danger:hover { border-color: #B3261E; }

.c-resched__times { margin-top: 16px; }
.c-resched__slotset { border: 0; padding: 0; margin: 0 0 14px; }
.c-resched__slotset legend { font-weight: 700; margin-bottom: 8px; }
.c-resched__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.c-slot { position: relative; }
.c-slot input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.c-slot span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; border: 1.5px solid var(--c-line, #d8e0e8); border-radius: 10px;
  font-weight: 700; font-size: .92rem; background: #fff;
}
.c-slot input:checked + span { border-color: #C84A0D; border-width: 2px; background: #FFF7F2; }
.c-slot input:focus-visible + span { outline: 3px solid #12304E; outline-offset: 2px; }

/* House style: buttons wear Title Case. One rule, every button, including
   the ones not written yet — the templates stay sentence case underneath,
   which is also what screen readers hear. */
button, .c-btn { text-transform: capitalize; }

/* ---- Rating a finished trip ---------------------------------------------
   Radios drawn as stars, no script: DOM order is five..one and the row is
   reversed, so input:checked ~ label lights the chosen star and every star
   visually to its LEFT. Hover previews the same way. Each star is a full
   44px target; focus rings ride the labels via :focus-visible on the input. */
.c-rate { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.c-rate__h { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--c-ink); }
.c-rate__sub { margin: 3px 0 10px; font-size: .88rem; color: var(--c-muted); }

.c-rate__stars {
  display: flex; flex-direction: row-reverse; justify-content: flex-end;
  gap: 2px; border: 0; padding: 0; margin: 0 0 12px;
}
.c-rate__stars input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
}
.c-rate__stars label {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; cursor: pointer;
}
.c-rate__stars svg {
  width: 30px; height: 30px;
  fill: none; stroke: var(--c-muted); stroke-width: 1.6;
  transition: transform .08s ease;
}
.c-rate__stars input:checked ~ label svg,
.c-rate__stars input:checked + label svg,
.c-rate__stars label:hover svg,
.c-rate__stars label:hover ~ label svg {
  fill: var(--c-orange); stroke: var(--c-orange-dk);
}
.c-rate__stars label:hover svg { transform: scale(1.12); }
.c-rate__stars input:focus-visible + label {
  outline: 3px solid var(--c-orange); outline-offset: 2px; border-radius: 8px;
}
.c-rate textarea {
  width: 100%; font: inherit; resize: vertical; min-height: 56px;
}
@media (prefers-reduced-motion: reduce) {
  .c-rate__stars svg { transition: none; }
  .c-rate__stars label:hover svg { transform: none; }
}

/* Share-the-app: two buttons side by side, wrapping on the tightest phones. */
.c-share__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.c-share__acts .c-btn { flex: 1 1 auto; }

/* The two prices, side by side, on the load-change decision page. The figure
   that moved is the only thing the customer has to weigh, so it is the
   largest thing on the card. */
.c-rows--compare { margin: 14px 0 16px; }
.c-rows--compare .c-rows__big {
  font-size: 26px; font-weight: 800; color: var(--c-ink); line-height: 1.2;
}
.c-muted { color: var(--c-muted); font-weight: 500; font-size: 14px; }

/* Why the change is proposed. Never optional, so this never renders empty. */
.c-note {
  margin: 4px 0 18px; padding: 12px 14px;
  background: var(--c-surface-muted, #f2f5f8); border-radius: 12px;
}
.c-note__label {
  display: block; margin: 0 0 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-muted);
}
.c-note__body { margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-ink); }
.c-note__body + .c-note__body { margin-top: 6px; }

/* Closed work, folded away. Present and countable, never competing with the
   jobs that are actually happening. */
.c-fold { margin: 26px 0 14px; }
.c-fold__head {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--c-tap); padding: 10px 4px;
  font-size: 1.02rem; font-weight: 800; color: var(--c-ink);
  cursor: pointer; list-style: none;
}
.c-fold__head::-webkit-details-marker { display: none; }
/* The disclosure triangle, drawn rather than borrowed, so it turns with the
   fold and matches the app's own chevrons. */
.c-fold__head::before {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2.5px solid var(--c-muted); border-bottom: 2.5px solid var(--c-muted);
  transform: rotate(-45deg); transition: transform 160ms ease;
}
.c-fold[open] .c-fold__head::before { transform: rotate(45deg); }
.c-fold__count {
  min-width: 24px; padding: 2px 8px; border-radius: 999px;
  background: var(--c-line-2); color: var(--c-body);
  font-size: .8rem; font-weight: 700; text-align: center;
}
.c-fold__head:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .c-fold__head::before { transition: none; }
}


/* ---- Payment due, at the pickup ----------------------------------------
   The one screen in the customer app that asks for money, so it is the one
   place a strong colour is earned. Amber rather than red: this is expected
   and routine, not a problem. */
.c-pay {
  background: #fff;
  border: 1px solid #F0DCC0;
  border-left: 4px solid #B45309;
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 14px;
}
.c-pay__h {
  margin: 0 0 2px;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: #7A4A12;
}
.c-pay__amount { margin: 0; font-size: 2rem; font-weight: 800; color: var(--c-navy, #0F2A4A); }
.c-pay__sub { margin: 2px 0 14px; font-size: .92rem; color: var(--c-muted, #5B6B7C); }
/* ---- When we can collect -------------------------------------------------
   A read-only calendar on the home screen, in the same language the day
   picker in a request uses: a day that cannot be sold is crossed out, and
   today wears a ring. Deliberately NOT the same components — this one is
   spans rather than buttons, because nothing here is choosable and a control
   that looks pressable but is not is its own kind of lie.
   ------------------------------------------------------------------------ */
/* The customer number in the app bar. Present on every screen, quiet on all
   of them: tabular figures so it reads as a number rather than a word, and a
   size that survives being read out without competing with the page. */
.c-bar__ref {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--c-surface-muted, #EEF2F6);
  color: var(--c-navy-soft, #33506F);
  font-size: .78rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}

.c-avail__head {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center; gap: 8px; margin-bottom: 12px;
}
.c-avail__title { text-align: center; font-size: 1rem; color: var(--c-navy, #0F2A4A); }
.c-avail__nav {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--c-line, #E2E8F0); background: #fff;
  color: var(--c-navy, #0F2A4A); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.c-avail__nav:disabled { opacity: .3; cursor: default; }
.c-avail__nav .c-ico { width: 18px; height: 18px; }
.c-avail__nav:first-child .c-ico { transform: none; }

.c-avail__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px; text-align: center;
}
.c-avail__dow {
  font-size: .64rem; font-weight: 800; letter-spacing: .06em;
  color: var(--c-muted, #5B6B7C); text-transform: uppercase; padding: 2px 0 6px;
}
.c-avail__day {
  display: grid; place-items: center;
  height: 38px; border-radius: 999px;
  font-size: .92rem; font-weight: 700;
}
/* A day is a button now — the owner asked to tap one and see its times —
   so it needs a button's reset and a thumb's target. */
.c-avail__day {
  border: 0; padding: 0; font: inherit; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
button.c-avail__day { cursor: pointer; }

/* THREE DEGREES OF BUSY, and a fourth state that is not a degree at all.
   Green open, yellow once more than half the start times are gone, light red
   when they all are — and a day the calendar refuses outright is struck
   through rather than coloured, because closed is not a kind of full. */
.c-avail__day.is-open { color: var(--c-navy, #0F2A4A); background: #ECFAF1; }
.c-avail__day.is-busy { color: #7A4A12; background: #FDF3DC; }
.c-avail__day.is-full { color: #8C2F2F; background: #FCE9E9; }
.c-avail__day.is-shut {
  color: #A9B4C0;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #C2CBD5;
}
.c-avail__day.is-today { box-shadow: inset 0 0 0 2px var(--c-orange, #E2570F); }
.c-avail__day.is-picked { box-shadow: inset 0 0 0 2px var(--c-navy, #0F2A4A); }
button.c-avail__day:active { transform: scale(.94); }

/* The times for whichever day was tapped. */
.c-avail__times { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-line, #E2E8F0); }
.c-avail__tt { margin: 0; font-weight: 800; color: var(--c-navy, #0F2A4A); }
.c-avail__tm { margin: 2px 0 0; font-size: .85rem; color: var(--c-muted, #5B6B7C); }
.c-avail__slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.c-avail__slot {
  padding: 7px 11px; border-radius: 8px;
  background: #ECFAF1; box-shadow: inset 0 0 0 1px #A7D8BB;
  font-size: .84rem; font-weight: 700; color: #14532D;
}

.c-avail__key {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  margin: 14px 0 0; font-size: .8rem; color: var(--c-muted, #5B6B7C);
}
.c-avail__k { display: inline-flex; align-items: center; gap: 6px; }
.c-avail__sw { width: 14px; height: 14px; border-radius: 999px; flex: none; }
.c-avail__sw--open { background: #ECFAF1; box-shadow: inset 0 0 0 1px #A7D8BB; }
.c-avail__sw--busy { background: #FDF3DC; box-shadow: inset 0 0 0 1px #E3C98A; }
.c-avail__sw--full { background: #FCE9E9; box-shadow: inset 0 0 0 1px #E2ADAD; }
.c-avail__sw--shut { background: #EEF2F6; box-shadow: inset 0 0 0 1px #C2CBD5; }
.c-avail__note {
  margin: 8px 0 0; text-align: center;
  font-size: .82rem; line-height: 1.45; color: var(--c-muted, #5B6B7C);
}
.c-avail__note[hidden] { display: none; }

/* The invitation. Sits between the month and the grid it is about. */
.c-avail__hint {
  margin: 0 0 10px; text-align: center;
  font-size: .85rem; font-weight: 700; color: var(--c-navy-soft, #33506F);
}

.c-pay__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.c-pay__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 13px;
  background: #FFF8ED; border-radius: 11px;
}
.c-pay__label { font-weight: 700; color: var(--c-navy, #0F2A4A); }
.c-pay__handle {
  font-weight: 700; color: #7A4A12;
  /* An account handle is read aloud and typed into another app, so it must
     not be shortened, prettified or wrapped mid-token. */
  word-break: break-all; text-align: right;
}
.c-pay__handle--plain { font-weight: 500; color: var(--c-muted, #5B6B7C); }

/* The copy button. Squared off rather than a pill: it is a tool, and the
   rounded ends read as a chip — something to be chosen — next to a row of
   values that are not choices. 44px tall for a thumb on a driveway, and a
   fixed width so "Copied" does not make the button change size under the
   finger that just pressed it, and so both rows match exactly. */
.c-pay__copy {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; flex: none;
  min-height: 44px; min-width: 104px; padding: 0 14px;
  border: 1px solid #E3D3B8; border-radius: 8px;
  background: #fff; color: #7A4A12;
  font: inherit; font-size: .82rem; font-weight: 700; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.c-pay__copy svg { width: 15px; height: 15px; flex: none; }
.c-pay__copy:active { background: #FBF1E2; transform: scale(.97); }
.c-pay__copy.is-copied { border-color: #A7D8BB; background: #ECFAF1; color: #14532D; }

/* THE ROW BENDS RATHER THAN CRUSHING THE HANDLE.
   Three things on a 390px screen is one too many: "Cash App" wrapped to two
   lines and $chrismorgan2016 broke across two as "$chrismorgan20 / 16",
   which is precisely what an account handle must never do. The label keeps
   its line; the handle and its button are one unit and drop to a line of
   their own when they will not fit beside it. */
/* Top-aligned, so the method's name sits on the same line as the value it
   names rather than floating half way down a two-line stack. */
.c-pay__row { align-items: flex-start; flex-wrap: wrap; row-gap: 6px; }
.c-pay__label { white-space: nowrap; }
/* Always stacked, never side by side. A handle is read back character by
   character, so it takes the whole width and never breaks mid-token —
   "chrismorgan007@gmail.co / m" is not an address anybody can dictate. */
.c-pay__value {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  margin-left: auto; min-width: 0;
}
.c-pay__handle { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .c-pay__copy:active { transform: none; }
  button.c-avail__day:active { transform: none; }
}
.c-pay__note { margin: 12px 0 0; font-size: .9rem; color: var(--c-muted, #5B6B7C); }
.c-pay .c-btn { margin-top: 12px; }

.c-pay__done {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding: 13px 15px;
  background: #ECFAF1; border-radius: 12px;
  font-size: .95rem; color: #14532D;
}
.c-pay__done svg { width: 20px; height: 20px; flex: none; color: #15803D; }


/* ---- The rating popup ---------------------------------------------------
   The same element the page renders inline, lifted. Only the positioning
   changes, so the form cannot look or behave differently in the two states. */
.c-rate-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 39, 64, .55);
}
.c-rate-wrap.is-popup {
  position: fixed; z-index: 91;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(94vw, 460px);
  max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(14, 39, 64, .5);
  padding: 22px 18px;
}
/* The page behind must not scroll under the overlay. */
body.rate-open { overflow: hidden; }

.c-rate__later {
  display: block; width: 100%;
  margin-top: 10px; padding: 12px;
  background: none; border: 0;
  font: inherit; font-weight: 600;
  color: var(--c-muted, #5B6B7C);
  text-decoration: underline; cursor: pointer;
}
.c-rate__later[hidden] { display: none; }


/* ---- Trips still waiting on a rating -----------------------------------
   Only ever rendered when there is at least one, so there is no empty state
   to style — a permanent "nothing to rate" panel would be furniture. */
.c-unrated__lead { margin: 0 0 12px; font-size: .95rem; color: var(--c-muted, #5B6B7C); }
.c-unrated__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.c-unrated__row {
  display: grid; gap: 10px;
  padding-top: 12px; border-top: 1px solid var(--c-line, #E4E9EF);
}
.c-unrated__row:first-child { padding-top: 0; border-top: 0; }
.c-unrated__where { display: grid; gap: 6px; min-width: 0; }
.c-unrated__when { font-size: .82rem; color: var(--c-muted, #5B6B7C); }
.c-unrated__btn { justify-self: start; min-width: 120px; }

@media (min-width: 640px) {
  /* Wide enough to put the action beside the trip rather than under it. */
  .c-unrated__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .c-unrated__btn { justify-self: end; }
}