/* demo-fleetfault.css - the landing page's hero demo (render.mjs landingDemo, static/demo-fleetfault.js): the driver's
   phone and the manager's screen, drawn after FleetFault's real screens in the kit's tokens only. Linked on the landing
   page alone, after product.css.

   The kit's demo frame (.lp-demo > .lp-demo__fit > .lp-demo__stage, landing.css and demo.js) is used as it is: nothing
   here touches it. It draws no box, and the stage paints no ground: the phone and the browser window stand on the page
   itself, casting the kit's --lp-demo-shadow. Everything is scoped under .ffd, the demo's own class.

   Inside the stage the sizes are px, on purpose. The stage is a picture of a screen at a fixed design size - 1200 x 744
   with both screens side by side, or 400 x 744 on a phone (.ffd--narrow, one screen at a time) - which demo.js scales
   to the column. Sizes in rem would grow with the interface-size setting and spill out of that fixed frame. The frame
   still clips, so the screens keep clear of its edges by more than their shadow reaches.

   What the tour changes is state on the stage, read here:
     data-beat   driver | manager   whose screen shows, on a phone
     data-screen camera | page      the driver's phone: the camera finding the sticker, or the sticker's page
     data-view   inbox | report | vehicle
     data-state  new | in_progress | fixed   the van's report
     is-up (the phone raised in front of the van), is-aim (the camera's corners on the code), is-found (the address it
     read), has-photo, is-filed, is-arrived (the report is in the inbox), is-mail (the alert e-mail shows), is-read,
     is-noticed ("Status changed."), is-hist (its line in the vehicle's history) */

@media (min-width: 576px) {
  .ffd { max-width: 1200px; margin-inline: auto; }
  .ffd.ffd--narrow { max-width: 400px; }
}

