/* ============================================================================
   Worklane — Escrow Timeline (WLS-88 / Stage 6)

   One reusable "Funded → In Progress → Approved → Released" rail, three surfaces
   driven by a context modifier:
     .wl-escrow--pdp      PDP awarded state (customer sidecard) — VERTICAL always
                          (narrow sidebar).
     .wl-escrow--confirm  order-received confirmation — HORIZONTAL (desktop) →
                          VERTICAL (≤560px).
     .wl-escrow--home     how-it-works illustrative band — HORIZONTAL → VERTICAL.

   State classes on .wl-escrow__step (live surfaces only): is-done / is-active /
   is-pending / is-void. The illustrative (home) variant renders is-neutral for
   every step — NO live-state class — so it can never read as a live order.

   All values flow from theme.json via the --color, --spacing, --radius and
   --shadow aliases bridged in global.css. No hard-coded colours. The state
   palette mirrors the existing .co-step done/active/pending vocabulary so the
   escrow rail is design-system native.
   ============================================================================ */

.wl-escrow {
  /* Component-scoped knobs — keep marker geometry in one place so the
     horizontal/vertical connector math stays consistent. */
  --wl-escrow-marker: 2.5rem;          /* 40px */
  --wl-escrow-line: 2px;
  --wl-escrow-gap-v: var(--spacing-50); /* vertical row spacing the connector spans */
  display: block;
}

.wl-escrow__caption {
  margin: 0 0 var(--spacing-40);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
  color: var(--color-contrast-muted);
}

/* ---- Track: horizontal by default (confirm / home desktop) --------------- */
.wl-escrow__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.wl-escrow__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-30);
}

/* Marker circle */
.wl-escrow__marker {
  position: relative;
  z-index: 1;
  width: var(--wl-escrow-marker);
  height: var(--wl-escrow-marker);
  flex: none;
  display: grid;
  place-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  color: var(--color-contrast-muted);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.wl-escrow__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.wl-escrow__label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-contrast-muted);
  letter-spacing: var(--tracking-snug);
}

.wl-escrow__sub {
  font-size: 0.78rem;
  line-height: var(--lh-normal);
  color: var(--color-contrast-subtle);
}

/* Connector line — horizontal: from this marker's centre to the next marker's
   centre (steps are equal-width flex items, so width:100% lands on centre). */
.wl-escrow__line {
  position: absolute;
  z-index: 0;
  top: calc(var(--wl-escrow-marker) / 2 - var(--wl-escrow-line) / 2);
  left: 50%;
  width: 100%;
  height: var(--wl-escrow-line);
  background: var(--color-neutral-strong);
  border-radius: var(--radius-full);
}

/* ---- States (live surfaces) ---------------------------------------------- */
/* PENDING — dim, upcoming (default marker styling above already = pending). */
.wl-escrow__step.is-pending .wl-escrow__line { background: var(--color-neutral-strong); }

/* DONE — accent-tinted, checkmark. Mirrors .co-step--done. */
.wl-escrow__step.is-done .wl-escrow__marker {
  background: var(--color-accent-weak);
  border-color: var(--color-accent-border);
  color: var(--color-accent-1);
}
.wl-escrow__step.is-done .wl-escrow__label { color: var(--color-contrast); }
.wl-escrow__step.is-done .wl-escrow__line { background: var(--color-accent-1); }

/* ACTIVE — filled accent + focus ring ("the money is here now"). Mirrors
   .co-step--active. The trailing connector stays pending (nothing after it
   is complete), so no is-done line rule here. */
.wl-escrow__step.is-active .wl-escrow__marker {
  background: var(--color-accent-1);
  border-color: var(--color-accent-1);
  color: var(--color-accent-on);
  box-shadow: var(--shadow-focus);
}
.wl-escrow__step.is-active .wl-escrow__label {
  color: var(--color-contrast);
  font-weight: var(--fw-bold);
}

/* VOID — cancelled/refunded. Muted error treatment, no progress, no check. The
   whole rail is dimmed so it never reads as an in-flight escrow. */
.wl-escrow--void .wl-escrow__marker {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-fg);
  opacity: 0.85;
}
.wl-escrow--void .wl-escrow__label { color: var(--color-contrast-subtle); }
.wl-escrow--void .wl-escrow__line { background: var(--color-error-border); }
.wl-escrow--void .wl-escrow__caption { color: var(--color-error-fg); }

/* NEUTRAL — illustrative (home) process. Uniform accent-outlined stages: no
   filled/active, no checkmark, no "done" — unmistakably a diagram, not a live
   order. */
