/* App-specific first-use sample shown before a real local job exists. */
.empty-state {
  min-height: 430px;
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  place-content: normal;
  align-items: center;
  gap: 34px;
  text-align: left;
  color: var(--ink);
  background: var(--panel-raised);
}

.onboarding-preview { position: relative; min-width: 0; margin: 0; }
.onboarding-sample-label {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  padding: 5px 8px; border-radius: 999px;
  background: var(--ink); color: var(--panel);
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
}
.onboarding-stage {
  position: relative; width: 100%; aspect-ratio: 756 / 465; overflow: hidden;
  border-radius: 10px; background: #f2f2f2; color: #111;
  box-shadow: 0 14px 36px #1113; isolation: isolate;
}
.onboarding-safe-zone { position: absolute; inset: 7.5%; border: 1px dashed #bbb; border-radius: 7px; }
.onboarding-item { position: absolute; bottom: 13%; filter: drop-shadow(0 8px 6px #0002); }
.onboarding-item i, .onboarding-item b { display: block; }
.onboarding-item b {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  font: 400 clamp(10px, 1.45vw, 17px) / 1 CPN, sans-serif; white-space: nowrap;
}

.onboarding-key-box {
  left: 18%; width: 12%; height: 42%; border-radius: 5% 5% 2% 2%;
  background: linear-gradient(135deg, #dce1e7, #9aa6b3);
}
.onboarding-key-box::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: -9%; height: 10%;
  border-radius: 4px 4px 0 0; background: #687786;
}
.onboarding-key-box i { position: absolute; inset: 32% 14%; border: 2px solid #fff9; border-radius: 50%; }
.onboarding-key-bottle {
  left: 34%; width: 8%; height: 34%; border-radius: 14% 14% 7% 7%;
  background: linear-gradient(135deg, #f3e7d8, #b99e7e);
}
.onboarding-key-bottle::before {
  content: ""; position: absolute; left: 23%; right: 23%; top: -19%; height: 21%;
  border-radius: 3px 3px 0 0; background: #31343a;
}
.onboarding-key-bottle i {
  position: absolute; left: 18%; right: 18%; top: 34%; height: 35%;
  border-radius: 50%; background: #fff9;
}
.onboarding-plus { position: absolute; left: 48.2%; top: 56%; width: 4.25%; height: auto; }
.onboarding-gift-pouch {
  left: 59%; width: 15%; height: 31%; border-radius: 8% 8% 15% 15%;
  background: linear-gradient(145deg, #ff7187, #cf1237);
}
.onboarding-gift-pouch::before {
  content: ""; position: absolute; left: 17%; right: 17%; top: -23%; height: 34%;
  border: 5px solid #7e1830; border-bottom: 0; border-radius: 50% 50% 0 0;
}
.onboarding-gift-pouch i {
  position: absolute; left: 25%; right: 25%; top: 39%; height: 25%;
  border-radius: 5px; background: #fff;
}
.onboarding-gift-bottle {
  left: 78%; width: 7%; height: 27%; border-radius: 18% 18% 8% 8%;
  background: linear-gradient(145deg, #ffefe6, #e6b8a5);
}
.onboarding-gift-bottle::before {
  content: ""; position: absolute; left: 20%; right: 20%; top: -24%; height: 26%;
  border-radius: 3px 3px 0 0; background: #d29d86;
}
.onboarding-gift-bottle i {
  position: absolute; left: 18%; right: 18%; top: 36%; height: 30%;
  border: 2px solid #fff; border-radius: 50%;
}
.onboarding-gift-tag {
  position: absolute; right: 7.5%; top: 8%; width: 10.8%; height: auto;
  transform: rotate(4deg); filter: drop-shadow(0 6px 6px #0002);
}

.onboarding-preview figcaption { margin-top: 12px; color: var(--muted); font-size: 11px; text-align: center; }
.onboarding-preview figcaption b { display: inline; color: var(--ink); }
.onboarding-copy { min-width: 0; }
.onboarding-copy h3 { margin: 6px 0 18px; font-size: 24px; line-height: 1.18; }
.onboarding-steps { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.onboarding-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; }
.onboarding-steps li > b {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 12px;
}
.empty-state .onboarding-steps span,
.empty-state .onboarding-steps strong,
.empty-state .onboarding-steps small { display: block; margin: 0; }
.empty-state .onboarding-steps span { font-size: inherit; }
.onboarding-steps strong { font-size: 12px; }
.onboarding-steps small { margin-top: 3px !important; color: var(--muted); font-size: 10px; line-height: 1.45; }
.empty-state .onboarding-primary { width: 100%; min-width: 0; min-height: 46px; margin: 0; }
.onboarding-status, .onboarding-alternative { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.onboarding-status.ready { color: var(--ink); font-weight: 700; }

@media (max-width: 1180px) {
  .empty-state { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }
  .onboarding-preview, .onboarding-copy { width: min(680px, 100%); margin-inline: auto; }
}
@media (max-width: 820px) {
  .empty-state { padding: 18px; gap: 24px; }
  .onboarding-copy h3 { font-size: 21px; }
}
@media (max-width: 480px) {
  .empty-state { padding: 12px; gap: 18px; }
  .onboarding-sample-label { top: 7px; left: 7px; }
  .onboarding-preview figcaption { font-size: 10px; }
  .onboarding-copy h3 { font-size: 19px; }
  .onboarding-steps { gap: 10px; }
}