.ffd-stage {
  width: 1200px;
  height: 744px;
  overflow: hidden;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.45;
  text-align: start;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.ffd--narrow .ffd-stage { width: 400px; }
/* Zero specificity, so every class below sets its own margins over it. */
:where(.ffd-stage) :where(p, dl, dd, ol) { margin: 0; }
.ffd-stage ol { padding: 0; list-style: none; }
:where(.ffd-stage) svg { width: 16px; height: 16px; flex: none; }

/* ── The van, the phone and the manager's window ─────────────────────── */
/* Side by side, the phone is drawn at 85% (289 x 571, centred on the window's height) and the window is 782 wide; the
   pair is centred on the stage, 40px from either edge. The phone is scaled rather than narrowed, so its page lays out
   as it does at a phone's width. The phone itself is the kit's (.lp-phone, landing.css): its bezel, its front camera,
   its shadow. Before it, the van stands in its place: the phone rises in front of it from below the stage (is-up). */
.ffd-phone {
  z-index: 2;
  left: 40px;
  top: 74px;
  width: 340px;
  height: 672px;
  scale: 0.85;
  transform-origin: 0 0;
  transition: opacity 0.45s ease, transform 0.75s var(--ease-out-soft, cubic-bezier(0.2, 0.8, 0.2, 1));
}
/* Far enough down that the phone, scaled, is wholly under the stage's bottom edge. */
.ffd-stage:not(.is-up) .ffd-phone { transform: translateY(125%); }

/* The van (render.mjs DEMO_VAN_ART), 600 x 440 at one unit a pixel: its cab beside the window, its back half behind it.
   The same van in both themes - white, the cab dark inside - as a photo would be; only its stripe is the theme's. */
.ffd-van {
  position: absolute;
  left: 18px;
  top: 116px;
  width: 600px;
  height: 440px;
  transition: opacity 0.45s ease;
}
/* Once the sticker's page is open the van has done its part: it goes, and the phone and the window are the picture. */
.ffd-stage[data-screen='page'] .ffd-van { opacity: 0; transition-duration: 0.6s; }
.ffd-van svg.ffd-van__art { position: absolute; inset: 0; width: 600px; height: 440px; overflow: visible; }
/* Smoke from the front wheel: the brakes raced hot. Soft grey puffs rise out of the wheel arch, drift forward and up, grow
   and fade, one after another with negative delays so the plume is already going on the first frame. A mid grey reads
   over the white van, on the light page and on the dark one. Nothing shows without the animation (reduced motion). */
.ffd-smoke { position: absolute; left: 76px; top: 350px; width: 1px; height: 1px; }
.ffd-smoke i {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(118 118 118 / 0.8), rgb(136 136 136 / 0.5) 42%, rgb(150 150 150 / 0) 70%);
  filter: blur(2.5px);
  opacity: 0;
  animation: ffd-smoke 2.8s cubic-bezier(0.25, 0.6, 0.4, 1) infinite;
}
.ffd-smoke i:nth-child(2) { left: 18px; top: 6px; animation-delay: -0.55s; }
.ffd-smoke i:nth-child(3) { left: 30px; top: 14px; animation-delay: -1.1s; }
.ffd-smoke i:nth-child(4) { left: 8px; top: 2px; animation-delay: -1.6s; }
.ffd-smoke i:nth-child(5) { left: 24px; top: 10px; animation-delay: -2.15s; }
.ffd-smoke i:nth-child(6) { left: 2px; top: 12px; animation-delay: -2.45s; }
.ffd-smoke i:nth-child(7) { left: 14px; top: 16px; animation-delay: -0.85s; }
.ffd-smoke i:nth-child(8) { left: 34px; top: 4px; animation-delay: -1.9s; }
.ffd-stage[data-screen='page'] .ffd-smoke i { animation-play-state: paused; }
@keyframes ffd-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  10% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-52px, -118px) scale(1.9); }
}
.ffd-van__shadow { fill: color-mix(in srgb, var(--c-scrim) 26%, transparent); }
.ffd-van__body { fill: color-mix(in srgb, var(--c-scrim-ink) 90%, var(--c-scrim)); stroke: color-mix(in srgb, var(--c-scrim) 35%, transparent); stroke-width: 1.5; stroke-linejoin: round; }
.ffd-van__liner { fill: color-mix(in srgb, var(--c-scrim) 88%, var(--c-scrim-ink)); }
.ffd-van__stripe { fill: var(--c-accent); }
.ffd-van__glass { fill: color-mix(in srgb, var(--c-accent) 18%, color-mix(in srgb, var(--c-scrim-ink) 52%, var(--c-scrim))); }
.ffd-van__glass--far { opacity: 0.6; }
.ffd-van__light { fill: color-mix(in srgb, var(--c-warn) 35%, var(--c-scrim-ink)); stroke: color-mix(in srgb, var(--c-scrim) 30%, transparent); }
.ffd-van__trim { fill: color-mix(in srgb, var(--c-scrim) 74%, var(--c-scrim-ink)); }
.ffd-van__seam { fill: none; stroke: color-mix(in srgb, var(--c-scrim) 28%, transparent); stroke-width: 1.5; }
.ffd-van__in { fill: color-mix(in srgb, var(--c-scrim) 84%, var(--c-scrim-ink)); }
.ffd-van__wheel { fill: none; stroke: color-mix(in srgb, var(--c-scrim) 62%, var(--c-scrim-ink)); stroke-width: 5; }
.ffd-van__seat { fill: color-mix(in srgb, var(--c-scrim) 62%, var(--c-scrim-ink)); }
.ffd-van__base { fill: color-mix(in srgb, var(--c-scrim) 72%, var(--c-scrim-ink)); }
.ffd-van__tyre { fill: color-mix(in srgb, var(--c-scrim) 92%, var(--c-scrim-ink)); }
.ffd-van__rim { fill: color-mix(in srgb, var(--c-scrim-ink) 62%, var(--c-scrim)); }
.ffd-van__hub { fill: color-mix(in srgb, var(--c-scrim) 70%, var(--c-scrim-ink)); }
.ffd-van__door { fill: color-mix(in srgb, var(--c-scrim) 48%, var(--c-scrim-ink)); stroke: color-mix(in srgb, var(--c-scrim) 55%, transparent); stroke-width: 1.5; stroke-linejoin: round; }
.ffd-van__edge { fill: color-mix(in srgb, var(--c-scrim-ink) 90%, var(--c-scrim)); }
.ffd-van__grip { fill: none; stroke: color-mix(in srgb, var(--c-scrim) 70%, var(--c-scrim-ink)); stroke-width: 5; stroke-linecap: round; }