.wl-escrow--illustrative .wl-escrow__marker {
  background: var(--color-surface-2);
  border-color: var(--color-accent-border);
  color: var(--color-accent-1);
}
.wl-escrow--illustrative .wl-escrow__label { color: var(--color-contrast); }
.wl-escrow--illustrative .wl-escrow__line { background: var(--color-accent-border); }
.wl-escrow--illustrative .wl-escrow__sub { color: var(--color-contrast-muted); }

/* ---- Context: HOME — a contained, branded band ---------------------------- */
.wl-escrow--home {
  margin-top: var(--spacing-60);
  padding: var(--spacing-60) var(--spacing-50);
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
}

/* ---- Context: CONFIRM — borderless strip under the thank-you banner ------- */
.wl-escrow--confirm {
  margin: 0 0 var(--spacing-60);
}

/* ---- Context: PDP — vertical, borderless, sits inside .pd-sidecard -------- */
.wl-escrow--pdp {
  margin: 0;
  padding-top: var(--spacing-40);
  border-top: 1px solid var(--color-neutral);
}
/* PDP caption is the per-status "where the money sits" line — a normal muted
   sentence (NOT an uppercase eyebrow), because for the completed and cancelled
   states there is no active step to carry that meaning. */
.wl-escrow--pdp .wl-escrow__caption {
  margin-bottom: var(--spacing-50);
}

/* ============================================================================
   VERTICAL layout — applied to (a) PDP always, and (b) every context ≤560px.
   Marker left, body right; connector runs down from the marker into the gap.
   ============================================================================ */
.wl-escrow--pdp .wl-escrow__track {
  flex-direction: column;
  align-items: stretch;
}
.wl-escrow--pdp .wl-escrow__step {
  flex: none;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--spacing-40);
  padding-bottom: var(--wl-escrow-gap-v);
}
.wl-escrow--pdp .wl-escrow__step:last-child { padding-bottom: 0; }
.wl-escrow--pdp .wl-escrow__body { padding-top: 0.35rem; }
.wl-escrow--pdp .wl-escrow__line {
  top: var(--wl-escrow-marker);
  left: calc(var(--wl-escrow-marker) / 2 - var(--wl-escrow-line) / 2);
  width: var(--wl-escrow-line);
  height: auto;
  bottom: -0.1rem;
}

@media (max-width: 560px) {
  .wl-escrow__track {
    flex-direction: column;
    align-items: stretch;
  }
  .wl-escrow__step {
    flex: none;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--spacing-40);
    padding-bottom: var(--wl-escrow-gap-v);
  }
  .wl-escrow__step:last-child { padding-bottom: 0; }
  .wl-escrow__body { padding-top: 0.35rem; }
  .wl-escrow__line {
    top: var(--wl-escrow-marker);
    left: calc(var(--wl-escrow-marker) / 2 - var(--wl-escrow-line) / 2);
    width: var(--wl-escrow-line);
    height: auto;
    bottom: -0.1rem;
  }
  /* The home band eases its padding on small screens. */
  .wl-escrow--home {
    padding: var(--spacing-50) var(--spacing-40);
  }
}

/* ----------------------------------------------------------------------------
   WLS-89 (bonus) — order-received celebration.
   A one-time, page-load entrance for the escrow rail on the confirm surface only,
   plus a single soft accent pulse on the reached "Funded" marker. Honest: it
   represents an already-true state (the customer just funded escrow) and plays
   once on load — it never re-derives lifecycle. Scoped to --confirm, so the PDP
   and home rails are untouched. Reduced-motion → the rail simply appears.
   ---------------------------------------------------------------------------- */
.wl-escrow--confirm {
  animation: wl-escrow-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.wl-escrow--confirm .wl-escrow__step.is-done .wl-escrow__marker {
  animation: wl-escrow-funded 1.4s ease-out 0.35s 1;
}
@keyframes wl-escrow-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wl-escrow-funded {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-1) 45%, transparent); }
  60%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-accent-1) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-1) 0%, transparent); }
}

/* Respect reduced-motion — the marker colour shift is cosmetic and the WLS-89
   entrance / funded pulse are decorative; disable them for users who ask. */
@media (prefers-reduced-motion: reduce) {
  .wl-escrow__marker { transition: none; }
  .wl-escrow--confirm,
  .wl-escrow--confirm .wl-escrow__step.is-done .wl-escrow__marker { animation: none; }
}