/**
 * Character-led workflow backgrounds.
 * Content remains readable through a shared dark veil and translucent surfaces.
 */
html[data-mjn-workflow-bg] body {
  min-height: 100dvh;
  background-color: #020617 !important;
  background-image:
    linear-gradient(180deg, rgba(2, 6, 23, 0.32), rgba(2, 6, 23, 0.76)),
    var(--mjn-workflow-background) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

html[data-mjn-workflow-bg="client-intake"] {
  --mjn-workflow-background: url("/assets/backgrounds/client-intake.png");
}

html[data-mjn-workflow-bg="worker-apply"] {
  --mjn-workflow-background: url("/assets/backgrounds/join-cleaning.png");
}

html[data-mjn-workflow-bg="worker-apply"][data-mjn-page-guide-active="public-jobs"] {
  --mjn-workflow-background: url("/assets/backgrounds/public-jobs.png");
}

html[data-mjn-workflow-bg="payment"] {
  --mjn-workflow-background: url("/assets/backgrounds/payment.png");
}

html[data-mjn-workflow-bg="progress"] {
  --mjn-workflow-background: url("/assets/backgrounds/progress.png");
}

html[data-mjn-workflow-bg="marketplace"] {
  --mjn-workflow-background: url("/assets/backgrounds/marketplace.png");
}

html[data-mjn-workflow-bg="marketplace-buyer"] {
  --mjn-workflow-background: url("/assets/backgrounds/marketplace-buyer.png");
}

html[data-mjn-workflow-bg="worker-task"] {
  --mjn-workflow-background: url("/assets/backgrounds/worker-task.png");
}

html[data-mjn-workflow-bg] body > .mjn-app,
html[data-mjn-workflow-bg] body > .page,
html[data-mjn-workflow-bg] main {
  position: relative;
  z-index: 1;
}

html[data-mjn-workflow-bg] .mjn-card,
html[data-mjn-workflow-bg] .card,
html[data-mjn-workflow-bg] .panel,
html[data-mjn-workflow-bg] .summary {
  border-color: rgba(244, 214, 139, 0.32) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.24) !important;
  backdrop-filter: blur(14px) saturate(1.08);
}

@media (max-width: 767px) {
  html[data-mjn-workflow-bg] body {
    background-attachment: scroll !important;
    background-position: center top !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html[data-mjn-workflow-bg] .mjn-card,
  html[data-mjn-workflow-bg] .card,
  html[data-mjn-workflow-bg] .panel,
  html[data-mjn-workflow-bg] .summary {
    background-color: #fff !important;
    backdrop-filter: none;
  }
}