/* The sticker, as stickerHtml prints it (60 x 80 mm: the ask, the code, the plate, "or", the address, the brand), drawn
   at the camera's size and shrunk onto the seat base. Paper is paper in either theme. */
.ffd-sticker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 210px;
  height: 280px;
  padding: 12px 12px 10px;
  border-radius: 6px;
  background: var(--c-scrim-ink);
  color: var(--c-scrim);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-scrim) 18%, transparent);
  text-align: center;
  line-height: 1.2;
}
.ffd-sticker > span { display: block; }
.ffd-sticker__ask { font-size: 13px; font-weight: 700; }
.ffd-sticker__qr { position: relative; width: 140px; height: 140px; }
.ffd-sticker__qr svg { width: 140px; height: 140px; }
.ffd-sticker__plate { font-family: var(--font-mono); font-size: 25px; font-weight: 700; line-height: 1.05; }
.ffd-sticker__or { font-size: 8.5px; }
.ffd-sticker__url { max-width: 100%; font-family: var(--font-mono); font-size: 8.5px; line-height: 1.25; overflow-wrap: anywhere; }
.ffd-sticker__brand { font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; }
/* On the seat base (DEMO_VAN_ART's x 232-310, y 310-362): 30 x 40, a seventh of its size. */
.ffd-sticker--seat { left: 256px; top: 316px; transform: scale(0.1429); transform-origin: 0 0; box-shadow: none; }

/* The camera, finding the sticker: the seat base up close under the cushion's edge, the code's corners, the address. */
.ffd-camera,
.ffd-page { position: absolute; inset: 0; transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s; }
.ffd-camera {
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--c-scrim-ink) 9%, transparent), transparent 62%),
    color-mix(in srgb, var(--c-scrim) 72%, var(--c-scrim-ink));
}
.ffd-camera__cushion {
  position: absolute;
  left: -30px;
  right: -30px;
  top: -40px;
  height: 170px;
  border-radius: 0 0 50% 50% / 0 0 48px 48px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-scrim) 66%, var(--c-scrim-ink)), color-mix(in srgb, var(--c-scrim) 56%, var(--c-scrim-ink)));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--c-scrim) 55%, transparent);
}
.ffd-camera__floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  background: color-mix(in srgb, var(--c-scrim) 86%, var(--c-scrim-ink));
}
.ffd-sticker--cam { left: 61px; top: 178px; }
.ffd-aim { position: absolute; inset: -20px; opacity: 0; transition: inset 0.35s var(--ease-out-soft, ease-out), opacity 0.3s ease; }
.ffd-aim i { position: absolute; width: 28px; height: 28px; border: 0 solid var(--c-warn); }
.ffd-aim i:nth-child(1) { left: 0; top: 0; border-width: 3.5px 0 0 3.5px; border-top-left-radius: 9px; }
.ffd-aim i:nth-child(2) { right: 0; top: 0; border-width: 3.5px 3.5px 0 0; border-top-right-radius: 9px; }
.ffd-aim i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3.5px 3.5px; border-bottom-left-radius: 9px; }
.ffd-aim i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3.5px 3.5px 0; border-bottom-right-radius: 9px; }
.ffd-stage.is-aim .ffd-aim { opacity: 1; inset: -12px; }
.ffd-stage.is-found .ffd-aim { inset: -6px; }
.ffd-found {
  position: absolute;
  left: 50%;
  top: 482px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--c-warn);
  color: var(--c-scrim);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out-soft, ease-out);
}
.ffd-found svg { width: 15px; height: 15px; }
.ffd-stage.is-found .ffd-found { opacity: 1; transform: translate(-50%, 0); }
.ffd-shutter {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  border: 4px solid var(--c-scrim-ink);
  border-radius: 50%;
}
.ffd-shutter::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--c-scrim-ink); }
.ffd-stage[data-screen='page'] .ffd-camera { opacity: 0; visibility: hidden; }
.ffd-stage[data-screen='camera'] .ffd-page { opacity: 0; transform: translateY(16px); visibility: hidden; }

