/*  BUILD YOUR NEXT 2.0 — v1→v2 migration card (homepage only).
 *  Additive to design-system.css's .onboard-* panel styles, which migrate.js
 *  reuses. Only migrate-specific pieces live here (design-system.css is
 *  orchestrator-owned; these are proposed as a standalone agent file so no
 *  edit to the shared sheet is needed). Uses the same tokens.
 */

#migrate-root { position: relative; z-index: 62; }

/* Sit just above the onboarding panel in the rare case both fire, and nudge up
   so a stacked pair is legible rather than perfectly overlapping. */
.migrate-panel { z-index: 63; }

@media (min-width: 641px) {
  .migrate-panel { bottom: 24px; }
}

/* Deck line under the question (onboarding has no deck; migrate explains). */
.onboard-deck {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mut);
  margin: 0 0 16px;
}

/* Plain ruled list of what will be imported. */
.migrate-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.migrate-list li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
}

/* Two side-by-side actions on wider cards; stack on narrow. */
.migrate-actions { flex-direction: row; gap: 8px; }
.migrate-actions .onboard-opt { flex: 1; text-align: center; }
.migrate-import { border-color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .migrate-actions { flex-direction: column; }
}