/* delivery.css — owned by WP-DELIVERY. Tokens only (docs/vfx-master-spec.md §1 rule 5).
   Every rule here is the still twin of a motion in delivery.js: a state class
   or a layout the screen reads correctly with FC.vfx stubbed or motion reduced.
   Motion is transform/opacity only; durations come from --fc-m-*. */

/* ------------------------------------------------------------- VEHICLE */
/* The rider's own vehicle as a Cycles frame of the modelled prop; the icon
   stands in until renders-props.js is populated. */
.del-vehicle {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--fc-r-md);
  background: var(--on-glass-chip);
  transform-origin: 50% 100%;
  will-change: transform;
}
.del-vehicle > img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center bottom; }
.del-vehicle.is-icon { color: var(--txt-3); }
.del-vehicle--lg { width: 96px; height: 96px; border-radius: var(--fc-r-lg); }
/* "Is it alive?" — on shift the vehicle sits on a green plate and idles with
   a low bob: the one ambient loop on the dash. Off shift it is still. */
.del-vehicle.is-running { background: color-mix(in srgb, var(--fc-green-500) 22%, transparent); color: var(--accent); }
.del-vehicle.is-running > img,
.del-vehicle.is-running > svg { animation: del-idle calc(var(--fc-m-epic) * 2) var(--fc-ease) infinite; }
@keyframes del-idle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -2px, 0); }
}

/* ---------------------------------------------------------------- SHIFT */
.del-shift { transition: background var(--fc-m-medium) var(--fc-ease); }
.del-shift.is-on { background: linear-gradient(130deg, color-mix(in srgb, var(--fc-green-500) 20%, transparent), var(--glass-fill)); }
.del-vehicle-card { display: flex; align-items: center; gap: var(--fc-s-4); }

/* ------------------------------------------------------------------ ETA */
.del-due { align-items: center; }
.del-eta { display: inline-flex; align-items: center; font-size: var(--fc-t-xs); font-weight: var(--fc-w-bold); color: var(--txt-1); }

/* ---------------------------------------------------------------- ROUTE */
/* The rider path shares the map's viewBox and slice fit, so a point in plan
   space lands on the same pixel in both layers. Pointer events stay with the
   pins underneath. */
.del-route-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.del-route-layer .vfx-path { width: 100%; height: 100%; }
.del-route-layer.is-disc .vfx-rider circle { r: 8; }
.del-route-layer .vfx-rider image { pointer-events: none; }
.mapbox .del-route-layer .vfx-path-trail { stroke: var(--txt-3); opacity: .55; }
.mapbox .del-route-layer .vfx-path-done { stroke: var(--fc-green-600); }
.del-tail { height: var(--fc-s-4); flex: none; }

/* ----------------------------------------------------------------- STOP */
.del-status { flex: none; white-space: nowrap; align-self: flex-start; }
.del-item-img { width: 34px; height: 34px; flex: none; border-radius: var(--fc-r-xs); overflow: hidden; background: var(--on-glass-chip); }
.del-cod { position: relative; }
.del-cash { font-variant-numeric: tabular-nums; }

/* Proof of delivery slot: dashed until the photo lands, then solid. */
.del-pod {
  width: 104px;
  min-height: 104px;
  flex: none;
  display: grid;
  place-items: center;
  padding: var(--fc-s-2);
  border: 2px dashed var(--line);
  border-radius: var(--fc-r-md);
  background: var(--on-glass-chip);
  color: var(--txt-2);
  cursor: pointer;
  transition: border-color var(--fc-m-quick) var(--fc-ease), background var(--fc-m-quick) var(--fc-ease);
}
.del-pod:active { transform: scale(var(--fc-press)); }
.del-pod.is-taken { border-style: solid; border-color: var(--fc-success); background: color-mix(in srgb, var(--fc-success) 10%, transparent); cursor: default; }
.del-polaroid { width: 100%; text-align: center; }
.del-polaroid-img {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  padding: var(--fc-s-1);
  border-radius: var(--fc-r-xs);
  background: var(--glass-fill-hard);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  transform: rotate(-3deg);
}

/* OTP: four cells that fill as the customer reads the code out; the real
   input sits invisibly over them so the numeric keyboard and autofill work. */
.del-otp { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fc-s-2); }
.del-otp-cell {
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--fc-r-sm);
  border: 1px solid var(--line);
  background: var(--glass-fill);
  font-size: var(--fc-t-xl);
  font-weight: var(--fc-w-bold);
  font-variant-numeric: tabular-nums;
  color: var(--txt-1);
  transition: border-color var(--fc-m-fast) var(--fc-ease), background var(--fc-m-fast) var(--fc-ease);
}
.del-otp-cell.is-filled { border-color: var(--accent); background: color-mix(in srgb, var(--fc-green-500) 12%, transparent); }
.del-otp-cell.is-pop { animation: del-pop var(--fc-m-quick) var(--fc-ease-spring) both; }
@keyframes del-pop {
  from { transform: scale(.7); }
  to   { transform: scale(1); }
}
.del-otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: var(--fc-t-lg); caret-color: transparent; }
.del-otp:focus-within .del-otp-cell { border-color: var(--accent); }

/* Close-out: the drawn check, the fee that was written, and Pip. */
.del-closeout { position: relative; }
.del-check { width: 48px; height: 48px; flex: none; display: grid; place-items: center; color: var(--fc-success); }
.del-check .vfx-check { width: 100%; height: 100%; }
.del-pip { width: 64px; height: 72px; margin: 0; }

/* ------------------------------------------------------------- EARNINGS */
.del-week { position: relative; }
.ops-tile.is-settled { position: relative; overflow: hidden; }
.del-incentive { position: relative; padding: var(--fc-s-2) 0; }
.del-incentive.is-done .fc-track-fill { background: var(--fc-success); }
.fc-track--thin { height: 4px; }
.del-settle { position: relative; display: inline-block; padding-right: var(--fc-s-1); }
.del-settle.is-settled { color: var(--fc-success); font-weight: var(--fc-w-semi); }
.del-settle .vfx-stamp { top: 50%; right: auto; left: 100%; transform: translate3d(0, -50%, 0) rotate(var(--vfx-rot, -8deg)); }
.del-settle .vfx-stamp > b { font-size: var(--fc-t-2xs); padding: 0 var(--fc-s-1); }

/* The verdict on a small tile sits clear of the figure. */
.ops-tile.is-settled .vfx-stamp > b { font-size: var(--fc-t-2xs); padding: 0 var(--fc-s-1); }

/* -------------------------------------------------------------- PROFILE */
/* Five outlined stars with a filled copy clipped to the rating on top. The
   overlay's width is set once; only its scaleX sweeps in. */
.del-stars { position: relative; display: inline-block; line-height: 0; color: var(--fc-warn); }
.del-stars-row { display: flex; gap: 2px; white-space: nowrap; }
.del-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; transform-origin: left center; will-change: transform; }

/* ------------------------------------------------------ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .del-vehicle.is-running > img,
  .del-vehicle.is-running > svg { animation: none; }
  .del-otp-cell.is-pop { animation: none; }
  .del-polaroid-img { transform: none; }
}