/* The sticker's page: the product's own bar under the kit's front camera. */
.ffd-phone__bar {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--c-line);
}
.ffd-win {
  position: absolute;
  z-index: 1;
  left: 377px;
  top: 24px;
  width: 782px;
  height: 672px;
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  border-radius: 14px;
  background: var(--c-canvas);
  box-shadow: var(--lp-demo-shadow);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.ffd-win__chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
.ffd-dots { display: flex; gap: 6px; }
.ffd-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line-strong); }
.ffd-url {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--c-canvas);
  color: var(--c-ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.ffd-url svg { width: 12px; height: 12px; color: var(--c-ok); }
.ffd-stage:not([data-view='inbox']) .ffd-url--inbox,
.ffd-stage:not([data-view='report']) .ffd-url--report,
.ffd-stage:not([data-view='vehicle']) .ffd-url--vehicle { display: none; }
.ffd-appbar {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 52px;
  padding: 0 20px;
  border-bottom: 1px solid var(--c-line);
}
.ffd-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; }
.ffd-mark svg { width: 22px; height: 22px; color: var(--c-accent); }
.ffd-cog { display: inline-flex; color: var(--c-ink-muted); }
.ffd-cog svg { width: 18px; height: 18px; }
.ffd-appbar .ffd-cog { margin-left: auto; }
.ffd-nav { display: flex; align-self: stretch; gap: 18px; }
.ffd-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-ink-muted);
  font-size: 13.5px;
}
.ffd-nav__item svg { width: 15px; height: 15px; opacity: 0.7; }
.ffd-stage:not([data-view='vehicle']) [data-ffd-nav='dashboard'],
.ffd-stage[data-view='vehicle'] [data-ffd-nav='vehicles'] { color: var(--c-ink); }
.ffd-stage:not([data-view='vehicle']) [data-ffd-nav='dashboard'] svg,
.ffd-stage[data-view='vehicle'] [data-ffd-nav='vehicles'] svg { color: var(--c-accent); opacity: 1; }
.ffd-stage:not([data-view='vehicle']) .ffd-nav [data-ffd-nav='dashboard']::after,
.ffd-stage[data-view='vehicle'] .ffd-nav [data-ffd-nav='vehicles']::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-accent);
}
/* The tab bar is how a phone shows the same three places (.mx-tabs); a wide screen has them in its bar. */
.ffd-tabs { display: none; }

/* A screen's content scrolls natively, so the tour scrolls it the way a person would (demo.js scrollTo). */
.ffd-scroll,
.ffd-views {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.ffd-scroll::-webkit-scrollbar,
.ffd-views::-webkit-scrollbar { display: none; }
.ffd-scroll { top: 82px; padding: 14px 16px 28px; }
.ffd-views { top: 92px; padding: 20px 24px 28px; }

/* ── Type and the small parts, after the kit's app layer ─────────────── */
.ffd-h1 { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.ffd-lead { margin-top: 6px; color: var(--c-ink-muted); font-size: 13.5px; line-height: 1.5; }
.ffd-label {
  margin: 14px 0 7px;
  color: var(--c-ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ffd-plate { font-family: var(--font-mono); letter-spacing: 0.02em; }
.ffd-sub { color: var(--c-ink-subtle); font-size: 12px; }
.ffd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ffd-badge svg { width: 8px; height: 8px; }
.ffd-badge--accent { border-color: color-mix(in srgb, var(--c-accent) 30%, transparent); color: var(--c-accent); }
.ffd-badge--ok { border-color: color-mix(in srgb, var(--c-ok) 30%, transparent); color: var(--c-ok); }
.ffd-badge--warn { border-color: color-mix(in srgb, var(--c-warn) 35%, transparent); color: var(--c-warn); }
.ffd-badge--rec { border-color: color-mix(in srgb, var(--c-rec) 35%, transparent); color: var(--c-rec); }
.ffd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ffd-btn--primary { background: var(--c-accent); color: var(--c-accent-ink); }
.ffd-btn--ghost { border-color: var(--c-line-strong); color: var(--c-ink); }
.ffd-btn--wide { width: 100%; }
.ffd-panel {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
.ffd-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-subtle);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ffd-panel__head .ffd-sub { font-family: var(--font-mono); letter-spacing: 0; }
.ffd-panel__body { padding: 12px 14px; }
.ffd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
/* The sticker page stacks these two; side by side here, so the still frame has room for both questions. */
.ffd-facts--one { gap: 6px 14px; margin-top: 6px; }
.ffd-facts dt { color: var(--c-ink-muted); font-size: 12px; }
.ffd-facts dd { font-size: 14px; overflow-wrap: anywhere; }
.ffd-link { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── The driver's phone: the sticker's page (reportFormBody) ─────────── */
.ffd-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ffd-pill {
  padding: 6px 11px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
}
.ffd-pill.is-on { border-color: var(--c-accent); }
.ffd-vehicle {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.ffd-plate--big { font-size: 24px; font-weight: 600; line-height: 1.2; }
.ffd-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ffd-choices--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ffd-choice {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 11px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  font-size: 13.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ffd-choices--three .ffd-choice { justify-content: center; text-align: center; padding-inline: 6px; }
.ffd-choice.is-on { border-color: var(--c-accent); background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); }
.ffd-area {
  min-height: 74px;
  padding: 9px 11px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ffd-area.is-focus { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.ffd-area.is-focus::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 16px;
  margin-left: 1px;
  vertical-align: -3px;
  background: var(--c-accent);
  animation: ffd-caret 1s steps(1) infinite;
}
.ffd-drop {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 8px;
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--radius-md);
}
.ffd-drop__cam {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-ink-muted);
}
.ffd-drop__cam svg { width: 20px; height: 20px; }
.ffd-drop__thumb { display: block; width: 64px; height: 48px; }
.ffd-stage:not(.has-photo) .ffd-drop__thumb { display: none; }
.ffd-stage.has-photo .ffd-drop__thumb { animation: ffd-pop 0.4s var(--ease-spring, ease-out) both; }
.ffd-hint { margin-top: 6px; color: var(--c-ink-muted); font-size: 12px; }
.ffd-hint--ok { color: var(--c-ok); font-weight: 500; }
.ffd-stage.has-photo .ffd-until-photo,
.ffd-stage:not(.has-photo) .ffd-when-photo { display: none; }
.ffd-send { margin-top: 18px; }
/* After Send: the confirmation with the fleet's number for the report (reportFiledBody). */
.ffd-filed { padding-top: 26px; text-align: center; }
.ffd-filed__icon { display: inline-flex; color: var(--c-ok); }
.ffd-filed__icon svg { width: 44px; height: 44px; }
.ffd-filed .ffd-h1 { margin-top: 10px; }
.ffd-stage:not(.is-filed) .ffd-filed,
.ffd-stage.is-filed .ffd-form { display: none; }
.ffd-stage.is-filed .ffd-filed { animation: ffd-in 0.45s ease both; }

/* The driver's photo, drawn: the van's flank, its wheel, the brake. */
.ffd-photo { display: block; width: 100%; height: 100%; border-radius: 8px; }
.ffd-photo__bg { fill: color-mix(in srgb, var(--c-ink) 30%, var(--c-surface)); }
.ffd-photo__body { fill: color-mix(in srgb, var(--c-accent) 35%, var(--c-surface-2)); }
.ffd-photo__road { fill: color-mix(in srgb, var(--c-ink) 45%, var(--c-surface)); }
.ffd-photo__tyre { fill: color-mix(in srgb, var(--c-ink) 12%, var(--c-canvas)); }
.ffd-photo__rim { fill: color-mix(in srgb, var(--c-ink) 55%, var(--c-surface)); }
.ffd-photo__hub { fill: var(--c-ink-subtle); }
.ffd-photo__caliper { fill: var(--c-rec); }

/* ── The manager's screen: the inbox, the report, the vehicle ────────── */
.ffd-stage:not([data-view='inbox']) .ffd-view--inbox,
.ffd-stage:not([data-view='report']) .ffd-view--report,
.ffd-stage:not([data-view='vehicle']) .ffd-view--vehicle { display: none; }
.ffd-view { animation: ffd-in 0.35s ease both; }
.ffd-view > * + * { margin-top: 12px; }
.ffd-view > .ffd-lead { margin-top: 4px; }
.ffd-stats { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.ffd-stat { display: grid; gap: 2px; }
.ffd-stat__label { color: var(--c-ink-subtle); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.ffd-stat__value { font-size: 22px; font-weight: 600; line-height: 1.2; }
.ffd-unread-count { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--c-rec); font-size: 12.5px; font-weight: 600; }
.ffd-unread-count svg { width: 10px; height: 10px; }
.ffd-stage:not(.is-arrived) .ffd-unread-count,
.ffd-stage.is-read .ffd-unread-count,
.ffd-stage.is-arrived .ffd-until-arrived,
.ffd-stage:not(.is-arrived) .ffd-when-arrived,
.ffd-stage.is-hist .ffd-until-hist,
.ffd-stage:not(.is-hist) .ffd-when-hist { display: none; }

/* One report as a row (reportRow): reference, plate, status; category; the driver's words; when, and drivable. */
.ffd-row {
  display: grid;
  gap: 3px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--c-line-strong);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.ffd-row:last-child { border-bottom: 0; }
.ffd-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; }
.ffd-ref { font-family: var(--font-mono); font-weight: 600; }
.ffd-row__cat { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.ffd-row__desc { color: var(--c-ink-muted); font-size: 13px; overflow-wrap: anywhere; }
.ffd-row__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--c-ink-subtle); font-size: 12px; }
.ffd-row__date { font-weight: 600; color: var(--c-ink-muted); }
.ffd-safe--no { color: var(--c-rec); }
/* A fixed report's answer is history, not an alarm (fixedDrivable in the app): muted and struck through. */
.ffd-safe--past,
.ffd-stage[data-state='fixed'] .ffd-safe--live { color: var(--c-ink-subtle); text-decoration: line-through; text-decoration-thickness: 1px; }
.ffd-stage[data-state='fixed'] .ffd-badge.ffd-safe--live { border-color: var(--c-line); }
/* The new report, not opened yet: a red frame and the word Unread, as the inbox marks it. */
.ffd-stage:not(.is-read) .ffd-row--live {
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-rec) 7%, transparent);
  box-shadow: inset 0 0 0 2px var(--c-rec);
}
.ffd-stage.is-read .ffd-unread { display: none; }
.ffd-stage:not(.is-arrived) [data-ffd-new],
.ffd-stage:not(.is-hist) [data-ffd-hist] { display: none; }
.ffd-stage.is-arrived [data-ffd-new],
.ffd-stage.is-hist [data-ffd-hist] { animation: ffd-drop 0.5s var(--ease-out-soft, ease-out) both; }
.ffd-stage.is-hist [data-ffd-hist] { background: var(--c-accent-soft); }

/* The report page (reportBody): its title and status, the panels, and the one change its status allows next. */
.ffd-crumb { display: flex; align-items: center; gap: 4px; color: var(--c-ink-muted); font-size: 12.5px; }
.ffd-crumb svg { width: 14px; height: 14px; }
.ffd-view > .ffd-crumb + * { margin-top: 8px; }
.ffd-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ffd-stage:not([data-state='new']) .ffd-s-new,
.ffd-stage:not([data-state='in_progress']) .ffd-s-in_progress,
.ffd-stage:not([data-state='fixed']) .ffd-s-fixed { display: none; }
.ffd-note {
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--c-ok) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c-ok) 10%, transparent);
  font-size: 13px;
}
.ffd-stage:not(.is-noticed) .ffd-note { display: none; }
.ffd-stage.is-noticed .ffd-note { animation: ffd-in 0.35s ease both; }
.ffd-split { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 12px; align-items: start; }
.ffd-col { display: grid; gap: 12px; min-width: 0; }
.ffd-desc { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.ffd-shot { display: block; width: 104px; height: 78px; }
.ffd-timeline { display: grid; gap: 9px; }
.ffd-timeline > li { padding-left: 11px; border-left: 2px solid var(--c-line-strong); font-size: 13.5px; }
.ffd-timeline .ffd-badge { margin-right: 4px; }
.ffd-ev { animation: ffd-in 0.4s ease both; }
.ffd-stage[data-state='new'] .ffd-ev,
.ffd-stage[data-state='in_progress'] .ffd-ev--fixed { display: none; }
.ffd-change { width: 100%; }
/* A fixed report's next change is the exception (the fault came back), so it is the quiet button; archiving leads. */
.ffd-stage[data-state='fixed'] .ffd-change { border-color: var(--c-line-strong); background: transparent; color: var(--c-ink); }
.ffd-col--side .ffd-btn { width: 100%; }

/* The alert e-mail, arriving over the manager's screen: bottom right, over the rows' empty ends, not over the title. */
.ffd-mail {
  position: absolute;
  right: 16px;
  bottom: 18px;
  z-index: 5;
  display: grid;
  gap: 3px;
  width: 330px;
  padding: 12px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  background: var(--c-surface);
  box-shadow: var(--shadow-lift);
  font-size: 12.5px;
  transition: opacity 0.4s ease, transform 0.45s var(--ease-out-soft, ease-out);
}
.ffd-stage:not(.is-mail) .ffd-mail { opacity: 0; transform: translateY(14px); }
.ffd-mail__from { display: flex; align-items: center; gap: 7px; color: var(--c-ink-muted); font-weight: 600; }
.ffd-mail__from svg { color: var(--c-accent); }
.ffd-mail__subject { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ffd-no { color: var(--c-rec); white-space: nowrap; }
.ffd-mail__line { color: var(--c-ink-muted); }
/* What flies from the phone's Send to the inbox (demo.js flyTo). */
.ffd-ghost {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: var(--shadow-lift);
}

/* Spaced-out letters break Arabic's joined script apart, so its small capitals-style labels keep their natural spacing. */
.ffd-stage:lang(ar) :is(.ffd-label, .ffd-badge, .ffd-panel__head, .ffd-stat__label) { letter-spacing: 0; }

/* ── On a phone: one screen at a time, the size of a phone ───────────── */
.ffd--narrow .ffd-phone { left: 30px; top: 20px; height: 680px; scale: none; }
.ffd--narrow .ffd-van { left: 0; top: 120px; }
.ffd--narrow .ffd-stage[data-beat='manager'] .ffd-van { opacity: 0; }
/* 10px from the edges is too close for a shadow the frame would cut; the window's border draws it alone here. */
.ffd--narrow .ffd-win { left: 10px; top: 20px; width: 380px; height: 680px; box-shadow: none; }
.ffd--narrow .ffd-stage[data-beat='manager'] .ffd-phone { opacity: 0; transform: translateX(-28px); }
.ffd--narrow .ffd-stage[data-beat='driver'] .ffd-win { opacity: 0; transform: translateX(28px); }
.ffd--narrow .ffd-appbar { justify-content: space-between; height: 48px; padding: 0 16px; }
.ffd--narrow .ffd-nav { display: none; }
.ffd--narrow .ffd-views { top: 88px; bottom: 58px; padding: 16px 16px 24px; }
.ffd--narrow .ffd-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  height: 58px;
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
}
.ffd--narrow .ffd-tabs .ffd-nav__item { flex-direction: column; justify-content: center; gap: 3px; font-size: 11px; }
.ffd--narrow .ffd-tabs .ffd-nav__item svg { width: 18px; height: 18px; }
.ffd--narrow .ffd-split { grid-template-columns: minmax(0, 1fr); }
.ffd--narrow .ffd-mail { top: 96px; right: 12px; bottom: auto; left: 12px; width: auto; }
.ffd--narrow .ffd-stage:not(.is-mail) .ffd-mail { transform: translateY(-14px); }

@keyframes ffd-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ffd-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes ffd-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes ffd-caret { 50% { opacity: 0; } }

/* A reader who asks for less motion gets the still frame (demo-fleetfault.js does not start the tour): nothing in it moves. */
@media (prefers-reduced-motion: reduce) {
  .ffd-stage *,
  .ffd-stage *::before,
  .ffd-stage *::after { animation: none !important; transition: none !important; }
}